JS窗口宽度html5视频元素响应

JS window width html5 video element responsive

本文关键字：视频 元素 响应 html5 窗口 JS      更新时间：2023-09-26

好吧，我已经尝试了很多不同的东西，但不能让它工作。所以我在这里问。

我在一个页面上有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媒体查询不工作，因为视频元素一直在播放。是的，在移动设备上它被阻止了自动播放，但在桌面浏览器上调整它的播放大小，这应该不会发生。所以显示:没有;是不可能的。

所以我想我需要创建一些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/

在上面的代码中，您可以完整地看到代码并对其进行操作。谢谢你的帮助。

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

编辑1:

像往常一样，我将继续搜索和添加信息到这篇文章!我发现下面的代码可以达到这个目的: 
$("#video-ID").first().attr('src','')

或

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

我尝试了两个，但没有运气:见小提琴http://jsfiddle.net/36unpxj0/3/

编辑2:

好了，从citizenendelta那里得到了答案，它在JSFiddle中工作，因此我接受了他的答案。然而，这是目前没有工作在Joomla网站。所以我要继续查找

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

步骤:

  1. 我隐藏每个视频(pauseAndHideAll函数)
  2. 我检测屏幕(showTheGoodOne函数)
  3. 我显示并播放对应的视频

在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();
});
});

可选改进:

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

希望这对你有所帮助

#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>

相关文章：