HTML5 Video readyState mit Event Listener

Question

Versuchen, ein 'Laden' div anzuzeigen, bis mein MP4 Pufferung abgeschlossen ist. Scheint so, als würde es den Trick machen, aber kein Gobo-Laden bleibt auch nach dem Puffern erhalten! Irgendwelche Vorschläge?

<video id="homeVideo" style="width: 100%; overflow: hidden;" autoplay> 
<source src="/media/micro_home.mp4" type="video/mp4"> 
</video> 

<style>#slider_loading {display: visible;} 
<div id="slider_loading" class="slider_loading"></div> 

<script type="text/javascript"> 
var video = document.getElementById("homeVideo"); 

if (video.readyState === 4) { 
    document.getElementById('homeVideo')style.display = "none"; 
} 
</script> 

Answer 1

Sie können das poster Attribut diese heraus arbeiten, das Beispiel sehen:

<video controls poster="/images/w3html5.gif"> 
    <source src="movie.mp4" type="video/mp4"> 
    <source src="movie.ogg" type="video/ogg"> 
    Your browser does not support the video tag. 
</video> 

„Das Plakat Attribut ein Bild angibt gezeigt werden, während das Video Herunterladen ist, oder bis Der Benutzer tippt auf die Play-Schaltfläche. Wenn dies nicht ist, wird stattdessen das erste Bild des Videos verwendet. "

Weitere Informationen finden Sie unter poster attribute docs.