响应式Html5视频分辨率

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

解决方法

您可以将媒体属性添加到各种源元素,以便为与媒体查询设置匹配的设备(由上面的DBUK链接)提供不同的视频.

例如：

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

更新 – 2012年7月24日
这可能是removed from the specification.

原文地址：https://www.jb51.cc/html5/168433.html