JavaScript addEventListener控制视频：跳转后无法正常播放的问题

哈哈，这个问题我之前也踩过坑！你的核心问题在于那个timeupdate事件是持续绑定在视频元素上的，而且监听函数里写死了只要时间≥5秒就暂停——不管你是重启还是跳转，只要视频播放，每次时间更新都会触发这个判断，所以哪怕你跳到10秒，一播放就会触发暂停逻辑，自然没法正常播放。

要实现“重启到5秒暂停，跳转到10秒后到15秒暂停”的需求，我们需要动态控制暂停的时间阈值，并且在合适的时候管理事件监听的添加/移除。下面是修改后的完整代码：

修改后的代码 #

JavaScript 部分 #

var video = document.getElementById("myvid");
let pauseThreshold = 5; // 初始暂停阈值：5秒

// 封装时间更新的处理逻辑
function handleTimeUpdate() {
  if (this.currentTime >= pauseThreshold) {
    this.pause();
    // 达到暂停阈值后，移除监听，避免后续手动播放时再次触发暂停
    this.removeEventListener("timeupdate", handleTimeUpdate);
  }
}

// 页面加载时添加初始监听
video.addEventListener("timeupdate", handleTimeUpdate);

function restart() {
  video.currentTime = 0;
  pauseThreshold = 5; // 重置阈值为5秒
  // 先移除旧监听，再重新添加，避免重复绑定
  video.removeEventListener("timeupdate", handleTimeUpdate);
  video.addEventListener("timeupdate", handleTimeUpdate);
  video.play(); // 自动播放，提升用户体验
}

function jump() {
  video.currentTime = 10;
  pauseThreshold = 15; // 设置新的暂停阈值：15秒
  // 同样更新监听，确保使用最新的阈值逻辑
  video.removeEventListener("timeupdate", handleTimeUpdate);
  video.addEventListener("timeupdate", handleTimeUpdate);
  video.play();
}

HTML 部分（无需修改，保持原样即可） #

<video id="myvid" width="320" height="240" controls>
 <source src="video.mp4" type="video/mp4">
</video>
<button onclick="restart()">restart</button>
<button onclick="jump()">jump</button>

关键调整点解释 #

1. 动态暂停阈值
   我们新增了pauseThreshold变量来存储当前需要暂停的时间点：

   • 点击restart时，将阈值设为5秒
   • 点击jump时，将阈值设为15秒
     这样监听函数就会根据当前的阈值判断是否需要暂停，而不是一直盯着5秒不放。

2. 管理事件监听
   在每次调用restart()或jump()时，我们先移除旧的timeupdate监听，再重新添加新的监听——这是为了避免重复绑定多个监听函数，导致逻辑混乱。另外，当达到暂停阈值后，我们主动移除监听，这样用户手动继续播放时，就不会再被强制暂停了。

3. 修复原代码的小错误
   你原来的jump()函数里有个笔误：video.pause少了括号，应该是video.pause()，而且那个判断逻辑是在设置currentTime后立刻执行，此时时间刚设为10秒，肯定小于15秒，所以完全不会触发，我们直接去掉了这段无效代码。

可选的简化版本（无需频繁移除监听） #

如果你希望每次播放都能触发对应阈值的暂停（比如暂停后手动播放，还是会走到阈值暂停），可以不用频繁移除监听，只需要维护阈值变量即可：

var video = document.getElementById("myvid");
let pauseThreshold = 5;

function handleTimeUpdate() {
  if (this.currentTime >= pauseThreshold) {
    this.pause();
    // 如果不需要每次播放都暂停，就保留上面的removeEventListener；如果需要，就注释掉
    // this.removeEventListener("timeupdate", handleTimeUpdate);
  }
}

video.addEventListener("timeupdate", handleTimeUpdate);

function restart() {
  video.currentTime = 0;
  pauseThreshold = 5;
  video.play();
}

function jump() {
  video.currentTime = 10;
  pauseThreshold = 15;
  video.play();
}

这个版本更简洁，适合需要重复触发暂停逻辑的场景。

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