阻止视频在手机后台加载

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

原文由 Harry Robinsob 发布，翻译遵循 CC BY-SA 4.0 许可协议

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>

原文由 Paul Roub 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

将 <video> poster 属性值设置为图像文件的路径。 At load event of window check conditions to determine whether or not to set .src of <video> element to path to video file.

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

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

原文由 guest271314 发布，翻译遵循 CC BY-SA 3.0 许可协议