HTML5 <video> 标签原生支持倍速播放，通过 playbackRate 属性设置（如 0.5、1.0、1.5、2.0），需配合下拉菜单等 UI 控件并注意 Safari 和移动端兼容性。
HTML5 的 <video> 标签原生支持倍速播放，通过其 playbackRate 属性即可实现，无需额外插件或复杂 JS 逻辑。关键在于正确读取、设置该属性，并配合 UI 控件提供用户交互。
理解 playbackRate 属性的基本行为
playbackRate 是 <video> 元素的可读写属性，表示当前播放速率（默认为 1.0，即正常速度）。它接受浮点数值：
- 0.5 表示半速（慢放）
- 1.0 表示正常速度
- 2.0 表示两倍速（快放）
- 部分浏览器支持 0.25–4.0 范围，但超出可能被自动截断或忽略
- 设为 0 会暂停（但不推荐用此控制暂停，应使用
pause()）
用 JavaScript 动态设置倍速
获取视频元素后，直接赋值即可生效，且立即影响正在播放的内容：
const video = document.getElementById('myVideo');
video.playbackRate = 1.5; // 切换到 1.5 倍速
console.log(video.playbackRate); // 输出实际生效的值（可能被浏览器修正）
注意：某些浏览器（如 Safari）对非标准倍速（如 1.3、1.7）可能向下取整或四舍五入，建议只提供常见档位（0.5 / 0.75 / 1.0 / 1.25 / 1.5 / 2.0）。
anything-to-html
下载
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
立即学习“前端免费学习笔记（深入）”；
构建用户可操作的倍速选择控件
用下拉菜单（<select>）或按钮组最直观。示例 HTML + JS：
<video id="myVideo" controls> <source src="demo.mp4" type="video/mp4"> </video> <label for="speedSelect">倍速：</label> <select id="speedSelect"> <option value="0.5">0.5x</option> <option value="0.75">0.75x</option> <option value="1.0" selected>1x</option> <option value="1.25">1.25x</option> <option value="1.5">1.5x</option> <option value="2.0">2x</option> </select>
绑定变更事件：
const select = document.getElementById('speedSelect');
const video = document.getElementById('myVideo');
select.addEventListener('change', () => {
video.playbackRate = parseFloat(select.value);
});
兼容性与注意事项
- 所有现代浏览器（Chrome、Firefox、Edge、Safari 13.1+）均支持
playbackRate - Safari 在某些版本中对
playbackRate修改响应较慢，可加video.load()强制重载（不推荐，会影响播放状态）；更稳妥做法是确保视频已加载元数据（loadedmetadata事件后操作） - 移动端 iOS Safari 默认禁用自定义倍速（除非在
playsinline+ 用户手势触发后），需确保操作由用户点击等事件发起 - 倍速变化不会触发
ratechange事件，但你可以手动监听并更新 UI 状态
