jquery - 优化网页视频加载

Question

我有一个单页应用程序，其中每个部分包含多个视频标签。窗口的高度是截面的高度。每个标签都有不同的MP4格式的视频。我想快速加载这些视频而不影响页面加载时间，所以我尝试使用 jquery 通过延迟加载来加载。但问题是视频文件大小为 5MB，加载需要时间。是否有任何其他可能的方式在页面加载时加载我的第一部分视频并在页面加载完成后休息或作为后台进程而不向用户显示。

我正在为我的单页应用程序使用全页 js。它具有延迟加载的 future ，我正在使用它来加载我的视频内容。正如我之前所说，每个视频的文件大小为 5Mb。这是我的单页应用程序中使用的代码。

<video>
  <source data-src="video.mp4" type="video/mp4" />
</video>

Answer 1

我通过每个元素的延迟加载来完成此类任务。为此，您可以使用 jQuery.Lazy和 AV plugin ，来处理此类标签。这很容易实现。

而不是原来的 video 标签:

<video>
  <source data-src="video.mp4" type="video/mp4" />
</video>

您将其更改为:

<video data-src="video.mp4|video/mp4"></video>

或者另一种写法:

<video>
  <data-src src="video.mp4" type="video/mp4"></data-src>
</video>

然后将两个脚本文件添加到您的文档中:

<script type="text/javascript" src="//cdn.jsdelivr.net/jquery.lazy/1.7.5/jquery.lazy.min.js"></script>
<script type="text/javascript" src="//cdn.jsdelivr.net/jquery.lazy/1.7.5/plugins/jquery.lazy.av.min.js"></script>

然后在您的页面中初始化插件:

<script type="text/javascript">
jQuery(function($) {
    $("video").lazy();
});
</script>

仅此而已。当用户到达视口(viewport)时将加载视频。您可以通过播放加载动画或其他内容来更进一步。