javascript - 停止在手机后台加载视频

我有一个我只想在桌面上播放的视频标题，在移动设备上有一个静态图像标题。我可以在移动设备上隐藏视频，看起来效果很好，但视频仍在后台加载并减慢了页面加载速度。如何完全阻止视频在移动设备上加载。

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

最佳答案

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

在视频元素上包含 data-src 属性而不是 src。如果我们不需要，则无需加载 src。

如果视频可见，复制data-src到src

现在在 .load() 元素上调用 video 以获取新值。

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

关于javascript - 停止在手机后台加载视频，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/43984623/