问题：如何用Tampermonkey脚本加速培训视频播放？

Question

如何用Tampermonkey脚本加速培训视频播放？常见技术问题包括：如何检测页面中的视频元素、如何适配不同视频平台的播放机制、如何通过脚本动态修改播放速度、如何确保脚本在页面加载时可靠运行、如何处理视频播放器的封装与事件监听等。此外，还需解决跨域限制、防止脚本冲突、兼容多种浏览器环境等问题。掌握这些问题，是实现Tampermonkey脚本高效控制视频播放的关键步骤。

Answer 1

一、Tampermonkey脚本加速培训视频播放的实现路径

随着在线教育和企业内部培训平台的普及，越来越多的学习者希望通过技术手段提升学习效率。使用Tampermonkey编写用户脚本，是一种在不修改网页源码的前提下增强浏览器功能的有效方式。本文将从浅入深地讲解如何利用Tampermonkey脚本来加速培训视频播放。

1. 检测页面中的视频元素

视频元素通常是<video>标签或封装在iframe中的第三方播放器（如YouTube、Vimeo等）。检测视频元素是脚本的第一步。

• 直接查找DOM节点： 使用document.querySelectorAll('video')来获取所有原生视频元素。
• 监听DOM变化： 对于动态加载的视频内容，可使用MutationObserver监听DOM变化。
• 处理iframe嵌套： 若视频位于iframe中，需通过跨域通信或尝试访问其window对象。

2. 适配不同视频平台的播放机制

不同平台对视频控制的封装程度不一，适配策略也不同。

平台类型	常见特征	适配方法
HTML5原生	使用<video>标签	直接操作video元素属性
YouTube	使用iframe嵌套，提供API接口	调用YouTube API或注入脚本与player通信
自定义播放器	基于Web Components或React组件封装	分析播放器暴露的方法或事件

3. 动态修改播放速度

修改视频播放速度的核心在于设置playbackRate属性。

// 修改视频播放速度
function setPlaybackRate(rate) {
  const videos = document.querySelectorAll('video');
  videos.forEach(video => {
    video.playbackRate = rate;
  });
}

建议添加快捷键绑定，例如按下数字键“2”即可设置为2倍速：

document.addEventListener('keydown', function(e) {
  if (e.key === '2') {
    setPlaybackRate(2);
  }
});

4. 确保脚本在页面加载时可靠运行

Tampermonkey脚本默认在文档加载完成后执行，但某些视频可能延迟加载。可通过以下方式增强可靠性：

• 配置@run-at指令： 在元数据中指定// @run-at document-idle以确保DOM已就绪。
• 使用setTimeout轮询检测： 定期检查是否存在视频元素。
• 结合MutationObserver： 监听DOM变化并及时响应。

5. 处理视频播放器的封装与事件监听

现代播放器往往采用模块化封装，直接访问video元素可能不可行。此时需要：

• 事件代理： 监听播放器容器上的事件冒泡。
• 反射调用API： 分析播放器暴露的API并模拟调用。
• 钩子函数注入： 替换播放器初始化函数以插入控制逻辑。

6. 解决跨域限制问题

当视频托管在跨域iframe中时，无法直接访问其DOM。

• 使用postMessage通信： 向iframe发送消息请求播放控制。
• 尝试注入脚本到iframe上下文： 若允许同源，则可创建<script></script>