javascript - 带有事件监听器的 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 属性指定在视频下载时或用户点击播放按钮之前要显示的图像。如果不包含此属性，则将使用视频的第一帧。”

在海报属性文档中查看更多信息。