Ici, vous pouvez voir la même vidéo se charger deux fois. C'est une vidéo à lecture automatique, que je veux juste utiliser une deuxième fois en bas de la page (la première est en haut de la page). Comment empêcher le navigateur de le télécharger une deuxième fois? https://tools.pingdom.com/ #! / cQ1xMb / https: //bm-translations.de/km.php La question concerne cette page: https://bm-translations.de/km#kontakt (faites défiler un peu vers "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

10
Krystian Manthey 12 avril 2018 à 19:34

3 réponses

Meilleure réponse

Il me semble que le navigateur pourrait tenter de réutiliser la même ressource, si ce n'était pour certains des en-têtes de réponse de votre vidéo qui l'empêchaient. Voici quelques-uns des en-têtes de réponse que je reçois de 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

L'étag est bon, car cela signifie que le serveur sait que c'est du contenu statique et cela peut aider avec les requêtes HEAD des clients. Cependant, l'en-tête expires est défini sur hier, ce qui signifie qu'il expirera immédiatement. Par conséquent, le navigateur doit le demander à nouveau lorsqu'il rencontre le deuxième tag vidéo. Voyez si vous pouvez configurer votre serveur Apache pour le servir différemment. Il est généralement recommandé de diffuser du contenu statique avec une expiration d'environ une semaine.

PS. Dans ce cas particulier, vous pouvez en fait servir le chapiteau d'images d'entreprise en utilisant une grande image ou une série de petites images, puis en animant un conteneur de carrousel en utilisant du JavaScript simple. Par exemple, un div avec une image d'arrière-plan et une animation CSS pour faire défiler l'image d'arrière-plan en continu de gauche à droite. Il fonctionnera également bien si la répétition en arrière-plan est activée.

4
BoffinBrain 18 avril 2018 à 18:09

Vous devez intégrer le chargement Lazy pour la vidéo. Il semble que vous utilisiez une bibliothèque qui ne prend pas en charge la vidéo, donc elle échoue. La bibliothèque correcte est ici.

Assurez-vous que vous chargez également l'addon supplémentaire:

<script src="jquery.lazyloadxt.extra.js"></script>

Ensuite, il suffit de supprimer la balise data-src sur la source:

<source data-src="/path/to/video.ogv" type='video/ogg; codecs="theora, vorbis"'>

-1
efru 15 avril 2018 à 09:22

Le fichier vidéo est introuvable dans le cache, donc le navigateur commence à le télécharger. Cela se produit à nouveau pour la deuxième vidéo. Comme vous pouvez le voir, la première vidéo n'est pas chargée avant que la seconde ne commence à se charger, elle n'est donc pas trouvée dans le cache et sera à nouveau téléchargée.

La solution est de retarder le chargement de la deuxième vidéo. Ceci peut être réalisé avec le lazyloading. Lorsque vous utilisez JQuery voici une bibliothèque pour les éléments lazyloading.

5
androbin 15 avril 2018 à 08:04