HTML5视频readyState与事件监听器

Question

试图显示'加载'div，直到我的MP4完成缓冲。似乎它应该做的伎俩，但即使完成缓冲，也不会停止加载！有什么建议么？

<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

可以使用poster属性来工作了这一点，看看这个例子：

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

“的海报属性指定的图像进行显示，而视频是 下载，或至用户点击播放按钮，如果不包含 ，则将使用视频的第一帧。“

查看更多的poster attribute docs。