如何在多视频页面中禁止视频进度跳转（Seeking）

要实现动态加载的多视频禁止进度跳转，且不依赖jQuery，可以通过原生JS事件监听+CSS辅助隐藏交互元素的方式实现，核心思路是记录视频正常播放的合法时间点，当用户尝试跳转时重置到合法时间。

实现步骤 #

1. 标记目标视频 #

给所有需要禁止跳转的视频元素添加统一类名，比如no-seek-video：

<video class="no-seek-video" src="video1.mp4" controls></video>
<video class="no-seek-video" src="video2.mp4" controls></video>
<!-- 动态添加的视频也只需添加该类名 -->

2. 原生JS逻辑实现跳转拦截 #

编写初始化函数，为每个目标视频绑定事件，维护合法播放时间：

function initNoSeekVideos() {
  // 筛选未初始化过的目标视频，避免重复绑定事件
  const targetVideos = document.querySelectorAll('.no-seek-video:not([data-no-seek-initialized])');
  
  targetVideos.forEach(video => {
    // 标记已初始化
    video.dataset.noSeekInitialized = 'true';
    // 初始化合法时间为当前播放位置
    video.dataset.lastValidTime = video.currentTime.toString();

    // 正常播放时更新合法时间
    video.addEventListener('timeupdate', () => {
      video.dataset.lastValidTime = video.currentTime.toString();
    });

    // 拦截跳转操作
    video.addEventListener('seeking', () => {
      const lastValidTime = parseFloat(video.dataset.lastValidTime);
      // 用微小阈值过滤正常播放的时间波动，避免误拦截
      if (Math.abs(video.currentTime - lastValidTime) > 0.1) {
        video.currentTime = lastValidTime;
      }
    });
  });
}

// 页面初始加载完成后执行初始化
document.addEventListener('DOMContentLoaded', initNoSeekVideos);

3. 动态视频的处理 #

如果视频是用户操作后动态添加到DOM的，只需在视频插入完成后调用initNoSeekVideos()即可，函数会自动识别新添加的未初始化视频。

4. CSS辅助隐藏进度条（可选） #

为了从视觉上阻止用户尝试点击进度条，可添加CSS隐藏视频控件的时间线：

/* 隐藏WebKit内核浏览器的进度条 */
.no-seek-video::-webkit-media-controls-timeline {
  display: none !important;
}
/* 火狐浏览器 */
.no-seek-video::-moz-media-controls-timeline {
  display: none !important;
}
/* IE/Edge浏览器 */
.no-seek-video::-ms-media-controls-timeline {
  display: none !important;
}

原理说明 #

• timeupdate事件：视频正常播放时会持续触发，用来记录用户“合法”到达的播放位置。
• seeking事件：当用户尝试拖动进度条或通过代码修改currentTime时触发，此时对比当前时间和合法时间，若差值超过阈值则强制重置到合法位置。
• 自定义属性data-last-valid-time和data-no-seek-initialized：分别用来存储合法时间和标记是否已初始化，避免重复绑定事件。

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