不同视口的HTML5媒体查询视频(断点不起作用)

时间:2015-10-19 19:35:55

标签: css3 media-queries html5-video viewport breakpoints

我是stackoverflow的新手,我需要HTML5和CSS3的一些帮助,因为我是响应式设计/媒体查询的新手。 (我使用了论坛搜索,但我无法在我的问题上找到答案。)

我想为不同的视口显示不同的视频。 你能帮我解决下面的HTML代码:

video {
	width:100%;
	height:auto;
}
<div id="vid-container">
    <video id="video" controls>
        <source src="vid/video1.mp4" type="video/mp4" media="all and (min-width: 1024 px)">
        <source src="vid/video1.webm" type="video/webm" media="all and (min-width: 1024 px)">
        <source src="vid/video2.mp4" type="video/mp4" media="all and (max-width: 1023 px)">
        <source src="vid/video2.webm" type="video/webm" media="all and (max-width: 1023 px)">
    </video>
</div>

非常感谢你们提供有用的tipps,技巧和答案。 干杯!

1 个答案:

答案 0 :(得分:2)

要为视频创建不同的质量设置,通常会看到“媒体”属性包含在源标记中(可以嵌套在视频标记中;如上所述)。 注意:W3C不建议这样做,也不支持某些浏览器,例如Google Chrome。可以使用JavaScript来实现不同的视频质量设置:Chrome not respecting video source inline media queries