带有事件侦听器的 HTML5 Video readyState [重复]答案

【问题标题】：HTML5 Video readyState with Event Listener [duplicate]带有事件侦听器的 HTML5 Video readyState [重复]
【发布时间】：2016-08-11 22:56:46
【问题描述】：

在我的 MP4 完成缓冲之前，尝试显示一个“正在加载”的 div。似乎它应该可以解决问题，但是即使完成缓冲也不会继续加载！有什么建议吗？

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

【问题讨论】：

标签： javascript html5-video readystate

【解决方案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 属性指定在视频播放时要显示的图像下载，或者直到用户点击播放按钮。如果这不是包括在内，将使用视频的第一帧。”

在poster attribute docs 上查看更多信息。

【讨论】：