video标签无原生倍速菜单，需手动实现UI并绑定playbackRate属性；其值范围通常为0.5～2.0，设值前应检查readyState≥2，注意Safari截断、Android兼容性及多视频隔离。
video 标签本身不提供播放速度菜单
浏览器原生 <video> 没有内置“0.5x～2x”下拉菜单，这个功能必须自己写 UI + 绑定 playbackRate 属性。常见错误是以为加个 controls 就能出倍速按钮——实际所有主流桌面浏览器（Chrome/Firefox/Safari）都不支持。
用 playbackRate 控制倍速，但得手动绑定 UI
核心是读写 video.playbackRate，它接受 0.05～10 范围的数字（实际常用 0.5～2.0），设值后立即生效。注意：
-
playbackRate是可读写属性，不是方法，别写成playbackRate() - 某些安卓 WebView 或旧版 iOS Safari 会忽略非 1.0 的值，或强制重置为 1.0
- 设值前最好先检查
video.readyState >= 2，否则可能静默失败 - 用户切换倍速时，建议同时更新按钮文字（如 “1.5×”），避免视觉错位
示例：
const video = document.querySelector('video');<br>const rateBtn = document.getElementById('rate-btn');<br><br>rateBtn.addEventListener('click', () => {<br> const rates = [0.5, 0.75, 1, 1.25, 1.5, 2];<br> const current = rates.indexOf(video.playbackRate);<br> const next = rates[(current + 1) % rates.length];<br> video.playbackRate = next;<br> rateBtn.textContent = `${next}×`;<br>});
自定义菜单需处理点击穿透和焦点逻辑
如果用 <select> 或 <div> 做下拉菜单，容易踩这些坑：
立即学习“前端免费学习笔记（深入）”；
- 点击菜单项后，
video失去焦点导致键盘快捷键（如空格暂停）失效 —— 建议点击后主动调用video.focus() - 移动端点选
<select>会唤起原生选择器，样式不可控；更稳妥是用<div class="rate-menu">+ CSS 定位 - 菜单展开时没阻止
video的默认右键菜单，可在contextmenu事件里e.preventDefault() - 多个视频共存时，确保每个菜单只控制对应
video实例，别用全局变量硬编码
兼容性与 fallback 要点
playbackRate 在 Chrome 25+、Firefox 20+、Safari 6.1+ 支持良好，但仍有细节差异：
- Safari 对小于 0.5 或大于 2.0 的值会自动截断，且不触发
ratechange事件 - 部分 Android 浏览器（如 Samsung Internet）设值后需调用
video.load()才生效，但会中断播放 —— 更安全的做法是只在暂停时允许修改 - 如果检测到
video.playbackRate === 1设值后不变，可尝试先video.currentTime = video.currentTime触发重绘 - 不支持的环境（如老旧 IE）可隐藏倍速按钮，或降级为提示“当前浏览器不支持调节播放速度”
最常被忽略的是：倍速修改后，video.duration 不变，但实际播放耗时按比例缩放，做进度同步或字幕定位时得自己换算时间戳。
