响应式Html5视频分辨率 [英] Responsive Html5 Video Resolution

问题描述

我正在使用响应式网页设计编写一个简单的网页，因此CSS3媒体查询根据屏幕分辨率提供不同的样式表。为了简单起见，我们假设有一个iphone版本和一个桌面版本。我正在使用html5视频标签来提供视频，我希望在使用桌面访问网站时提供720p视频，而使用iphone访问时使用较小的320p视频。我错了还是没有简单的方法可以用html / css做到这一点？我是否必须使用javascript动态更改视频src属性？如果是这样，最佳做法是什么？在此先感谢。

I'm writing a simple web page using responsive web design, so CSS3 media queries to serve different stylesheets based on screen resolution. To keep it simple, let's say there is an iphone versione and a desktop version. I'm using the html5 video tag to serve videos, and i would like to serve a 720p video when the site is accessed with a desktop and a smaller, 320p video when accessed with an iphone. Am i wrong or there is no easy way to do it just with html/css? Do i have to use javascript to dynamically change the video src attribute? If so, what are the best practices? Thanks in advance.

推荐答案

您可以将 media 属性添加到各种来源元素，允许您为匹配媒体查询设置的设备提供不同的视频（由上面的DBUK链接）。

You can add the media attribute to the various source elements allowing you to serve up different videos for devices which match media query settings (as linked to by DBUK above).

例如：

<video controls>
   <source src="mySmallVideo.webm" type="video/webm" media="all and (max-width:600px)">
   <source src="myVideo.webm" type="video/webm">
</video>

更新– 24.07.2012
这可能是从规范中删除。

这篇关于响应式Html5视频分辨率的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！