html - 响应式 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>

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