Wie kann ich den Browser ermutigen, das HTML5 <video> Posterbild zwischenzuspeichern?

Question

Ich habe eine Webseite mit einer Reihe von Videos auf der Seite eingebettet:

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

Nachdem ich die Videos hinzugefügt, die Seite zu laden verlangsamte ziemlich viel, so dass ich zu versuchen, den Engpass zu ermitteln.

Die Netzwerk Registerkarte auf Firefox Developer Tools zeigt, dass jeder der poster Bilder zurückkehrt 206 Partial Content und die poster Bilder werden immer vom Server heruntergeladen werden, nie aus dem lokalen Browser-Cache - und es ist das, dass verlangsamt die Seite um 2-3 Sekunden. Wie kann ich sicherstellen, dass die Bilder aus dem lokalen Browser-Cache abgerufen werden?

---

Ist die einzige Lösung, die eine Reihe von unsichtbaren Bilder an anderer Stelle auf der Seite, wie diese haben:

.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

ich keine Möglichkeit, die poster Attribut Bilder finden konnten, zwischenzuspeichern, so dass ich versuchte, Entfernen aller poster Attribute.

Ich entdeckte dann, dass auch in Abwesenheit von poster, das preload="metadata" Attribut noch erheblich die Ladezeit der Seite verlangsamte.

So letztlich ich preload="metadata" mit preload="none" und schrieb ein kurzes Skript die poster Attribute in das DOM asynchron, einige Sekunden, nachdem die Seite fertig war Laden hinzufügen ersetzt:

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);