JavaScript中为何currentTime>=maxTime时视频无法停止？

• 核心问题：你用了progress事件监听，这个事件是视频加载媒体数据时触发的，不是播放过程中时间更新的事件，所以当视频播放到20秒时，这个事件大概率不会触发，自然不会执行暂停逻辑。
• 正确做法：改用timeupdate事件，这个事件会在视频播放时currentTime变化时定期触发，能准确捕捉时间节点。
• 额外优化：每次点击Play2都会给视频添加新的事件监听器，多次点击后会有多个监听器同时运行，可能导致异常。建议在添加新监听器前先移除旧的，或者在触发暂停后自动移除监听器。

修改后的代码：

<html>
<head>
<script>
function playVideo(str) { 
  var video = document.getElementById("myVideo");
  video.src = str;
  video.currentTime = 16;
  
  // 先移除可能存在的旧监听器，避免重复绑定
  video.removeEventListener("timeupdate", checkTime);
  
  var maxTime = 20;
  function checkTime() {
    if(video.currentTime >= maxTime){
      video.pause();
      // 暂停后移除监听器，避免后续播放干扰
      video.removeEventListener("timeupdate", checkTime);
    }
  }
  
  video.addEventListener("timeupdate", checkTime, false);
  video.play();
} 
</script>
</head>
<body>
<video id="myVideo" width="1000" height="800" controls>
  Your browser does not support the video tag.
</video>
<a onclick="playVideo('video/journey27.mp4')"> Play2 </a>
</body>
</html>

改动说明：

1. 替换事件类型：把progress换成timeupdate，确保时间变化时能触发检查逻辑。
2. 处理重复绑定：添加removeEventListener清除旧监听器，再绑定新的，避免多次点击导致多个监听器并存。
3. 清理监听器：暂停视频后立即移除监听器，防止后续手动播放时被强制暂停。
4. 优化视频属性：去掉autoplay和loop，避免页面加载后自动播放、循环播放干扰自定义逻辑。

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