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> 
3 Answers
Answers 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.
Answers 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.
Answers 3
You need to incorporate Lazy loading for the video. It appears you're using a library that doesn't support video thus it's failing. The correct library is here.
Ensure that you're loading the extra addon as well :
<script src="jquery.lazyloadxt.extra.js"></script>
Then it's just a matter of dropping the data-src tag on the source :
<source data-src="/path/to/video.ogv" type='video/ogg; codecs="theora, vorbis"'>
0 comments:
Post a Comment