HTML5 中怎么用 ratechange 事件实现视频的 1.5 倍与 2.0 倍速播放控制-H5教程-PHP中文网

HTML5 中存在 ratechange 事件，但它是 playbackRate 属性变更后的通知型事件，不可用于控制倍速切换；核心逻辑应通过点击按钮直接设置 video.playbackRate，并可选监听 ratechange 更新 UI。

html5 中怎么用 ratechange 事件实现视频的 1.5 倍与 2.0 倍速播放控制

HTML5 中没有 ratechange 事件——这是一个常见误解。实际可用的是 ratechange 事件，但它**不会触发**你期望的“用户主动切换倍速时的响应”，而且它本身是只读属性变更的**通知型事件**，不能直接用于控制倍速切换逻辑。

真正起作用的是 `playbackRate` 属性 + 手动绑定按钮

视频倍速控制的核心是 HTMLMediaElement.playbackRate 属性（可读写），配合普通 DOM 事件（如 click）来修改它。浏览器会在 playbackRate 值实际改变后触发 ratechange 事件，但你不该依赖它来做“切换动作”，而应把它当作一个确认或同步时机（比如更新 UI 显示当前倍速）。

实现 1.5× 和 2.0× 播放控制的推荐做法：

DeepBI DHTML 页面生成器

生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur

下载

给视频元素添加两个按钮（例如「1.5x」「2.0x」），监听它们的 click 事件
点击时直接设置 video.playbackRate = 1.5 或 2.0
可选：监听 ratechange 事件，用于刷新倍速显示文字、高亮当前按钮等 UI 同步操作
注意：部分浏览器（如 Safari iOS）限制倍速范围（通常仅支持 0.5–2.0），超出会静默回退；建议设置前做兼容性校验

完整示例代码

以下是一个简洁可用的 HTML 片段：

1.0×

<script> const video = document.getElementById('myVideo'); const display = document.getElementById('speedDisplay'); function setSpeed(rate) {   video.playbackRate = rate; } // 监听 ratechange 仅用于更新显示，不用于控制逻辑 video.addEventListener('ratechange', () => {   display.textContent = video.playbackRate.toFixed(1) + '×'; }); </script>

注意事项

ratechange 不会因 JS 赋值立即触发——它在播放速率**实际生效后**才触发（通常同步，但不可依赖其时机做关键逻辑）
移动端（尤其 iOS Safari）默认禁用非 1.0 倍速，需在标签中添加 webkit-playsinline playsinline，且用户必须已与页面交互（如点击）后才能生效
不要用 ratechange 替代按钮点击逻辑，否则会造成响应延迟或状态错乱
可增加「重置为 1.0×」按钮，提升用户体验

扩展建议：记忆上次倍速 & 平滑过渡

若想更友好，可结合 localStorage 记住用户偏好，并在视频加载完成（loadedmetadata）后自动应用：

保存：localStorage.setItem('preferredRate', '1.5')
恢复：video.playbackRate = parseFloat(localStorage.getItem('preferredRate') || '1.0')
注意：需在 canplay 或之后设置，避免被重置