[英]How come inline video src media queries aren't working?
我最近创建的网页有两个视频,但内联媒体查询不起作用。
播放器只是拉取源列表中的第一个视频。
这是我的代码:
<video class="intro-video" controls poster="lineandgrid-video-intro-cover.gif">
<source media="(max-width: 750px)" src="lineandgrid-introduction-video-mobile.mp4" type="video/mp4">
<source media="(min-width: 751px)" src="lineandgrid-introduction-video.mp4" type="video/mp4">
</video>
有人可以告诉我我做错了什么吗? 您可以在此处查看实时网页: https://lineandgrid.ca/video/
媒体查询通常只支持 <picture> 元素。
属性: Media:资源的预期媒体的媒体查询; 这应该只在 <picture> 元素中使用。
来源: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/source :
Chrome 不支持对 videotag 中的源标签进行内联媒体查询。 [...] 更糟糕的是,普通媒体查询不会阻止加载多个视频,这实际上会使您的数据翻倍,因此它需要一个 JS 解决方案。
建议的 JS 解决方案,如果原始博文不可用: https://gist.githubusercontent.com/fuzzywalrus/8abdd088e3fb6a73fd5d980f7bab0118/raw/9922cce9c4c040164f383671070e588c2adff
原答案:
显然,对内联媒体查询的支持已被删除:
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.