javascript - how to prevent same video loading twice if its just the same video a 2nd time - Stack Overflow

admin管理员组

文章数量:1279057

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? !/cQ1xMb/.php Question is regarding this page: (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>

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./#!/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>

• javascript
• jquery
• video

Share Improve this question Follow edited Apr 19, 2018 at 11:20 BoffinBrain 6,53566 gold badges3535 silver badges5959 bronze badges asked Apr 12, 2018 at 16:34 KrystianKrystian 98755 gold badges2323 silver badges5353 bronze badges

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 7

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.

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 remended that you serve static content with an expiration of about a week.

PS. In this particular case, you could actually serve the marquee of pany 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.

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

本文标签： javascripthow to prevent same video loading twice if its just the same video a 2nd timeStack Overflow