我正在使用响应式网页设计编写一个简单的网页,因此
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.
