必须等 loadedmetadata 事件后设置 playbackRate,iOS Safari 需用户手势触发,仅 JS 赋值有效(video.playbackRate = x),设后需读取验证并约束范围(推荐 0.75–2.0)。

直接用 video.playbackRate = x 就能改速度,但不是写完就生效——时机、平台限制和赋值方式稍有差错,就会静默失败,界面看起来“没反应”。
必须等元数据加载完成再设置
视频刚插入页面时,浏览器还没读取时长、分辨率等基本信息(readyState === 0),此时设 playbackRate 会被忽略,不报错也不提示。
- 推荐监听
loadedmetadata事件:它表示基础元数据已就绪,是设置倍速最稳妥的时机 - 也可以用
canplay,但部分低端设备可能触发更晚,稳定性略低 - 别依赖
DOMContentLoaded或window.onload,它们和视频加载无关
iOS Safari 必须由用户手势触发
在 iPhone 或 iPad 的 Safari 及微信内置浏览器中,非 1.0 倍速(如 1.25、1.5)只能在明确的用户操作回调里设置才有效。
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图,自动匹配视觉风格。触发场景:文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
- 点击按钮、触摸结束(
touchend)、空格键播放等都算有效手势 -
autoplay自动播放后立刻设速、setTimeout延迟设置、或play()成功回调里直接改,全都会被系统拒绝 - 建议做法:先暂停 + 静音,等用户点“播放”按钮时,再同时调用
play()和设置playbackRate
只能用 JS 属性赋值,不能写在 HTML 里
playbackRate 是 DOM 元素的 JavaScript 属性,不是 HTML 属性,大小写也必须严格匹配。
立即学习“前端免费学习笔记(深入)”;
-
<video playbackrate="1.5">或<video playbackRate="1.5">都无效,浏览器直接忽略 - 正确写法只有:
video.playbackRate = 1.5(注意 R 大写) - 写成
playbackrate(小写 r)会静默失败,控制台无任何提示
设完要读回来验证,并做范围约束
不同浏览器支持的倍速范围差异很大:Chrome 支持 0.0625–16.0,Safari 桌面版常见 0.25–4.0,而 iOS 只认 0.5 / 1.0 / 1.5 / 2.0 这几个离散值。
- 赋值后立即读取
video.playbackRate,比对是否等于目标值,不一致说明被降级 - 教学或通用场景建议限定在 0.75–2.0 区间,避免高倍速下人声失真
- 用户输入时做兜底:
const safeRate = Math.min(Math.max(parseFloat(val), 0.75), 2.0) - UI 显示应立刻更新(如按钮文字变成“1.5×”),不要等
ratechange事件——它不一定触发


















