可通过JavaScript动态设置video元素的playbackRate属性实现自定义倍速播放，支持按钮切换、实时显示、兼容性处理及range滑块连续调节等多种方式。
如果您在使用 HTML5 的 <video> 元素时希望实现自定义倍速播放，可以通过 JavaScript 动态修改 video 元素的 playbackRate 属性来完成。以下是几种可行的实现方式：
一、直接设置 playbackRate 属性
playbackRate 是 <video> 元素的原生属性，表示当前播放速率，默认值为 1.0。该属性可读可写，赋值后会立即生效（前提是视频已加载元数据且处于可播放状态）。
1、确保 video 元素已通过 id 或其他方式获取到 DOM 引用，例如：const video = document.getElementById('myVideo');
2、检查视频是否已加载足够信息，可在 loadedmetadata 事件中设置：video.addEventListener('loadedmetadata', () => { video.playbackRate = 1.5; });
立即学习“前端免费学习笔记（深入）”；
3、若需在播放过程中动态调整，可直接赋值：video.playbackRate = 2.0;
二、通过按钮触发倍速切换
为提升用户体验，可绑定多个按钮分别对应不同倍速值，点击即切换。该方法避免硬编码，便于维护和扩展。
1、在 HTML 中添加控制按钮，例如：<button onclick="setSpeed(0.5)">0.5x</button><button onclick="setSpeed(1.0)">1x</button><button onclick="setSpeed(1.25)">1.25x</button>
2、定义 JavaScript 函数：function setSpeed(rate) { const v = document.getElementById('myVideo'); if (v && !isNaN(rate)) v.playbackRate = rate; }
3、确保 video 元素存在且未被阻止自动播放策略干扰，否则 playbackRate 修改可能无效。
三、监听并同步显示当前倍速值
用户需要明确感知当前播放速率，因此应在界面中实时反映 playbackRate 的变化。该方法结合事件监听与 DOM 更新，增强交互反馈。
1、在页面中添加用于显示倍速的元素，例如：<span id="speedDisplay">1.0x</span>
2、绑定 timeupdate 事件以持续读取当前速率（或更高效地在每次 set 操作后更新）：video.addEventListener('timeupdate', () => { document.getElementById('speedDisplay').textContent = video.playbackRate + 'x'; });
3、注意：timeupdate 触发频繁，如仅需反映手动设置结果，建议在 setSpeed 函数内直接更新显示，避免冗余执行。
四、兼容性处理与异常捕获
部分浏览器或移动设备对非标准倍速值（如小于 0.0625 或大于 16）可能拒绝设置，或静音状态下限制倍速。需主动检测赋值结果是否生效。
1、设置后立即读回验证：video.playbackRate = 3.0; if (video.playbackRate !== 3.0) console.warn('倍速设置未生效，实际值：', video.playbackRate);
2、捕获无效值异常：某些旧版 Safari 对小数精度敏感，推荐使用合法范围内的值（0.0625–16.0），并避免传入 NaN 或 null。
3、针对 iOS Safari，需确保视频已用户手势触发播放（如 click 后调用 play()），否则 playbackRate 设置将被忽略。
五、使用 range 输入控件实现连续倍速调节
允许用户拖动滑块自由选择倍速，提供更精细的控制粒度。该方法依赖 input[type="range"] 与 playbackRate 的双向绑定。
1、添加 range 控件并设定合理范围：<input type="range" id="speedControl" min="0.5" max="4.0" step="0.05" value="1.0">
2、绑定 input 事件实时更新：document.getElementById('speedControl').addEventListener('input', e => { video.playbackRate = parseFloat(e.target.value); });
3、同步更新显示文本：e.target.nextElementSibling.textContent = e.target.value + 'x';（假设 span 紧邻 input 元素）
