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

Posted

技术标签:

【中文标题】不同视口的 HTML5 媒体查询视频(断点不起作用)【英文标题】:HTML5 media query video for different viewports (breakpoint not working) 【发布时间】:2016-01-18 06:36:55 【问题描述】:

我是 *** 的新手,我需要一些 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>

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

【问题讨论】:

宽度查询拼写错误。删除每个px之前的空格 感谢您的意见。我已经尝试删除空间,但是 - 不知何故 - 它仍然无法正常工作。你还有什么想法吗? 现在不行。您可以将 sn-p 更改为完整的工作示例吗?它目前只显示黑屏,很难看到这样是否击中了断点!另外,您正在使用哪些浏览器和/或平台进行测试? 好吧,我很抱歉 - 我认为你是对的,李斯特先生!它看起来像一个与浏览器相关的问题:一切都在 Firefox 中按预期工作(不同的视频用于不同的视口等),但在 chrome 中,它只显示第一个视频(对于任何设备)并且与视口不对应。 【参考方案1】:

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

【讨论】:

以上是关于不同视口的 HTML5 媒体查询视频(断点不起作用)的主要内容,如果未能解决你的问题,请参考以下文章

退出 html5 全屏模式时 css 媒体查询不起作用 - safari

媒体查询在 React 中不起作用

媒体查询不起作用?

SCSS 中的媒体查询无法正常工作

视口和 CSS 媒体查询的宽度不同?

媒体视频播放器 HTML5 JS