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

Question

我是 Whosebug 的新手，我需要 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>

提前非常感谢你们提供有用的提示、技巧和答案。干杯！

Answer 1

要为视频创建不同的质量设置，通常会看到 'media' 属性包含在 source-tag 中（可能嵌套在 video-tag 中；如上所述）。注意：W3C不推荐，部分浏览器也不支持，如Google Chrome。可以通过使用 JavaScript 来实现不同的视频质量设置：Chrome not respecting video source inline media queries

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

HTML5 media query video for different viewports (breakpoint not working)

css

media-queries

html5-video

viewport

breakpoints