Video.js如何使用handleSeeked()记录视频seek起止时间

核心误区说明 #

不要直接调用或重写内置的handleSeeked()方法：该方法是Video.js播放器内部的私有处理逻辑，未对业务层开放调用入口，直接手动调用、或重写原型上的该方法，不仅无法拿到准确的时间参数，还可能打乱播放器内部状态，且版本升级后极易失效。

稳定实现方案 #

通过Video.js官方对外暴露的标准事件绑定即可实现需求，兼容7.x、8.x全量稳定版本，同时可以过滤掉播放器自动触发的非用户操作类seek（切源、缓冲跳帧、清晰度切换等场景触发的自动跳转）：

• 绑定事件必须在播放器ready回调中执行，避免因组件未初始化完成导致事件监听失效
• 监听用户主动交互行为（进度条拖拽、键盘快进快退）打标记，区分用户操作和播放器自动跳转
• 监听seeking事件，在用户发起seek但未完成跳转时记录起始时间
• 监听seeked事件，在跳转完成后记录结束时间，完成日志上报后重置标记

实现代码 #

// 初始化播放器实例
const player = videojs('your-video-element-id', {
  // 此处填写你原有播放器配置
});

// 存储seek起始时间、用户操作标记
let seekStartTime = null;
let isUserActiveSeek = false;

player.ready(function() {
  const controlBar = player.getChild('controlBar');
  const progressControl = controlBar.getChild('progressControl');

  // 标记：用户鼠标/触摸拖动进度条为主动操作
  progressControl.on('mousedown touchstart', () => {
    isUserActiveSeek = true;
  });

  // 标记：用户按左右方向键快进快退为主动操作
  player.on('keydown', (e) => {
    if ([37, 39].includes(e.keyCode)) {
      isUserActiveSeek = true;
    }
  });

  // 发起seek时记录起始时间
  player.on('seeking', () => {
    if (isUserActiveSeek) {
      seekStartTime = player.currentTime();
    }
  });

  // seek完成时获取结束时间，上报日志
  player.on('seeked', () => {
    if (isUserActiveSeek && seekStartTime !== null) {
      const seekEndTime = player.currentTime();
      
      // 此处替换为你自己的日志上报逻辑
      console.log('用户seek操作记录', {
        start: seekStartTime,
        end: seekEndTime,
        videoTotalDuration: player.duration()
      });

      // 重置标记和缓存值
      isUserActiveSeek = false;
      seekStartTime = null;
    }
  });
});

注意：如果你的业务场景允许用户通过自定义按钮触发快进快退，只需要在对应按钮的点击回调里把isUserActiveSeek设为true，即可被正常统计。

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