Comment puis-je encourager le navigateur à mettre en cache l'image de l'affiche HTML5 <video>?

Question

J'ai une page web avec une série de vidéos intégrées sur la page:

<video controls preload="metadata" poster="/path/to/video1/poster-image-1.jpg"> 
<video controls preload="metadata" poster="/path/to/video2/poster-image-2.jpg"> 
<video controls preload="metadata" poster="/path/to/video3/poster-image-3.jpg"> 

Après avoir ajouté les vidéos, la charge de la page ralentissait beaucoup, donc je mis à essayer de déterminer le goulot d'étranglement.

Le réseau onglet Firefox Outils de développement révèle que chacune des images poster est de retour 206 Contenu partiel et les poster images sont toujours en cours de téléchargement à partir du serveur, jamais à partir du cache du navigateur local - et il est ce que ralentit la page de 2-3 secondes. Comment puis-je m'assurer que les images <video>poster sont récupérées à partir du cache du navigateur local à la place?

---

est la seule solution pour avoir une série d'images invisibles ailleurs sur la page, comme ceci:

.preload {width: 1px; height: 1px; opacity: 0;} 

<img class="preload" src="/path/to/video1/poster-image-1.jpg" alt="" /> 
<img class="preload" src="/path/to/video2/poster-image-2.jpg" alt="" /> 
<img class="preload" src="/path/to/video3/poster-image-3.jpg" alt="" /> 

Answer 1

Je ne pouvais pas trouver un moyen de mettre en cache l'poster attribut images, donc j'ai essayé la suppression de tous les attributs poster.

J'ai alors découvert que même en l'absence de poster, l'attribut preload="metadata" ralentissait encore significativement le temps de chargement de la page.

Ainsi, en fin de compte, je l'ai remplacé preload="metadata" avec preload="none" et a écrit un petit script pour ajouter les poster attributs dans le DOM de manière asynchrone, quelques secondes après que la page a terminé le chargement:

function asyncVideo() { 
    var videos = document.getElementsByTagName('video'); 

    for (var i = 0; i < videos.length; i++) { 
     var posterSrc = videos[i].getElementsByTagName('source')[0].getAttribute('src'); 
     posterSrc = posterSrc.replace('.mp4', '.jpg'); 
     videos[i].poster = posterSrc; 
    } 
} 

setTimeout(asyncVideo, 6000);