直接监听 ratechange 事件可捕获倍速变化，但因 ios safari 等平台兼容性问题及异步设置失败时静默跳过，无法保证每次触发，故需配合主动更新 ui 并在 loadedmetadata 后注册监听。
直接监听 ratechange 事件即可捕获倍速变化，但要注意它**不保证每次设置都触发**，尤其在 iOS Safari 或异步设置失败时可能静默跳过。所以不能只靠它来同步 UI，得配合主动更新。
ratechange 事件的基本用法
该事件在 video 或 audio 元素的 playbackRate 实际生效后触发，包括用户手动修改、脚本设置、或浏览器自动修正（如超出范围被截断）后的最终值。
- 用
addEventListener('ratechange', handler)绑定，推荐在loadedmetadata后注册，确保元素已就绪 - 回调中通过
event.target.playbackRate获取当前真实速率，比如1.25、0.5 - 它不会在初始化时自动触发，首次设置倍速后才可能触发（取决于是否真正变更）
为什么不能只依赖 ratechange 更新界面
这个事件有局限性：iOS Safari 在非用户手势上下文中设置倍速会失败，ratechange 根本不触发；Chrome 对超限值静默修正，也可能不发事件；某些框架或插件绕过原生 setter，导致事件丢失。
Article To Html
下载
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
- 按钮点击设倍速后，应立刻更新显示文本，而不是等事件回调
-
ratechange更适合作为“兜底校验”——比如检测实际生效值是否与预期一致，用于日志或调试 - 若需持久化或跨 iframe 同步，建议结合
chrome.storage或自定义消息机制，而非仅靠事件
配合 loadedmetadata 确保监听及时生效
ratechange 本身不关心视频是否加载完成，但若在元数据还没加载时就绑定监听，后续设置倍速可能因 readiness 不足而被忽略，导致事件根本没机会触发。
- 推荐写法：
<script><br>const video = document.querySelector('video');<br>video.addEventListener('loadedmetadata', () => {<br> video.playbackRate = 1.5;<br> video.addEventListener('ratechange', () => {<br> console.log('当前倍速：', video.playbackRate.toFixed(1) + 'x');<br> });<br>});<br></script> - 这样既保证倍速设置时机稳妥，又让事件监听器在可操作状态下挂载
注意浏览器兼容性差异
不同平台对倍速的支持范围和事件行为不一致，直接影响 ratechange 是否触发：
- Chrome：支持 0.0625–16.0，超限静默截断，
ratechange通常触发 - Safari 桌面版：约 0.25–4.0，超限可能忽略设置，事件不触发
- iOS Safari：只认 0.5/1.0/1.5/2.0 四个离散值，其他值设置无效，
ratechange不会触发 - Firefox：超限可能抛
DOMException，设置失败则无事件
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
