Question

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

我正在为我的单页应用程序使用fullpage 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>

多数民众赞成。当用户到达视口时，将加载视频。你可以通过加载动画或其他东西来进一步。

优化网页上的视频加载

1 个答案: