HTML5视频播放速率可通过video.playbackRate属性动态设置0.5～4.0连续值，默认1.0；需在loadedmetadata事件后初始化，支持localStorage记忆偏好；可绑定按钮、键盘（Shift+方向键）及滚轮调节。
HTML5视频的播放速率（playbackRate）可通过 video.playbackRate 属性直接控制，支持0.5～4.0范围内的连续值，默认为1.0。它不是只读属性，可动态修改，且多数现代浏览器均原生支持，无需额外插件或复杂封装。
设置默认倍速与初始化控制
在标签中无法通过HTML属性直接设倍速，必须用JavaScript初始化。常见做法是在loadedmetadata事件后设置，确保元信息已加载，避免无效赋值：
- 在
video元素上监听loadedmetadata，再赋值playbackRate = 1.25 - 若需用户偏好记忆，可结合
localStorage读取上次保存的值（如localStorage.getItem('preferredRate')） - 注意：Safari在iOS上对小于0.5或大于2.0的倍速可能限制生效，建议限定在0.5–2.0更稳妥
绑定按钮实现点击切换倍速
提供一组预设按钮（如0.75×、1.0×、1.25×、1.5×、2.0×），点击即更新当前视频速率，并高亮当前选中项：
- 每个按钮设置
data-rate="1.25"，统一绑定click事件 - 事件处理中获取
dataset.rate，转为数字后赋给video.playbackRate - 同步更新按钮UI状态（如添加
active类），并可选更新显示文字（如“当前：1.25×”）
支持键盘快捷键与滚轮调节
提升效率的交互补充：按Shift + ↑/↓微调（步长0.25），或滚动鼠标滚轮上下切换预设档位：
- 监听
keydown，检测event.shiftKey && event.key === 'ArrowUp'时递增倍速（上限2.0） - 对
video容器绑定wheel事件，deltaY > 0降速，升速，每次跳转到邻近预设值（如1.0→1.25→1.5） - 操作后建议短暂显示浮动提示（如使用
title属性或轻量tooltip），增强反馈感
兼容性处理与边界保护
部分旧版浏览器或移动端可能不支持任意倍速，或设值后无响应。需主动检测并降级：
- 设置后立即读回
video.playbackRate，若未变化，说明未生效，可提示用户或回退到最近支持值 - 对不支持
playbackRate的环境（如极老Android WebView），可隐藏倍速控件或显示灰色不可用态 - 避免设为0（暂停）或负数（倒放）——HTML5标准不保证支持，实际行为因浏览器而异，应禁用
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
