html - Chrome 不尊重视频源内联媒体查询

Question

使用以下内容，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>

Answer 1

不幸的是，Chrome 不支持视频 html 5 标签的媒体查询。解决此问题的方法是使用纯 Javascript 或 Jquery。它并不漂亮，但即使在 chrome 中也能正常工作。

var video = $('#myvideo');

var WindowWidth = $(window).width();

if (WindowWidth < 1200) {
    //It is a small screen
    video.append("<source src='/img/homepage/640/splash.m4v' type='video/mp4' >");
} else {
    //It is a big screen or desktop
    video.append("<source src='/img/homepage/1080/uimain-1080.mp4' type='video/mp4' >");
}