为视频设置延迟加载

发布时间:2020-11-16 10:55:25 阅读:6
与图像元素一样,你也可以延迟加载视频。视频通常会加载 <video> 元素(尽管出现了一种实现方式有限的替代方法 )。但是,如何延迟加载 <video> 取决于用例。让我们讨论一些需要不同解决方案的场景。

禁止视频自动播放

对于由用户启动播放的视频(即不 自动播放的视频),可能需要在 <video> 元素上指定 preload 属性:

<video controls preload="none" poster="one-does-not-simply-placeholder.jpg">
  <source src="one-does-not-simply.webm" type="video/webm">
  <source src="one-does-not-simply.mp4" type="video/mp4">
</video> 

上面的示例使用preload值为的属性none来防止浏览器预加载任何视频数据。该poster 属性为<video>元素提供一个占位符,该占位符将在视频加载时占用空间。这样做的原因是,加载视频的默认行为可能因浏览器而异:

  • 在 Chrome 中,默认preload值为auto,但从 Chrome 64 开始,现在默认为metadata。即便如此,在桌面版 Chrome 上,也可以使用Content-Range标题预加载一部分视频。Firefox,Edge 和 Internet Explorer 11 的行为类似。
  • 与台式机上的 Chrome 一样,Safari 的 11.0 台式机版本将预加载一系列视频。从版本 11.2 开始,仅视频元数据被预加载。在 iOS 上的 Safari 中,不会预加载视频。
  • 当数据保护模式被激活,preload 默认为 none

因为关于浏览器的默认行为preload不是一成不变的,所以明确是你最好的选择。在这种情况下,当用户启动播放时,使用preload="none"是在所有平台上推迟视频加载的最简单方法。该preload属性不是推迟加载视频内容的唯一方法。

通过视频预加载进行快速播放可能会给你一些思路和见解,以帮助你使用 JavaScript 进行视频播放。

不幸的是,当你要使用视频代替 GIF 动画时,它没有用,这将在后面介绍。

用 GIF 动画代替视频

尽管动画 GIF 广泛使用,但它们在许多方面均不如视频等效,尤其是在文件大小方面。动画 GIF 可以扩展到几兆字节的数据范围。具有类似视觉质量的视频往往要小得多。

使用<video>元素代替动画 GIF 并不像<img>元素那样简单。动画 GIF 具有三个特征:

  1. 它们在加载时会自动播放。
  2. 它们不断循环。
  3. 他们没有音轨。

使用<video>元素实现此目标看起来像这样:

<video autoplay muted loop playsinline>
  <source src="one-does-not-simply.webm" type="video/webm">
  <source src="one-does-not-simply.mp4" type="video/mp4">
</video> 

但是如何进行延迟加载呢?Chrome 会为你延迟加载视频,但你不能指望所有浏览器都能提供这种优化的行为。根据你的听众和应用程序要求,你可能需要自己处理问题。首先,相应地修改你的 <video> 标记:

<video autoplay muted loop playsinline width="610" height="254" poster="one-does-not-simply.jpg">
  <source data-src="one-does-not-simply.webm" type="video/webm">
  <source data-src="one-does-not-simply.mp4" type="video/mp4">
</video> 

你会注意到添加了 poster 属性,该属性使你可以指定占位符以占据 <video> 元素的空间,直到视频被延迟加载为止。与 <img> 延迟加载示例一样,将视频 URL 存储 data-src 在每个 <source> 元素的属性中。从那里开始,使用 JavaScript 代码类似于基于 Intersection Observer 的图像延迟加载示例:

document.addEventListener("DOMContentLoaded", function() {
  var lazyVideos = [].slice.call(document.querySelectorAll("video.lazy"));

  if ("IntersectionObserver" in window) {
    var lazyVideoObserver = new IntersectionObserver(function(entries, observer) {
      entries.forEach(function(video) {
        if (video.isIntersecting) {
          for (var source in video.target.children) {
            var videoSource = video.target.children[source];
            if (typeof videoSource.tagName === "string" && videoSource.tagName === "SOURCE") {
              videoSource.src = videoSource.dataset.src;
            }
          }

          video.target.load();
          video.target.classList.remove("lazy");
          lazyVideoObserver.unobserve(video.target);
        }
      });
    });

    lazyVideos.forEach(function(lazyVideo) {
      lazyVideoObserver.observe(lazyVideo);
    });
  }
}); 

延迟加载<video>元素时,需要遍历所有子 <source>元素并将其data-src属性翻转为src属性。完成此操作后,你需要通过调用元素的load方法来触发视频的加载,然后媒体将根据该autoplay属性自动开始播放。

使用此方法,你可以得到一个模拟动画 GIF 行为的视频解决方案,但是不会像动画 GIF 那样产生大量的数据使用量,因此你可以延迟加载该内容。

延迟加载库

以下库可以帮助你延迟加载视频:

  • lozad.js 是仅使用 “IntersectionObserver” 的超轻量级选项。因此,它具有很高的性能,但需要先进行填充,然后才能在较旧的浏览器上使用它。
  • yall.js 是一个使用 Intersection Observer 并回退到事件处理程序的库。与 IE11 和主要浏览器兼容。
  • 如果你需要特定于 React 的延迟加载库,可以考虑 react-lazyload。尽管它不使用 Intersection Observer,但确实为习惯于使用 React 开发应用程序的用户提供了一种熟悉的延迟加载图像的方法。

这些延迟加载库中的每一个都有充分的文档记录,并为你的各种延迟加载工作提供了大量标记模式。


我们在微信上24小时期待你的声音
解答:网站优化,网站建设,搜索引擎优化,APP 开发,小程序开发

非常感谢您有耐心的读完这篇文章:"为视频设置延迟加载",此文章仅为提供更多信息供用户参考使用或为学习交流的方便。如果对您有帮助,请收藏我们的网址:https://www.91webs.cn


18617670560