HTML <video> 标签需通过 JavaScript 的 playbackRate 属性实现倍速，关键在时机（loadedmetadata 事件）、iOS 用户手势限制（须绑定 click/touchend）、交互界面（按钮+快捷键）及兼容性兜底（限定 0.5–2.0 并验证赋值）。
HTML <video> 标签本身不支持直接通过属性设置倍速，必须借助 JavaScript 操作 playbackRate 属性来实现。核心在于时机、兼容性和交互设计三方面——不是设了就生效，而是要“在对的时机、用对的方式、适配不同浏览器”。
确保视频元数据加载完成再设置
刚创建的 <video> 元素处于未就绪状态，此时设置 playbackRate 会被忽略。必须等基础信息（时长、宽高、编码格式）加载完毕。
- 推荐监听
loadedmetadata事件：它触发早、稳定，比canplay更可靠 - 写法示例：
video.addEventListener('loadedmetadata', () => { video.playbackRate = 1.25; }); - 避免常见错误：页面一加载就执行
video.playbackRate = 1.5，尤其在 Safari 或 Firefox 中完全无效且无报错
iOS Safari 的用户手势限制必须绕过
iOS 版 Safari 对非 1.0 倍速有硬性要求：只有在明确的用户操作（如点击、触摸结束）回调中设置，才会真正生效。自动播放、定时器、异步链式调用均无效。
- 不能在
autoplay触发的play()回调里立刻改倍速 - 推荐做法：初始静音 + 暂停；等用户点击“播放”按钮时，同步调用
video.play()和video.playbackRate = x - 所有倍速按钮（包括快捷键）都必须绑定在真实用户事件上，例如
click或touchend
提供可交互的倍速控制界面
纯 JS 设置只是底层能力，用户体验靠按钮、快捷键和视觉反馈来闭环。
立即学习“前端免费学习笔记（深入）”；
- 预设按钮组（如 0.75×、1.0×、1.25×、1.5×、2.0×），每个带
data-rate="1.25"，统一监听 click - 点击后立即赋值
video.playbackRate，并高亮当前按钮、更新显示文字（如“当前：1.25×”） - 补充键盘支持：按住 Shift + ↑/↓ 微调（步长建议 0.25），或鼠标滚轮上下切换预设档位
- 每次操作后建议短暂显示提示（可用
title或轻量 tooltip），增强操作确定感
处理浏览器兼容性与边界值
不同浏览器对 playbackRate 的支持范围、精度和行为差异较大，需主动兜底。
- 桌面 Chrome 支持 0.0625–16.0，Safari 桌面约 0.25–4.0，iOS Safari 实际只认 0.5/1.0/1.5/2.0 这几个离散值
- 超出范围时行为不一致：Chrome 静默截断，Firefox 可能抛错，iOS 直接忽略——建议用
Math.min(Math.max(rate, 0.5), 2.0)限定常用安全区间 - 设置后务必读回验证：
if (video.playbackRate !== target) { /* 处理降级或提示 */ } - 不要依赖
ratechange事件同步 UI，它不一定触发；按钮点击后立刻更新文本更稳妥
