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

好吧，我已经尝试了很多不同的东西，但都没能成功。所以我在这里问

我在一个页面上有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

或

我两个都试过了，但都不走运

编辑2：

---

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

我希望这是一个演示，它正是您所需要的：

步骤：

我隐藏每个视频（暂停和隐藏所有功能）

我检测到屏幕（显示GoodOne功能）

我播放相应的视频

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

$（文档）.ready（函数（）{
函数pauseAndHide（$element）{
$element.get（0.pause（）；
$element.hide（）；
}
函数showTheGoodOne（）{
如果（$（窗口）.width（）<767）{
$（'#smartphonevid'）.show（）；
$（'#smartphonevid'）.get（0.play（）；
}如果（$（window.width（）>=767&&$（this.width（）<980），则为else{
$（'#tabletvid'）.show（）；
$（'#tabletvid'）.get（0.play（）；
}else if（$（窗口）.width（）>=980）{
$（'#desktopvid'）.show（）；
$（'#desktopvid'）.get（0.play（）；
} 
}
函数pauseAndHideAll（）{
$（'video'）。每个（函数（）{
pauseAndHide（$（本））；
});     
}
pauseAndHideAll（）；
展示好的一面（）；
$（窗口）。调整大小（函数（）{
pauseAndHideAll（）；
展示好的一面（）；
});
});

可选改进：

也许您可以检测视频播放的当前时间，然后将其他视频恢复到此时间。

希望这对您有所帮助

#视频背景{
身高：0；
溢出：隐藏；
垫底：56.25%；
填充顶部：30px；
位置：相对位置；
}
#视频背景>视频{
位置：绝对位置；
排名：0；
左：0；
宽度：100%；
身高：100%；
}

谢谢。我之前的评论不正确，没有正确阅读您的答案。很抱歉。是的，我已经在上面的更新帖子中介绍了它的工作方式。这是纯JS，所以不需要jQuery！对吗？好吧，它在JSFIDLE上工作得很好，但是当我在Joomla模块中插入代码时，它就不是了。知道吗？我不知道，但也许你没有提供足够的信息。尝试搜索，可能会打开一个新问题，因为这里的问题不同^^（如果可行，请解决此问题）谢谢你，但你在这里的实际建议是什么！我可以看到填充的不同，但这与停止播放视频元素无关？也许我弄错了！这是一个弹性视频适合您的端口视图，只需使用一个视频元素。不需要媒体查询。尝试在全屏上运行代码段并调整窗口大小。好的，很好。如何使用智能手机、平板电脑和台式机的3个不同视频实现此功能。请看一下fiddle.net/36unpxj0/4/并按您认为的方式进行更改。真的很感兴趣。为什么你需要3个视频，显示相同的视频元素，来源和配置（根据你的小提琴）？如果您需要平板电脑、智能手机或PC的不同来源和配置，可能需要在服务器上验证客户端，并根据客户端构建html。通过这个弹性视频，它将在portview上播放。它显示的视频元素与示例相同。它是一个Joomla模块，因此用户可以选择用于哪个视频的元素。你的第二个建议是正确的，我们将对此进行调查。感谢您提供的弹性CSS，正如您在小提琴中看到的，该部分已经涵盖。再次感谢您抽出时间回复并给出您的答案。

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

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

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