如果第二次只是相同的视频，如何防止相同的视频加载两次

Question

在这里你可以看到同一个视频正在加载两次。它是一个自动播放视频，我只想在页面底部第二次使用（首先是页面顶部）。如何防止浏览器第二次下载？ https://tools.pingdom.com/#!/cQ1xMb/https://bm-translations.de/km.php 问题与此页面有关：https://bm-translations.de/km#kontakt（向下滚动到“zufriedene Kunden”

<video autoplay="autoplay" loop="loop" class="imgWindowwidth center"><source src="./bilder/krystian-manthey-referenzen.mp4" type="video/mp4"/></video>

Answer 1

在缓存中找不到视频文件，因此浏览器开始下载它。第二个视频再次发生这种情况。如您所见，第一个视频在第二个视频开始加载之前未加载，因此在缓存中找不到它并将再次下载。

解决方案是延迟加载第二个视频。这可以通过延迟加载来实现。当您使用JQuery here is a library进行延迟加载元素时。

Answer 2

我认为浏览器可能会尝试重复使用相同的资源，如果它不适用于您的视频的某些响应标头阻止它。以下是我从https://bm-translations.de/bilder/krystian-manthey-referenzen.mp4 ...

返回的一些响应标头

cache-control: max-age=7776000
date: Wed, 18 Apr 2018 13:44:33 GMT
etag: "33483-569a8b68399fa"
expires: Tue, 17 Jul 2018 13:44:33 GMT
server: Apache/2.4.29

etag很好，因为这意味着服务器知道它的静态内容，这可以帮助客户端的HEAD请求。但是，expires标头设置为昨天，这实际上意味着它将立即过期。因此，浏览器在遇到第二个视频标记时必须再次请求它。了解您是否可以将Apache服务器配置为以不同方式提供服务。通常建议您提供大约一周到期的静态内容。

PS。在这种特殊情况下，您实际上可以通过使用大图像或一系列小图像来提供公司图像的选取框，然后使用一些简单的JavaScript为旋转木马容器设置动画。例如，带有背景图像和CSS动画的div可以从左到右连续滚动背景图像。如果启用了背景重复，它也会很好地循环。

Answer 3

您需要为视频添加延迟加载。您似乎正在使用不支持视频的库，因此它失败了。正确的库是here。

确保您还要加载额外的插件：

<script src="jquery.lazyloadxt.extra.js"></script>

然后，只需在源上删除data-src标记：

<source data-src="/path/to/video.ogv" type='video/ogg; codecs="theora, vorbis"'>