响应式Html5视频分辨率

Question

响应式Html5视频分辨率

Mar*_*zio 8 html5 html5-video responsive-design

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

Answer 1

Ian*_*lin 9

您可以将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>

Run Code Online (Sandbox Code Playgroud)

更新 - 24.07.2012 这可能会从规范中删除.

有没有人知道是否有关于`media`属性的最新信息？它似乎仍然适用于大多数浏览器,但这个答案让我觉得我应该考虑采用`javascript`方法...... (3认同)
当“source”的父元素不是“picture”时，“media”不是有效属性。所以这可能没有效果。“srcset”和“sizes”也是如此。[mdn 文档](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/source) (3认同)

归档时间：	13 年，10 月前
查看次数：	11913 次
最近记录：	12 年，4 月前