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

Posted 2023-05-07

【中文标题】带有事件侦听器的 HTML5 Video readyState [重复]

【英文标题】：HTML5 Video readyState with Event Listener [duplicate]

【发布时间】：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> 

【参考方案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 上查看更多信息。