视频播放器交互式按钮问题：每20秒验证后无法正常续播

问题原因 #

你的代码里timeupdate事件会持续监听视频播放进度，当点击按钮播放后，视频的currentTime仍然大于等于20秒，所以timeupdate会立刻再次触发，执行video.pause()，导致视频刚播放就暂停。

修复后的代码 #

<body>
  <div class="video-container">
    <video id="myVideo" controls>
      <source src="video.mp4" type="video/mp4">
    </video>
    <button class="interactive-button" data-time="20" data-verified="false">你在认真听吗？</button>
  </div>

  <script>
    document.addEventListener("DOMContentLoaded", function () {
      const video = document.getElementById("myVideo");
      const buttons = document.querySelectorAll(".interactive-button");

      buttons.forEach((button) => {
        const time = parseInt(button.dataset.time);
        button.addEventListener("click", function () {
          if (video.currentTime >= time && button.dataset.verified === "false") {
            button.dataset.verified = "true";
            button.style.display = "none";
            video.play(); 
          }
        });
      });

      video.addEventListener("timeupdate", function () {
        const currentTime = video.currentTime;
        buttons.forEach((button) => {
          const time = parseInt(button.dataset.time);
          const isVerified = button.dataset.verified === "true";
          
          // 只有未验证且到达时间点时，才显示按钮并暂停
          if (currentTime >= time && !isVerified) {
            button.style.display = "block";
            video.pause();
          } else if (currentTime < time) {
            // 如果进度退回时间点之前，重置验证状态
            button.dataset.verified = "false";
            button.style.display = "none";
          }
        });
      });
    });
  </script>
</body>

关键修改说明 #

• 给按钮添加data-verified属性标记验证状态，初始为false
• 点击按钮时，将data-verified设为true，隐藏按钮并播放视频
• timeupdate事件中，只在未验证且到达时间点时才暂停视频
• 增加进度退回时的状态重置逻辑，避免用户拖拽进度条后无法再次触发验证

内容的提问来源于stack exchange，提问作者Qbasix