how to prevent same video loading twice if its just the same video a 2nd time

Question

Here you can see the same video is loading twice. Its an autoplaying video, that I just want to use a 2nd time at the bottom of the page (first is top of page). How to prevent the browser to download it a 2nd time? https://tools.pingdom.com/#!/cQ1xMb/https://bm-translations.de/km.php Question is regarding this page: https://bm-translations.de/km#kontakt (scroll a bit down to "zufriedene Kunden"

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

Answer 1

The video file is not found in the cache, so the browser starts to download it. This happens again for the second video. As you can see the first video is not loaded before the second starts to load, so it is not found in the cache and will be downloaded again.

The solution is to delay the loading of the second video. This can be achieved with lazyloading. As you use JQuery here is a library for lazyloading elements.

Answer 2

It looks to me like the browser might attempt to reuse the same resource, if it weren't for some of the response headers for your video preventing it. Here are some of the response headers I get back from 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

The etag is good, since that means the server knows it's static content and this can aid with HEAD requests from clients. However, the expires header is set to yesterday, which effectively means it will expire immediately. As a result, the browser must request it again when it encounters the second video tag. See if you can configure your Apache server to serve it differently. It is generally recommended that you serve static content with an expiration of about a week.

PS. In this particular case, you could actually serve the marquee of company images by using a large image or a series of small images, then animating a carousel container using some simple JavaScript. For example, a div with a background image and a CSS animation to continuously scroll the background image offset from left to right. It'll also loop nicely if background-repeat is on.