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媒体查询aint工作，因为视频元素继续播放。是的在移动设备上它被禁止自动播放，但在桌面浏览器调整大小时，播放这种情况不应该发生。所以显示：无;是不可能的。

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

好的从CitizenDelta那里得到答案，它正在JSFiddle工作，因此我接受了他的回答。但是，这目前在Joomla网站内无效。所以我要继续寻找。

Answer 1

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

步骤：

我隐藏了每个视频（pauseAndHideAll功能）
我检测到屏幕（showTheGoodOne功能）
我展示并播放视频correpsonding

在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

＆＃13;

#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%;
}

＆＃13;

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

＆＃13;

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

2 个答案:

希望这可以帮助你只是css