HTML5视频倍速切换需等待loadedmetadata/canplay事件就绪、iOS须绑定用户手势、UI应立即同步playbackRate值并校验，各浏览器倍速范围与兼容性差异显著。
HTML5 视频倍速切换本身不涉及“媒体流处理”底层操作，而是直接通过 playbackRate 属性控制播放时序。所谓“平滑”，关键在于避免卡顿、跳帧或状态错乱，核心是时机把控、用户交互合规与状态同步。
确保视频已就绪再设倍速
刚加载的 <video></video> 元素处于未就绪状态（readyState === 0），此时设置 playbackRate 会被浏览器忽略，且无报错。必须等待元数据加载完成：
- 监听
loadedmetadata事件——最稳妥，包含宽高、时长等基础信息 - 或监听
canplay事件——表示可开始播放，通常也满足倍速设置条件 - 避免在页面加载完成（
DOMContentLoaded）或load事件中直接设值
移动端 iOS 必须绑定用户手势
iOS Safari 对非 1.0 倍速有严格限制：只有在明确的用户交互（如 click、touchend）回调中设置，才真正生效。自动播放后、定时器里、或事件链中异步调用均会失败：
DeepBI DHTML 页面生成器
下载
生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur
- 所有倍速按钮必须使用
onclick或addEventListener('click', ...) - 不能在
autoplay触发的play回调里立刻改倍速 - 若需默认启动即倍速，建议先静音 + 暂停，等用户点击“播放”按钮时再同时调用
play()和设置playbackRate
实时同步 UI 与实际速率
ratechange 事件不可靠（部分浏览器不触发），不应依赖它更新界面。正确做法是：用户点击按钮后，立即更新显示，并读回属性验证：
立即学习“前端免费学习笔记（深入）”；
- 设置前先做数值校验，例如：
const safeRate = Math.min(Math.max(parseFloat(rate), 0.25), 4.0) - 赋值后立即读取
video.playbackRate，若与目标值不一致，说明被浏览器降级或拒绝（如 iOS 只接受 0.5/1.0/1.5/2.0） - 同步更新按钮高亮状态和显示文本，例如：
document.getElementById('speed-display').textContent = video.playbackRate.toFixed(1) + 'x'
避免常见兼容性陷阱
不同浏览器对倍速范围和支持方式差异明显：
- Chrome 支持 0.0625–16.0，超出静默截断；Firefox 可能抛
DOMException - Safari 桌面版常用范围为 0.25–4.0；iOS 则只认有限离散值，设 1.25 会自动变成 1.0 或 1.5
- 属性名严格区分大小写：
playbackRate✅，playbackrate❌（静默失败） - 负数（如 -1.0）支持反向播放，但仅限桌面 Chrome/Safari，移动端基本无效
