playbackRate属性原生支持音视频播放速度控制,默认值1.0,支持正负值(Firefox不支持负值),需在loadedmetadata后设置,配合range滑块可动态调节,但原生controls不提供调节入口。

playbackRate 属性可以直接控制 <audio> 或 <video> 元素的播放速度,无需额外库,原生支持,设置简单但需注意兼容性和行为细节。
基础用法:直接赋值数字
该属性是可读写的浮点数,默认值为 1.0(正常速度)。值大于 1 加快播放,小于 1 减慢播放,0 表示暂停(部分浏览器可能不响应 0),负值可实现倒放(需浏览器支持且媒体格式兼容)。
-
video.playbackRate = 1.5;→ 1.5 倍速播放 -
audio.playbackRate = 0.75;→ 75% 速度播放(更慢、音调降低) -
video.playbackRate = -2.0;→ 倒放,2 倍速(仅 Chromium 系及新版 Safari 支持,Firefox 暂不支持负值)
动态调节:绑定用户操作
常配合按钮或滑块实时调整。注意应在媒体加载完成(loadedmetadata 或 canplay 事件后)再设置,避免无效:
- HTML 中加一个 range 输入框:
<input type="range" min="0.5" max="4" step="0.25" id="speedControl"> - JS 监听变化:
speedControl.addEventListener('input', () => video.playbackRate = parseFloat(speedControl.value)); - 建议同步更新显示文字,如
“当前速度:${video.playbackRate}x”
注意事项与兼容性
不同浏览器对 playbackRate 的支持略有差异,实际使用中需留意:
立即学习“前端免费学习笔记(深入)”;
- Chrome / Edge / Safari(macOS/iOS 15+)支持正负值;Firefox 仅支持 ≥ 0.0625 的正值,不支持负值
- 设为极小值(如
0.001)可能导致卡顿或跳过,建议下限设为0.25较稳妥 - 改变
playbackRate不会触发ratechange事件,但你可以手动监听并响应:video.addEventListener('ratechange', () => console.log('速率已变:', video.playbackRate)); - 音频音调会随速率变化(快播音调高、慢播音调低),如需保持音调不变,需 Web Audio API 配合处理,
playbackRate本身不提供此功能
配合 controls 属性的提示
原生控件(controls)**不暴露 playbackRate 调节入口**,即使设置了 video.playbackRate = 2,右键菜单或设置面板也不会显示对应选项。如需 UI 控制,必须自行实现按钮或滑块。
若想增强体验,可结合 defaultPlaybackRate 设置默认加载速度(影响自动播放和重播行为),例如:video.defaultPlaybackRate = 1.25;,之后调用 video.load() 或重新设置 src 才会生效。



















