在html5规范中，video标签自带的playbackRate属性可以直接控制视频的播放速度，不需要依赖额外的第三方播放器库，只需要操作原生的video元素即可完成倍速调整，是前端处理视频倍速播放最常用的方案。
playbackRate属性基本说明
playbackRate是video元素的只读/可写属性，默认值为1，代表正常播放速度。它的取值规则如下：
- 取值为1：正常速度播放
- 取值大于1：快进播放，比如2代表2倍速，3代表3倍速
- 取值小于1大于0：慢放，比如0.5代表0.5倍速，0.75代表0.75倍速
- 取值为0：视频暂停，效果和pause()方法一致
- 取值小于0：倒放，但是大部分浏览器不支持负数取值，设置后可能无效
需要注意的是，修改playbackRate属性后，视频会立即按照新的速度播放，不需要重新加载视频或者调整当前播放时间点。
基础设置方法
可以直接通过JavaScript获取video元素后，给playbackRate赋值来调整播放速度，以下是简单的示例：
// 获取页面上的video元素
const videoElement = document.querySelector('video');
// 设置播放速度为2倍速
videoElement.playbackRate = 2;
// 查看当前播放速度
console.log(videoElement.playbackRate);
如果是html内联设置，也可以在video标签上直接定义playbackRate吗？实际上playbackRate不支持作为html属性直接写在标签上，只能通过JavaScript动态设置。
结合交互控件实现动态调速
实际开发中通常需要给用户提供调速的入口，比如下拉选择框或者按钮，让用户自主选择播放速度，以下是结合下拉框的实现示例：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>video倍速播放示例</title>
</head>
<body>
<!-- video标签，添加controls属性显示默认控制栏 -->
<video id="myVideo" src="http://ipipp.com/sample.mp4" controls width="800"></video>
<div class="speed-control">
<label for="speedSelect">选择播放速度：</label>
<select id="speedSelect">
<option value="0.5">0.5倍速</option>
<option value="0.75">0.75倍速</option>
<option value="1" selected>正常速度</option>
<option value="1.25">1.25倍速</option>
<option value="1.5">1.5倍速</option>
<option value="2">2倍速</option>
</select>
</div>
<script>
// 获取video元素和下拉选择框
const video = document.getElementById('myVideo');
const speedSelect = document.getElementById('speedSelect');
// 监听下拉框变化事件
speedSelect.addEventListener('change', function() {
// 将选中的值转为数字，赋值给playbackRate
video.playbackRate = parseFloat(this.value);
});
</script>
</body>
</html>
注意事项
使用playbackRate属性时需要注意几个常见问题：
- 部分浏览器对音频的倍速播放支持更好，视频倍速播放可能会出现音画不同步的情况，尤其是高倍速下，这是浏览器底层解码的限制，无法完全通过代码解决
- 如果视频是直播流，部分浏览器可能不支持修改playbackRate，设置后不会生效
- 修改playbackRate不会影响video的currentTime属性，也就是不会跳进度，只会改变播放的快慢
- 可以通过监听
ratechange事件来感知播放速度的变化，方便做对应的UI更新：
video.addEventListener('ratechange', function() {
console.log('当前播放速度已变为：', this.playbackRate);
});
常见问题解答
设置playbackRate后视频没有变化怎么办？
首先检查video元素是否已经加载了视频资源，如果视频还没开始加载就设置playbackRate，可能会因为元素未初始化导致设置无效。可以在video的loadedmetadata事件触发后再设置初始的播放速度。
支持设置小数倍速吗？
支持，只要取值是大于0的数字都可以，比如0.3、1.7这类非标准倍速也可以设置，浏览器会自动适配对应的播放速度。
html5_videoplaybackRate视频播放速度前端开发修改时间：2026-06-08 22:24:35