记一次对网课视频播放器的倍速破限

前言：懒得刷网课

~~我觉得大多数人应该没有兴致看继续教育的网课吧~~

本文以兰州理工大学继续教育学院的网课作为示例，记录一次完整的破限方法，从最初的简单尝试，到一步步分析、推理，最终找到并破解平台限速脚本的全过程。这不仅是一个解决问题的方法分享，更是一次浏览器开发者工具实战演练。

免责声明：本文所有技术仅用于学习和研究目的，旨在提高个人学习效率。请尊重平台规则和知识版权，勿用于任何违规或作弊行为。

一、初步尝试：F12控制台的“失灵”

对于任何一个略懂前端技术的人来说，遇到网页视频倍速播放问题，第一反应通常是打开浏览器的开发者工具（F12），在控制台（Console）中输入那行经典的代码：

document.querySelector('video').playbackRate = 2.0;

然而，在这次的目标平台上，执行这行代码后，视频播放速度毫无变化。这立刻引起了我的警觉——事情并不简单。

通过检查元素（Elements）面板，我很快有了第一个发现：播放器相关的容器带有大量以xgplayer开头的class名。这表明，该平台使用的并非普通HTML5播放器，而是一个名为XGPlayer（西瓜播放器）的第三方库。这通常意味着它拥有自己的一套复杂的逻辑。

二、确认“幕后黑手”：定时器

既然一次性的命令无效，最合理的猜测是：平台内置了一个脚本，在持续地、强制性地将播放速度重置回1倍速。

为了验证这个猜想，我决定“以暴制暴”。如果它在用一个定时器（setInterval）来重置我，那我也用一个定时器来强制修改它。

JavaScript

// “暴力循环”法
setInterval(function() {
    document.querySelector('video').playbackRate = 2.5;
}, 500); // 每500毫秒（半秒）设置一次

执行后，视频开始出现断断续续的加速，时而快时而慢。这证明我的猜想是对的！我的定时器和平台的定时器正在“打架”。

为了赢得这场战争，我需要比它更快。我将间隔时间缩短到了一个更激进的值：50ms

JavaScript

setInterval(function() {
    document.querySelector('video').playbackRate = 2.5;
}, 50); // 每50毫秒设置一次

成功了！ 在50毫秒的高频率攻击下，平台脚本的重置操作被完全压制，视频稳定地以2.5倍速播放。虽然问题暂时解决了，但这种“暴力”的方式并不优雅，而且会持续消耗浏览器资源。我决定，必须找到那个“幕后黑手”的源头。

三、定位核心：大海捞针与`p.rate`的现形

既然已经确认有重置脚本的存在，下一步就是找到它。我利用了开发者工具中最强大的功能之一：全局搜索（快捷键 Ctrl+Shift+F）。

我开始在所有加载的.js脚本文件中搜索与播放速度最相关的关键字：playbackRate。

经过一番筛选，我找到了一个极其可疑的代码片段。在一个经过压缩、变量名都变成单个字母的文件里，有这样一段定义：

JavaScript

// 平台的播放器速率控制核心函数
p.rate = function(e) { 
    if ("live" == this._cfg.mode) 
        e = 1; 
    else 
        e = e || 1; // 如果传入的速度e无效，则默认为1
    
    // 直接操作video元素的播放速率
    this._videoNode.defaultPlaybackRate = e; 
    this._videoNode.playbackRate = e; 
    
    this._rate = e; 
    this._doOptionFn(a.MEDIA_RATE_CHANGE, e)
}

这就是“真凶”！这个p.rate函数显然是播放器内部用来设置速度的“官方API”。平台的限制脚本一定是在某个地方，用一个定时器反复地调用player.rate(1)，从而实现限速。

四、终极解决方案：“属性劫持”釜底抽薪

既然找到了问题的根源，我们就可以设计出最优雅、最根本的解决方案。我们不再需要外部的setInterval循环，而是直接从内部“策反”这个playbackRate属性。

这种方法被称为“属性劫持”（Property Hijacking）。我们重写<video>元素上playbackRate属性的set方法，加入我们自己的逻辑判断。任何试图将速度设置为1的“可疑操作”，都会被我们的“哨兵”拦截并替换。

倍速代码如下：

JavaScript

// --- 倍速代码 开始 ---

const videoElement = document.querySelector('video');
const propertyDescriptor = Object.getOwnPropertyDescriptor(HTMLMediaElement.prototype, 'playbackRate');

Object.defineProperty(videoElement, 'playbackRate', {
  get: function() {
    // get方法保持不变，返回真实的播放速率
    return propertyDescriptor.get.call(videoElement);
  },
  set: function(rate) {
    // 在这里定义您想要的最终速度！
    const desiredRate = 3.0; 

    // 核心拦截逻辑
    if (rate === 1) {
      // 如果平台的脚本想把速度设置为 1，我们拦截它，并强制设为我们想要的速度
      console.log(`[拦截成功] 平台试图重置速度为1x，已强制替换为 ${desiredRate}x！`);
      propertyDescriptor.set.call(videoElement, desiredRate);
    } else {
      // 如果是其他速度（可能是用户通过其他插件或手动设置），则允许通过
      console.log(`[速度放行] 允许将速度设置为: ${rate}x`);
      propertyDescriptor.set.call(videoElement, rate);
    }
  }
});

console.log('“播放速率”属性已被成功劫持。现在，您可以完全控制播放速度了！');
// 立即设置一次我们的理想速度，让其生效
videoElement.playbackRate = 3.0;

// --- 倍速代码 结束 ---