响应式Html5视频分辨率

Question

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

Answer 1

您可以将media属性添加到各种source元素，以便为符合媒体查询设置的设备提供不同的视频（由上面的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。