Question

当屏幕尺寸小于979像素时，我想要删除背景视频。以下代码片段位于基于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>

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

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

我的最后一次尝试是上面的代码。加载mobileview后，我添加了代码<script language="JavaScript" type="text/javascript"> $('video').attr('src', ''); </script> 但这也行不通。

感谢您提前回复。如果不清楚我想要达到的目的，请发表评论，我会进一步详细说明。

Answer 1

在我们的评论中，这是一个简单的解决方案。如果您需要，代码注释将帮助您理解：

2个工作解决方案：1个用jquery | 2没有jquery

1：

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

2：

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

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

1 个答案: