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

Question

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

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

Answer 1

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

解决方案是延迟加载第二个视频.这可以通过延迟加载来实现.当你使用JQuery时,这里是一个用于延迟加载元素的库.

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标头设置为昨天，这实际上意味着它将立即过期。结果，浏览器遇到第二个video标签时必须再次请求。看看是否可以配置 Apache 服务器以提供不同的服务。通常建议您提供有效期为一周左右的静态内容。

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