阻止视频在移动设备的后台加载

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 代码中设置可见性，您可以执行以下操作：

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

$(
  function() {
    const bgv = $('#bgvid');

    if (bgv.is(':visible')) {
      $('source', bgv).each(
        function() {
          const 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: 300px) {
  .hidden-xs {
    display: block;
  }
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.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 type="video/ogg" data-src="https://archive.org/download/UNIVAC-AD-2/UNIVAC2.ogv">
</video>

或者，没有 jQuery：

window.addEventListener("load", function() {
  const bgv = document.getElementById("bgvid");

  // what jQuery checks under the hood
  const visible = bgv.offsetWidth ||
    bgv.offsetHeight ||
    bgv.getClientRects().length;

  if (visible) {
    const children = bgv.getElementsByTagName("source");

    for (let i = 0; i < children.length; ++i) {
      children[i].src = children[i].dataset.src;
    }
  }

  bgv.load();
});

.hidden-xs {
  display: none;
}

/* dummy criterion for demo purposes */

@media screen and (min-width: 300px) {
  .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 type="video/ogg" data-src="https://archive.org/download/UNIVAC-AD-2/UNIVAC2.ogv">
</video>

Answer 2

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

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