Javascript 使用媒体查询删除视频元素

我有一个背景视频，当屏幕尺寸小于979px时，我想删除它。以下代码片段位于基于Joomla的网站中。它使用最新的jquery

我正在使用以下css：

/*
VIDEO/TEXT BACKGROUND STYLING
*/
/*NON RESPONSIVE ELEMENTS*/
video.backgroundvids {
z-index: -1;
width: 100%;
height: 100%;
position: fixed;
top: 0;
left: 0;
overflow: hidden;
object-fit: fill!important;
display:block;
}
/*RESPONSIVE ELEMENTS*/
@media (min-width: 0px) and (max-width: 479px) {
.ls-mobileview {display:block;}
.ls-desktopview {display:none;}
video.backgroundvids {display:none;}
}
@media (min-width: 480px) and (max-width: 767px) {
.ls-mobileview {display:block;}
.ls-desktopview {display:none;}
video.backgroundvids {display:none;}
}
@media (min-width: 768px) and (max-width: 979px) {
.ls-mobileview {display:block;}
.ls-desktopview {display:none;}
video.backgroundvids {display:none;}
}
@media (min-width: 980px) and (max-width: 1199px) {
.popper {position: fixed;right: 10px;bottom: 10px;}
.ls-mobileview {display:none;}
.ls-desktopview {display:block;}
video.backgroundvids {display:block;}
}
@media (min-width: 1200px) {
.popper {position: fixed;right: 10px;bottom: 10px;}
.ls-mobileview {display:none;}
.ls-desktopview {display:block;}
video.backgroundvids {display:block;}
}

结合以下HTML和JS：

<div class="ls-desktopview">
 <video preload="none" autoplay loop id="backgroundvids" class="backgroundvids">
  <source src="images/clientvideos/frontpage/video.mp4" type="video/mp4"/>
  <source src="images/clientvideos/frontpage/video.ogv" type="video/ogg"/>
  <source src="images/clientvideos/frontpage/video.webm" type="video/webm"/>    
  Your browser does not support the video tag.
 </video> 
<div style="display:inline-block;"><button onclick="playPause()" class="btn btn-primary btn-grey">Play/Pause</button></div> 
<div style="display:inline-block;">{modal index.php/welcome}<div class="popper"><button class="btn btn-primary btn-orange">More Information</button></div>{/modal}</div>

您的浏览器不支持视频标记。
播放/暂停
{modal index.php/welcome}更多信息{/modal}

$（'video'）.attr（'src'，''）；
段落文本

var myVideo=document.getElementById（“backgroundvids”）；
函数playPause（）
{ 
如果（myVideo.paused）
myVideo.play（）；
其他的
myVideo.pause（）；
}

我尝试了很多方法来解决它，但它一直在小屏幕上加载视频元素。任何移除src或整个视频元素（首选）的解决方案都将非常感激

我最后一次尝试是上面的代码。加载mobileview时，我添加了代码

$（'video'）.attr（'src'，''）
但这也不起作用

感谢您提前回复。如果不清楚我想达到什么目的，请发表评论，我将尝试进一步阐述。
看看我们的评论，这里有一个简单的解决方案。如果您需要，对代码的注释将帮助您理解代码：

2个工作解决方案：1个使用jquery | 2个不使用jquery

1：


//使用jquery的domready
$（函数（）{
//只在必要时调用我们的函数
WidthControl.Set（）；
//处理调整大小事件
$（窗口）.on（'resize'，function（））{
WidthControl.Set（）；
});
});
变量宽度控制={
current:null，//必要时获取当前宽度的变量
Set:function（）{//设置当前宽度并调用DoStuff函数
var w=窗内宽度；
该电流=w；
这是DoStuff（）；
},
DoStuff:function（）{//这里我们暂停（或停止）视频元素
var target=document.getElementById（'backgroundvids'）；
如果（添加this.current>0&&this.current<979&&/*以防止onresize调用->*/！target.paused）{
target.autoplay=false；
target.load（）；
}
}
};

2：


window.onload=function（）{//我更改的行
//只在必要时调用我们的函数
WidthControl.Set（）；
//处理调整大小事件
window.onresize=函数（）{
WidthControl.Set（）；
}
};  // 删除“）”
变量宽度控制={
current:null，//必要时获取当前宽度的变量
Set:function（）{//设置当前宽度并调用DoStuff函数
var w=窗内宽度；
该电流=w；
这是DoStuff（）；
},
DoStuff:function（）{//这里我们暂停（或停止）视频元素
var target=document.getElementById（'backgroundvids'）；
如果（添加this.current>0&&this.current<979&&/*以防止onresize调用->*/！target.paused）{
target.autoplay=false；
target.load（）；
}
}
};
使用您的代码，效果很好。视频元素在
@媒体（最大宽度：979px）和（最小宽度：768px）
上显示：无@kmsdev这是真的，但由于自动播放，它一直在运行视频的音频是的，发生这种情况是因为你只隐藏了视频元素。您可以使用javascript控制宽度窗口，使用
window.innerWidth
。我会发布一个有足够帮助的答案你需要自动播放吗？很多人认为粗鲁的网站行为。无论如何，这可能会帮助您使用jQuery关闭自动播放：@kmsdev抱歉，我在吃晚饭时反应太晚了。我期待着答案。非常感谢你的回答。我用W3学校的电影更新了你最新的小提琴以供测试。在这里，它正在发挥作用。只有自动播放在JSFIDLE中不起作用。再见，这里是链接。我将在演示网站上试用。我再打给你。非常感谢。看起来不错，我编辑了我的答案，更改了你的更新版JSFIDLE:）你可以控制自动播放重新加载视频。检查。使用我发布的代码，进入
DoStuff（）
函数更改
target.pause（）
到
target.autoplay=false；target.load（）。我编辑了这篇文章以反映这一点。我尝试了答案中的代码，但它不起作用。我开始认为这可能是Jquery的问题。那么，以下哪种方法可行呢<代码>变量x=document.getElementById（“backgroundvids”）；函数disableAutoplay（）{x.autoplay=false；x.load（）；}
但我相信代码没有执行。我如何执行这个函数？你不能使用我在answer中发布的代码吗？它应该像预期的那样工作
<div class="ls-mobileview">
<script language="JavaScript" type="text/javascript">
$('video').attr('src', '');
</script>
 <div class="page-header"><h2><a href="#">Headertext!</a></h2></div>
 <p>Paragraphtext</p> 
</div>

<script language="JavaScript" type="text/javascript">
var myVideo=document.getElementById("backgroundvids"); 
function playPause()
{ 
if (myVideo.paused) 
  myVideo.play(); 
else 
  myVideo.pause(); 
}
</script>

<script language="JavaScript" type="text/javascript">
    // domready with jquery
    $(function(){
        // call our function on ready. only if necessary
        WidthControl.Set();

        // handle resize event
        $(window).on('resize', function(){
            WidthControl.Set();
        });

    });

    var WidthControl = {
        current: null,  // variable to get current width when necessary

        Set: function(){  // sets the current width and call DoStuff function
            var w = window.innerWidth;
            this.current = w;
            this.DoStuff();
        },

        DoStuff: function(){  // here we pause (or stop if you want) the video element
            var target = document.getElementById('backgroundvids');
            if( this.current > 0 && this.current < 979 && /*added to prevent onresize calls ->*/ !target.paused ){
                target.autoplay = false;
                target.load();
            }
        }
    };
</script>

<script language="JavaScript" type="text/javascript">
    window.onload = function(){    // the line that I changed

        // call our function on ready. only if necessary
        WidthControl.Set();

        // handle resize event
         window.onresize = function(){ 
             WidthControl.Set(); 
         }
     };  // removed ')'

    var WidthControl = {
        current: null,  // variable to get current width when necessary

        Set: function(){  // sets the current width and call DoStuff function
            var w = window.innerWidth;
            this.current = w;
            this.DoStuff();
        },

        DoStuff: function(){  // here we pause (or stop if you want) the video element
            var target = document.getElementById('backgroundvids');
            if( this.current > 0 && this.current < 979 && /*added to prevent onresize calls -     >*/ !target.paused ){
                target.autoplay = false;
                target.load();
            }
        }
    };
 </script>