JS window 宽度html5 视频元素响应

Question

好吧，我已经尝试了很多不同的方法，但无法正常工作。所以我在这里问一下。

我在一个页面上有 3 个视频元素。一种适用于台式机、平板电脑和智能手机。现在我需要根据屏幕尺寸删除视频元素。

So when screen size is < 767:
Smartphone = visible
Tablet = removed
Desktop = removed

Screen size is >=767 && <980
Smartphone = removed
Tablet = visible
Desktop = removed

Screen size is >=980
Smartphone = removed
Tablet = removed
Desktop = visible

CSS 媒体查询无法正常工作，因为视频元素一直在播放。是的，在移动设备上它会被阻止自动播放，但在桌面浏览器上调整大小它播放这不应该发生。所以display:none；是不可能的。

所以我想我需要创造一些 JS 魔法。这就是我目前所拥有的，我正在尝试用我能想到的一切来填充空白页，但到目前为止它没有产生预期的效果。

$(document).ready(function () {
$(window).resize(function () {
    if ($(this).width() < 767)
        WHAT SHOULD I WRITE HERE
    else if ($(this).width() >= 767 && $(this).width() < 980)            
        WHAT SHOULD I WRITE HERE            
    else if ($(this).width() >= 980)                        
        WHAT SHOULD I WRITE HERE            
});
});

http://jsfiddle.net/36unpxj0/2/

在上面的 fiddle 中，您可以看到完整的代码以及 fiddle 周围的代码。非常感谢您的帮助。

PS: jQuery 解决方案与纯 JS 一样受欢迎，但请告知它是 JS 还是 jQuery。

编辑 1：

像往常一样，我将继续搜索并向其中添加信息 post！我发现以下内容可以解决问题：

$("#video-ID").first().attr('src','')

或

$("#video-ID").empty().remove();

我都试过了，但没有成功：见 fiddle http://jsfiddle.net/36unpxj0/3/

编辑 2：

好的，从 CitizenDelta 得到了答案，它在 JSFiddle 中工作，因此我接受了他的答案。然而，这目前在 Joomla 网站内不起作用。所以我会继续寻找。

Answer 1

这里有一个演示，我希望它是你需要的：demo

步骤：

我隐藏每个视频（pauseAndHideAll 函数）
我检测屏幕（showTheGoodOne函数）
我展示并播放相应的视频

在 JavaScript 中，我刚刚做了这个 :

$(document).ready(function () {

function pauseAndHide($element) {
    $element.get(0).pause();
    $element.hide();
}

function showTheGoodOne() {
    if ($(window).width() < 767) {
        $('#smartphonevid').show();
        $('#smartphonevid').get(0).play();
    } else if ($(window).width() >= 767 && $(this).width() < 980)   {
        $('#tabletvid').show();
        $('#tabletvid').get(0).play();
    } else if ($(window).width() >= 980)  {
        $('#desktopvid').show();
        $('#desktopvid').get(0).play();
    } 
}

function pauseAndHideAll() {   
    $('video').each(function() {
        pauseAndHide($(this));         
    });     
}

pauseAndHideAll();
showTheGoodOne();

$(window).resize(function () {
    pauseAndHideAll();
    showTheGoodOne();
});
});

可选改进：

也许你可以检测到视频播放的当前时间，然后你将另一个视频恢复到这个时间。

Answer 2

希望这对你有帮助 css

#video-bg {
   height: 0;
   overflow: hidden;
   padding-bottom: 56.25%;
   padding-top: 30px;
   position: relative;
}
#video-bg > video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

<div id="video-bg" class="smartphone">
    <video autoplay muted loop controls id="smartphonevid">
        <source src=http://techslides.com/demos/sample-videos/small.webm type=video/webm>
            <source src=http://techslides.com/demos/sample-videos/small.ogv type=video/ogg>
                <source src=http://techslides.com/demos/sample-videos/small.mp4 type=video/mp4>
    </video>
</div>

JS window 宽度html5 视频元素响应

JS window width html5 video element responsive

html

javascript

html5-video

希望这对你有帮助 css