使用JavaScript无法操控视频时间？点击按钮跳转至59秒失效

核心故障点 #

• 逻辑冲突：绑定在video元素上的timeupdate回调没有触发标记，只要视频当前播放时长大于5秒，就会强制暂停视频、弹出初始交互弹窗。当你执行跳转把视频切到59秒时，立刻触发的timeupdate事件会命中该判断分支，直接覆盖你写的跳转后播放逻辑
• 时序错误：原代码在setTimeout内部连续执行v.play() → 立即v.pause() → 设置currentTime=59 → 再次v.play()，浏览器的视频seek是异步加载流程，中途插入的pause动作会直接打断跳转执行
• 状态缺失：没有校验视频的加载状态就直接修改currentTime，如果视频还没完成元数据加载（无法识别总时长），浏览器会直接忽略该跳转指令

修正实现 #

替换原有脚本逻辑即可正常实现功能：

// 增加交互触发标记，避免跳转后重复弹出初始弹窗
let isInteracted = false;
function onstart(){
  const v = document.getElementById('video');
  v.addEventListener('timeupdate', function(){
    // 仅在首次到达5秒节点时触发交互弹窗
    if(!isInteracted && v.currentTime > 5) {
      isInteracted = true;
      v.pause();
      document.getElementById("one").style.display = "block";
      
      setTimeout(() => {
        document.getElementById("one").style.display = "none";
        document.getElementById("two").style.display = "block";
      }, 3000);
    }
  }, false);
}

function skip() {
  const v = document.getElementById('video');
  document.getElementById("two").style.display = "none";
  document.getElementById("three").style.display = "block";
  setTimeout(() => {
    document.getElementById("three").style.display = "none";
    // 校验视频加载状态，确保可以正常seek
    if (v.readyState >= 1) {
      v.currentTime = 59;
    }
    // 跳转完成后直接恢复播放
    v.play();
  }, 3000);
}

调试注意点 #

• 如果修改后还是存在跳转不生效的情况，可以监听视频的seeked事件确认跳转执行完成，避免因为缓冲不足导致的跳转中断
• 不要在跳转操作的前后插入无意义的play/pause调用，这类操作会打断浏览器的视频加载流程

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