优化网页上的视频加载

Question

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

我正在为我的单页应用程序使用整页 js。它具有延迟加载的未来，我正在使用它来加载我的视频内容。就像我之前说的，每个视频都是 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>

仅此而已。当用户到达视口时，视频将被加载。你可以走得更远，通过加载动画或其他东西。