onratechange 是播放速率变化后的通知机制，而非控制触发器；真正控制倍速的是 playbackRate 属性，其变更需满足值改变、元数据已加载、浏览器支持等条件才触发事件。
onratechange 不是“倍速控制”的触发器，它只是播放速率变化后的通知机制。真正控制倍速的是 playbackRate 属性。
为什么改了 playbackRate 却没触发 onratechange
常见错误是直接赋值但未触发浏览器的“变更感知”逻辑：
-
playbackRate值未实际改变（比如重复设为1.0），浏览器不会触发事件 - 在
video元素尚未加载元数据（loadedmetadata）前就设置playbackRate，部分浏览器会静默忽略 - 某些安卓 WebView 或旧版 Safari 对非标准倍速（如
0.75、1.25）支持不完整，设了也无效，自然不触发事件
验证是否生效：设完后立即读取 vid.playbackRate，看返回值是否等于你设定的值。不等，说明设置失败，onratechange 一定不会来。
onratechange 的两种绑定写法和坑点
必须确保绑定发生在元素存在且可操作之后，推荐用 addEventListener：
立即学习“前端免费学习笔记（深入）”；
-
video.onratechange = handler：只能绑定一个函数，后续赋值会覆盖前一个 -
video.addEventListener("ratechange", handler)：支持多个监听器，更灵活；但 IE8 及更早版本不支持（不过现在基本不用考虑） - 不要在
oncanplay之前绑定 —— 此时元素可能还没准备好接受播放控制
示例：
const vid = document.getElementById("myVideo");
vid.addEventListener("ratechange", () => {
console.log("当前倍速：", vid.playbackRate);
});
用户手动调倍速时，onratechange 一定触发吗
不一定。取决于浏览器实现和 UI 控件来源：
- 原生控件（
<video controls>）点击倍速按钮：Chrome / Edge / Firefox 均触发ratechange；Safari 需要开启实验性功能才稳定支持 - 自定义倍速按钮（通过 JS 改
playbackRate）：只要赋值成功且值有变化，就会触发 - 系统级媒体快捷键（如 macOS 的
Cmd+>）：多数浏览器不响应，也不会触发该事件
所以不能依赖 onratechange 来“监听用户所有倍速操作”，它只反映 playbackRate 属性的实际变更结果。
兼容性和调试建议
这个事件在主流现代浏览器中支持良好（Chrome 9+、Firefox 3.5+、Safari 6.1+、Edge 12+），但要注意：
- 移动端 iOS Safari 对
playbackRate的修改限制较严：仅允许在用户手势（如点击）后立即设置，否则会被忽略 - 调试时别只看控制台日志 —— 加个实时显示当前
playbackRate的<span id="speed-display"></span>，更新它比 log 更直观 - 如果需要精确同步倍速状态（比如配合字幕或进度条逻辑），应在
ratechange回调里重新校准相关变量，而不是假设它和 UI 操作一一对应
最常被忽略的一点：事件本身不告诉你“是谁改的倍速”，也不区分是 JS 设置还是用户点击。如果你需要区分来源，得自己加标记（比如设置前写 vid._lastSetBy = "user"），onratechange 不提供上下文信息。
