我正在使用响应式网页设计编写一个简单的网页，因此 CSS3 媒体查询可以根据屏幕分辨率提供不同的样式表。为简单起见，假设有一个 iphone 版本和一个桌面版本。我正在使用 html5 视频标签来提供视频，并且我想在使用桌面访问网站时提供 720p 视频，并在使用 iPhone 访问时提供更小的 320p 视频。我错了还是仅使用 html/css 就没有简单的方法可以做到这一点？我必须使用 javascript 来动态更改视频 src 属性吗？如果是这样，最佳实践是什么？提前致谢。
【问题讨论】：
标签： html html5-video responsive-design
您可以将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 这很可能是removed from the specification。
【讨论】：
media 属性是否有更多最新信息？它似乎在大多数浏览器中仍然有效，但这个答案让我觉得我应该考虑使用javascript 方法......
width 使用javascript 更改了source 标签。