10

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>

enter image description here

BoffinBrain
  • 6,337
  • 6
  • 33
  • 59
Krystian
  • 887
  • 5
  • 21
  • 52

3 Answers3

6

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.

androbin
  • 1,622
  • 14
  • 31
  • I have integrated lazyload already and tried to lazyload like this ``, but its not changing the `data-original` to `src`. But its working for all images. Whats wrong? You can see here its not loading Question is regarding this page: https://bm-translations.de/km#kontakt (scroll a bit down to "zufriedene Kunden" – Krystian Apr 15 '18 at 08:12
  • You need to use `data-src` instead of `data-original`. – androbin Apr 15 '18 at 17:24
  • This comment is also referencing the correct library, not the one from Tuupola. Another reference here https://github.com/tuupola/jquery_lazyload/issues/214 – efru Apr 15 '18 at 19:16
4

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.

BoffinBrain
  • 6,337
  • 6
  • 33
  • 59
-1

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"'>

efru
  • 1,401
  • 3
  • 17
  • 20
  • thats not very good for performance to use another library AND addon. Thats not a good solution. – Krystian Apr 15 '18 at 11:31
  • You're using the wrong library. You need to use the one referenced and not the one from Tuupola. The referenced library has a video addon to accommodate your request, but whatever. – efru Apr 15 '18 at 19:12