html 标签不支持倍速播放，需用 javascript 设置 playbackrate 属性；该属性是 dom 属性而非 html 属性，必须在 loadedmetadata 事件后设置，且 ios safari 要求用户手势触发并仅支持特定离散值。
HTML <video></video> 标签本身不提供倍速播放功能，必须用 JavaScript 操作 playbackRate 属性才能开启——不是加个属性、也不是靠 controls 自带，更不能靠 setAttribute。
为什么直接写 playbackRate="1.5" 或 setAttribute('playbackrate', '1.5') 不生效
因为 playbackRate 是 DOM 元素的 JS 属性（property），不是 HTML 属性（attribute）。浏览器解析 HTML 时会忽略 playbackRate="1.5" 这类写法，setAttribute 也只改 HTML 属性，两者都静默失败，控制台无报错。
-
video.playbackRate = 1.5✅ 正确：直接写 JS 属性 -
video.setAttribute('playbackrate', '1.5')❌ 无效：拼写错误 + 操作对象错误 -
<video playbackrate="1.5"></video>❌ 无效：HTML 中无此合法 attribute - 大小写敏感：
playbackrate（小写 r）会静默失败，必须是playbackRate
什么时候设置 playbackRate 才真正生效
必须等视频元数据加载完成，否则赋值会被忽略。常见错误是 DOM 加载完就立刻设，但此时 video.readyState 还是 0（HAVE_NOTHING）。
- 监听
loadedmetadata事件最稳妥：它表示宽高、时长等元信息已就绪 - 也可用
canplay，但loadedmetadata更早、更轻量 - 检查
video.readyState >= 2（即HAVE_METADATA）再赋值，可避免条件竞争 - 示例：
const video = document.querySelector('video');<br>video.addEventListener('loadedmetadata', () => {<br> video.playbackRate = 1.25;<br>});
iOS Safari 上倍速失效的真正原因和应对
不是“不支持”，而是 iOS Safari 要求倍速修改必须由**用户手势触发**（click/touchend），且只接受离散值：0.5 / 1.0 / 1.5 / 2.0。哪怕你写了 video.playbackRate = 1.25，它也会静默回退到 1.0，且不报错、不抛异常。
- 所有倍速按钮必须绑定在真实用户交互上，比如
button.addEventListener('click', ...) - 不能在
autoplay回调或setTimeout里自动设速 - 设完建议立即读回验证：
if (video.playbackRate !== 1.5) { /* 降级处理 */ } - 推荐预设档位限定在 [0.5, 2.0]，并优先用 0.75/1.0/1.25/1.5/2.0 这些更兼容的值
如何让倍速切换有反馈、不丢状态
用户点了 1.5× 按钮，UI 要立刻同步，不能等 ratechange 事件——它不一定触发，尤其在 iOS 上。
- 点击按钮时，先改
video.playbackRate，再立刻更新按钮高亮和显示文字（如speedDisplay.textContent = '当前: 1.5×'） - 用
localStorage记住上次值：localStorage.setItem('preferredRate', video.playbackRate)，下次页面加载后读取并设回 - 注意用
parseFloat解析 localStorage 值，避免字符串导致 NaN - 对用户手动输入的倍速值做兜底：
Math.min(Math.max(parseFloat(input.value), 0.25), 4.0)
真正麻烦的从来不是写那行 video.playbackRate = x，而是判断它有没有真生效、在哪个设备上被悄悄绕过、以及用户下次打开页面时是否还记得自己习惯的 1.25 倍速。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
