Chrome扩展无法在video.js视频上操作表单及跳转时间戳

一、修复表单交互问题 #

video.js的播放器容器会拦截鼠标、焦点类事件，导致扩展表单无法正常获取焦点和响应输入。可以通过以下两步解决：

1. 给表单设置足够高的层级，确保能覆盖在播放器上方：

#timestamp-form {
  position: absolute;
  z-index: 99999;
  /* 其他定位样式根据需求调整 */
}

2. 阻止表单及输入框的事件冒泡，避免被video.js捕获：

const form = document.getElementById('timestamp-form');
const input = form.querySelector('input');

// 阻止鼠标事件冒泡，让表单能被点击聚焦
form.addEventListener('mousedown', e => e.stopPropagation());
// 阻止焦点事件冒泡，确保输入框能获取焦点
input.addEventListener('focusin', e => e.stopPropagation());
// 阻止键盘事件冒泡，保证输入内容正常
input.addEventListener('keydown', e => e.stopPropagation());

二、正确获取video.js播放器实例 #

不要重新实例化播放器（避免破坏原有视频），可以通过两种方式获取已存在的实例：

方法1：通过原生video元素的关联属性获取 #

多数video.js实例会直接挂载到对应的<video>元素的player属性上：

function getVJSPlayer() {
  const videoEl = document.querySelector('video');
  if (videoEl && videoEl.player) {
    return videoEl.player;
  }
  return null;
}

方法2：遍历全局players对象匹配元素 #

如果页面的video.js是全局挂载的，window.videojs.players会存储所有播放器实例，通过DOM元素匹配找到对应实例：

function getVJSPlayer() {
  if (!window.videojs || !window.videojs.players) return null;
  
  const playerContainer = document.querySelector('.vjs-player');
  if (!playerContainer) return null;
  
  // 遍历players对象，找到对应容器的实例
  for (const key in window.videojs.players) {
    const player = window.videojs.players[key];
    if (player.el() === playerContainer) {
      return player;
    }
  }
  return null;
}

三、绑定表单提交事件实现时间戳跳转 #

获取到播放器实例后，绑定表单提交事件，解析时间戳并设置播放位置：

// 时间戳转秒数的工具函数
function timestampToSeconds(timestamp) {
  const parts = timestamp.split(':').reverse();
  let totalSeconds = 0;
  parts.forEach((part, index) => {
    totalSeconds += parseInt(part) * Math.pow(60, index);
  });
  return totalSeconds;
}

// 初始化时间戳跳转逻辑
function initTimestampJump() {
  const player = getVJSPlayer();
  if (!player) {
    // 当前未找到播放器，延迟1秒重试
    setTimeout(initTimestampJump, 1000);
    return;
  }

  const form = document.getElementById('timestamp-form');
  form.addEventListener('submit', e => {
    e.preventDefault();
    const inputVal = form.querySelector('input').value.trim();
    const seconds = timestampToSeconds(inputVal);
    if (!isNaN(seconds)) {
      player.currentTime(seconds);
    }
  });
}

// 页面加载后启动初始化
window.addEventListener('load', initTimestampJump);

四、用MutationObserver监听动态加载的播放器 #

如果页面是动态渲染video.js播放器的，用MutationObserver监听DOM变化，确保播放器初始化完成后再执行逻辑：

const observer = new MutationObserver(mutations => {
  for (const mutation of mutations) {
    if (mutation.addedNodes.length) {
      const player = getVJSPlayer();
      if (player) {
        // 绑定表单提交事件
        const form = document.getElementById('timestamp-form');
        form.addEventListener('submit', e => {
          e.preventDefault();
          const seconds = timestampToSeconds(form.querySelector('input').value);
          if (!isNaN(seconds)) player.currentTime(seconds);
        });
        observer.disconnect(); // 找到实例后停止监听
        break;
      }
    }
  }
});

// 监听body下的所有DOM变化
observer.observe(document.body, { childList: true, subtree: true });

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