使用下面的代码,Chrome不会根据媒体查询来显示基于设备宽度的正确视频源。Chrome只会播放它找到的第一个视频源,如图所示:http://homeglobal.ch/ .如何修复此问题?
<video id="intro-video" poster="img/poster.png" controls>
<source src="videos/intro.mp4" type="video/mp4" media="all and (min-device-width:1600px)">
<source src="videos/intro.webm" type="video/webm" media="all and (min-device-width:1600px)">
<source src="videos/intro-1600.mp4" type="video/mp4" media="all and (min-device-width:1100px)">
<source src="videos/intro-1600.webm" type="video/webm" media="all and (min-device-width:1100px)">
<source src="videos/intro-1100.mp4" type="video/mp4" media="all and (min-device-width:481px)">
<source src="videos/intro-1100.webm" type="video/webm" media="all and (min-device-width:481px)">
<source src="videos/intro-480.mp4" type="video/mp4">
<source src="videos/intro-480.webm" type="video/webm">
</video>
5条答案
按热度按时间ut6juiuv1#
不幸的是,Chrome不支持对视频html 5标签的媒体查询。解决这个问题的一个方法是使用普通的Javascript或Jquery。它不漂亮,但即使在Chrome中也能工作。
oxcyiej72#
我在Vanilla JS上的实现。
在
video
标签中,指定默认视频的路径作为data-src
属性,在video
标签中,在source
标签中,指定data-src
和data-mw
两个属性的值。data-src
-是视频文件的路径。data-mw
-显示此视频的最大屏幕宽度。当屏幕宽度改变时,此解决方案会自动工作。这是通过
resize()
函数完成的。ercv8c1e3#
可以在CSS中完成
csbfibhn4#
我的解决方案显示不同的视频取决于屏幕大小:
piok6c0g5#
我使用了
object-fit: cover;
的解决方案编码笔here