如何用Video.js实现视频片段播放，限制时长与跳转操作？

要实现仅播放视频指定片段、控制条显示片段时长且禁止跳转，不需要依赖插件，直接通过自定义事件监听和重写部分Video.js逻辑即可完成，以下是具体实现步骤：

核心思路 #

通过限制播放时间范围、重写时长计算逻辑、禁用进度条交互这三点，模拟出“仅播放片段”的效果，完全在前端实现，无需依赖Media Fragments或服务器支持。

具体实现代码 #

1. 初始化配置与参数定义 #

首先定义片段的起始、结束时间，初始化Video.js播放器：

const player = videojs('my-video');
// 替换为你需要的片段起始、结束时间（单位：秒）
const segmentStart = 100; 
const segmentEnd = 116;
const segmentDuration = segmentEnd - segmentStart;

2. 强制限制播放范围 #

监听timeupdate事件，确保播放时间始终在片段范围内，超出则自动修正：

// 加载完成后自动跳转到片段起始位置
player.on('loadedmetadata', () => {
  player.currentTime(segmentStart);
});

// 实时监控播放时间，超出范围则修正
player.on('timeupdate', () => {
  const currentTime = player.currentTime();
  if (currentTime < segmentStart) {
    player.currentTime(segmentStart);
  } else if (currentTime > segmentEnd) {
    player.pause();
    // 若需要循环播放片段，可替换为：player.currentTime(segmentStart);
  }
});

3. 修改控制条时长与时间显示 #

重写Video.js的时长方法，让控制条显示片段时长而非完整视频时长，同时将当前时间转换为片段内的相对时间：

// 重写duration方法，返回片段时长
player.duration = () => segmentDuration;

// 更新当前时间显示为片段内的相对时间
player.on('timeupdate', () => {
  const relativeTime = player.currentTime() - segmentStart;
  const timeDisplay = player.controlBar.progressControl.currentTimeDisplay;
  timeDisplay.el().textContent = videojs.formatTime(relativeTime, segmentDuration);
});

// 更新剩余时间显示
player.on('timeupdate', () => {
  const relativeTime = player.currentTime() - segmentStart;
  const remainingTime = segmentDuration - relativeTime;
  const remainingDisplay = player.controlBar.progressControl.remainingTimeDisplay;
  if (remainingDisplay) {
    remainingDisplay.el().textContent = '-' + videojs.formatTime(remainingTime, segmentDuration);
  }
});

4. 禁用进度条跳转功能 #

通过CSS或JS禁用进度条的点击、拖动交互，阻止用户跳转到片段外：

/* CSS方式：直接禁用进度条区域的交互 */
.video-js .vjs-progress-control .vjs-progress-holder {
  pointer-events: none;
}

或者用JS方式移除交互事件：

// 移除进度条点击事件
player.controlBar.progressControl.off('click');
// 禁用滑块拖动事件
player.controlBar.progressControl.seekBar.off('mousedown touchstart');

5. 拦截键盘快捷键（可选） #

如果需要阻止用户通过键盘快进/快退超出片段范围，可监听键盘事件：

player.on('keydown', (e) => {
  const currentTime = player.currentTime();
  switch(e.keyCode) {
    case 37: // 左箭头（快退）
      const backTime = currentTime - 5;
      if (backTime < segmentStart) {
        e.preventDefault();
        player.currentTime(segmentStart);
      }
      break;
    case 39: // 右箭头（快进）
      const forwardTime = currentTime + 5;
      if (forwardTime > segmentEnd) {
        e.preventDefault();
        player.currentTime(segmentEnd);
      }
      break;
  }
});

效果说明 #

完成以上配置后，播放器会：

• 加载视频后自动跳转到片段起始位置
• 播放到片段结束时自动暂停（或循环，可自行调整）
• 控制条显示片段的实际时长（比如16秒），当前时间从0开始计数
• 进度条无法点击、拖动，彻底禁止跳转到片段外
• 键盘快进/快退也会被限制在片段范围内

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