Question

我有一个视频标题，我只想在桌面上播放，在移动设备上使用静态图像标题。我可以在移动设备上隐藏视频，看起来它工作正常，但视频仍然在后台加载并减慢页面加载速度。如何在移动设备上停止加载视频。

<video id="bgvid" class="hidden-xs ">    
  <source type="video/mp4" src="myvideo.mp4"></source>
</video>

<img alt="" style="width: 100%; height: auto;" src="myimage.jpg" class="visible-xs" />

Answer 1

假设您通过CSS或早期的JS代码设置可见性，您可以执行以下操作：

在您的视频元素中包含data-src个属性，而不是src。如果我们不需要，则不加载src。
如果可见，请将data-src复制到src
现在在.load()元素上调用video，以获取新值。

$(
  function() {
    var bgv = $('#bgvid');

    if (bgv.is(':visible')) {
      $('source', bgv).each(
        function() {
          var el = $(this);
          el.attr('src', el.data('src'));
        }
      );

      bgv[0].load();
    }
  }
)

.hidden-xs {
  display: none;
}

/* dummy criterion for demo purposes */
@media screen and (min-width: 400px) {
  .hidden-xs {
    display: block;
  }
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<video id="bgvid" class="hidden-xs " controls>
  <source type="video/mp4" data-src="https://archive.org/download/UNIVAC-AD-2/UNIVAC2_512kb.mp4"></source>
  <source type="video/ogg" data-src="https://archive.org/download/UNIVAC-AD-2/UNIVAC2.ogv" />
</video>

或者，没有jQuery：

window.addEventListener("load", function() {
  var bgv = document.getElementById("bgvid");

  // what jQuery checks under the hood
  var visible = !!(bgv.offsetWidth ||
    bgv.offsetHeight ||
    bgv.getClientRects().length);

  if (visible) {
    var children = bgv.getElementsByTagName("source");

    for (var i = 0; i < children.length; ++i) {

      children[i].src = children[i].getAttribute("data-src");
    }
  }

  bgv.load();
});

.hidden-xs {
  display: none;
}

/* dummy criterion for demo purposes */

@media screen and (min-width: 400px) {
  .hidden-xs {
    display: block;
  }
}

<video id="bgvid" class="hidden-xs " controls>
  <source type="video/mp4" data-src="https://archive.org/download/UNIVAC-AD-2/UNIVAC2_512kb.mp4"></source>
  <source type="video/ogg" data-src="https://archive.org/download/UNIVAC-AD-2/UNIVAC2.ogv" />
</video>

Answer 2

将<video> poster属性值设置为图像文件的路径。在load事件window检查条件，以确定是否将.src <video>元素设置为视频文件的路径。

<video poster="myimage.jpg"></video>

window.onload = function() {
  if (/* conditions */ window.innerWidth > 480) 
    document.querySelector("video").src = "myvideo.mp4";
}

Answer 3

此解决方案对我有用。您可以将数字“ 767”更改为您不想在其上显示视频的设备的任何最大像素宽度。请记住，这将从移动设备上删除所有视频。但是，您也可以使用视频标签的类别或ID；您只需要更改remove（）的脚本即可。

标头中的脚本代码：

<script src="https://code.jquery.com/jquery-1.9.1.min.js"></script>
<script> 
 $(document).ready(function() {
   if($(window).width() <= 767){

    $( "video" ).remove();
   }
});

</script>

在文档正文中

<div class="fullscreen-bg">
    <video loop muted autoplay class="fullscreen-bg__video">
            <source src="http://yoururl.com/video.mp4" type="video/mp4">
        </video>

</div>

Answer 4

如果您想在移动设备上使用后备 img 停止多个视频并将它们静音，这应该会有所帮助

const video = document.querySelectorAll('video')
              video.forEach(data=>{
                data.volume = 0 //mute video
                console.log(data);
                  if (window.innerWidth <= 768) {
                      data.autoplay=false;
                  } else {
                      data.play();
                  }
                })

停止在移动设备的背景中加载视频

4 个答案: