如何排查HTML5 video元素无法通过JavaScript修改播放速率的原因？

以下是针对播放速率被强制恢复为1的问题，可落地的排查步骤：

1. 追踪playbackRate属性的修改行为 #

直接重写视频元素的playbackRate属性 setter，记录所有修改操作的调用栈，定位是谁在重置速率：

const video = document.querySelector('video');
const originalSetter = Object.getOwnPropertyDescriptor(HTMLVideoElement.prototype, 'playbackRate').set;

Object.defineProperty(video, 'playbackRate', {
  set: function(value) {
    console.log('playbackRate被设置为:', value, '\n调用栈:', new Error().stack);
    originalSetter.call(this, value);
  },
  get: function() {
    return Object.getOwnPropertyDescriptor(HTMLVideoElement.prototype, 'playbackRate').get.call(this);
  }
});

执行你设置video.playbackRate=1.5的操作后，控制台会打印出所有修改该属性的代码位置和调用栈。

2. 全局拦截ratechange事件监听器 #

部分网站会在全局或父元素上绑定ratechange事件而非直接绑定在video元素上，通过重写addEventListener来捕获所有相关监听器：

const originalAddEventListener = EventTarget.prototype.addEventListener;
EventTarget.prototype.addEventListener = function(type, listener) {
  if (type === 'ratechange') {
    console.log('ratechange监听器绑定到:', this, '\n监听器代码:', listener.toString(), '\n调用栈:', new Error().stack);
  }
  return originalAddEventListener.call(this, type, listener);
};

刷新页面后，所有添加ratechange监听器的操作都会被记录。

3. 利用浏览器调试工具断点 #

• 在Chrome DevTools的Elements面板选中video元素，右键选择「Break on」→「Property modifications」（针对属性修改触发断点）；
• 或在Console面板中获取video对象，右键点击playbackRate属性，选择「Break on set」，当属性被修改时会自动暂停，直接查看调用栈。

4. 检查视频封装层/播放器实例 #

部分视频网站会将原生video元素封装到自定义播放器类中（比如Prime Video的内部播放器），可通过以下方式查找：

• 在Sources面板搜索playbackRate、ratechange等关键词，定位相关业务代码；
• 在Console面板尝试访问全局变量（如player、primeVideoPlayer），查看是否存在管理播放速率的实例方法。

5. 尝试冻结属性触发报错 #

将playbackRate设为只读，若有代码尝试修改会抛出错误并显示调用栈：

Object.defineProperty(video, 'playbackRate', {
  writable: false,
  value: 1.5
});

（注：此操作仅用于排查，会影响正常播放逻辑，排查完成后需恢复）

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