HTML5视频播放5秒后显示按钮的实现问题求助

嘿，我来帮你排查下问题～你现在的代码没生效的原因很简单：你的if(vid1.currentTime==5)语句只在脚本刚执行的时候跑了一次，这时候视频才刚开始播放，currentTime肯定还没到5秒，之后就再也不会检查这个条件了，所以按钮一直不会显示。

给你两种靠谱的解决方法，你可以根据需求选：

方法一：用视频的timeupdate事件（推荐，更精准） #

这个事件会在视频播放进度变化时自动触发，我们可以在事件回调里检查播放时间，达到5秒就显示按钮，而且显示后就移除监听，避免不必要的触发：

<video width="320" height="240" id="MyVid1" controls >
  <source src="vid/1.mp4" type="video/mp4">
</video>

<button id='btn' >tryit</button>

<script>
var vid1 = document.getElementById("MyVid1");
var btn = document.getElementById("btn");

btn.style.display = "none";

// 监听播放进度变化事件
vid1.addEventListener('timeupdate', function() {
  // 用>=5而不是==5，因为timeupdate不一定刚好卡在5秒整触发
  if (vid1.currentTime >= 5) {
    btn.style.display = "block";
    // 显示后就移除这个监听，不用再每次触发都检查
    vid1.removeEventListener('timeupdate', this);
  }
});
</script>

为啥用>=5呢？因为浏览器的timeupdate事件触发间隔不是固定的，可能会跳过刚好5秒的那个瞬间，用大于等于能保证不会错过显示时机。

方法二：用setTimeout定时器（简单直接，但有局限性） #

如果你的视频不会出现中途暂停、缓冲卡顿的情况，也可以用定时器，5秒后直接显示按钮：

<video width="320" height="240" id="MyVid1" controls >
  <source src="vid/1.mp4" type="video/mp4">
</video>

<button id='btn' >tryit</button>

<script>
var vid1 = document.getElementById("MyVid1");
var btn = document.getElementById("btn");

btn.style.display = "none";

// 监听视频播放事件，确保视频真正开始播放后再启动定时器
vid1.addEventListener('play', function() {
  setTimeout(function() {
    btn.style.display = "block";
  }, 5000);
});
</script>

不过这个方法有个小问题：如果视频中途暂停或者缓冲加载，定时器还是会到点触发，这时候用户可能还没看完5秒的内容，所以如果追求精准的话，还是第一种方法更合适～

原来的代码核心问题就是只执行了一次时间检查，没有持续跟踪播放进度，改成上面两种方法就能解决啦！

备注：内容来源于stack exchange，提问作者kavakeb