video 元素的 playbackRate 属性直接控制倍速，是可读写的浮点数，默认 1.0；需在 loadedmetadata 或 canplay 后设置，iOS 要求用户手势触发，不支持 HTML 内联设置，设置后立即生效但需校验实际值。
video 元素的 playbackRate 属性直接控制倍速
HTML5 原生 元素通过 playbackRate 属性支持倍速播放，无需第三方库。该属性是可读写的浮点数，默认值为 1.0，表示正常速度。0.5 是半速，2.0 是两倍速。浏览器普遍支持 0.25 到 4.0 范围，但超出范围时行为不一致——部分浏览器会静默截断，部分抛错或忽略。
- 必须在视频已加载元数据（
loadedmetadata）或至少进入canplay状态后设置才可靠 - 移动端 Safari 对非
1.0值限制严格，iOS 15+ 才允许用户手动设为0.5/1.5/2.0，且需用户手势触发（如点击按钮），不能自动设置 - 设置后不会触发重载，但若视频正在播放，会立即生效；暂停状态下设置，恢复播放时生效
用 JavaScript 动态修改 playbackRate 的典型写法
不能直接在 HTML 标签里写 playbackrate="1.5" —— 这是无效的，必须走 JS。常见错误是未等视频就绪就调用，导致设置失败且无提示。
const video = document.querySelector('video');
video.addEventListener('canplay', () => {
video.playbackRate = 1.5;
});
// 或绑定按钮点击
document.getElementById('speed-2x').addEventListener('click', () => {
video.playbackRate = 2.0;
});
兼容性与降级处理的关键点
Firefox 和 Chrome 桌面版支持任意合法浮点值（如 1.25、0.75），但旧版 Edge（EdgeHTML）仅支持 [0.5, 1.0, 1.25, 1.5, 2.0] 这几个离散值，设其他值会被四舍五入到最近的支持值。Safari 在 macOS 上较宽松，iOS 上则强制要求用户交互后才能修改，否则静默失败。
- 检查是否实际生效：设置后立即读回
video.playbackRate，对比是否等于预期值 - 不要依赖
ratechange事件做 UI 同步——它可能不触发，推荐用按钮点击后主动更新 UI 显示 - 若需精确控制（如逐帧调试），注意倍速会影响
timeupdate触发频率，高倍速下事件可能跳过
自定义倍速控件要注意的 DOM 交互时机
用户点击“1.5×”按钮时，如果视频尚未加载完成，playbackRate 设置会无效。更健壮的做法是把设置逻辑封装，并在多个就绪事件中尝试：
立即学习“前端免费学习笔记（深入）”；
function setPlaybackRate(video, rate) {
if (video.readyState >= 2) { // HAVE_METADATA
video.playbackRate = rate;
} else {
video.addEventListener('loadedmetadata', () => {
video.playbackRate = rate;
}, { once: true });
}
}
移动端尤其要避免在 autoplay 未成功时就预设倍速——很多 iOS 设备会拦截自动播放，导致视频长期处于 0 就绪状态，loadedmetadata 也不触发。
倍速不是纯样式问题，它直接受制于媒体加载状态、平台策略和用户交互上下文。最常被忽略的是 iOS 的“必须由用户手势触发”这一硬性限制，绕不过去，只能适配。
