uni-app 的 video 组件在 App 端不支持 playbackRate,因 iOS/Android 原生播放器未暴露倍速接口;微信小程序需 onReady 后等 loadedmetadata 再调用;H5 可操作原生 video 元素,但须确保 DOM 就绪。

uni-app 的 video 组件在 App 端根本不支持 playbackRate
这不是配置问题,而是原生能力缺失:iOS 和 Android 的 plus.video.Player 实例没有暴露倍速控制接口,uni-app 的 组件在 App 端也未桥接到任何底层倍速 API。你无论怎么绑定 playbackRate、怎么调用 videoContext.playbackRate(),都不会生效——既无报错,也无效果,视频照常 1x 播放。
常见误操作包括:
- 在 App 端模板里直接写
,以为能响应式更新(实际被忽略) - 在
onReady后调用videoContext.playbackRate(1.5)(App 端该方法存在但内部无实现) - 试图用
document.querySelector('video')拿 DOM(App 端渲染的是原生 video 视图,不是 Webview 中的 HTML 元素)
微信小程序端设置 playbackRate 必须满足两个硬性时机条件
即使微信基础库 ≥ 2.25.0,playbackRate 也不是设了就生效。它依赖视频元数据加载完成 + 上下文就绪,缺一不可:
- 必须在
onReady生命周期之后调用uni.createVideoContext - 必须等
loadedmetadata或canplay事件触发后再执行videoContext.playbackRate(),否则静默失败 - 不能在
onLoad或组件mounted阶段提前设——此时视频还没初始化
示例正确写法:
onReady() {
this.videoContext = uni.createVideoContext('myVideo')
},
onLoadedMetadata() {
this.videoContext.playbackRate(1.5)
}
H5 端可绕过 uni-app 封装,但要注意 DOM 就绪时机
H5 是唯一能稳定使用原生 video.playbackRate 的平台,但前提是拿到真实的 元素。uni-app 的 组件在 H5 下会渲染为标准 HTML video 标签,所以可以:
- 用
document.querySelector('#myVideo')获取元素(需确保 ID 正确且 DOM 已挂载) - 避免在
v-if切换或懒加载场景下立即查询——DOM 可能尚未插入 - 推荐配合
this.$nextTick或MutationObserver监听元素出现后再操作
错误示例:mounted() { document.getElementById('myVideo').playbackRate = 1.5 } —— 若视频组件是条件渲染,这里大概率报 Cannot set property playbackRate of null。
跨平台统一处理方案:降级提示 + 条件编译隔离逻辑
别试图写一套代码兼容所有平台。App 端就是不支持,强行封装只会掩盖问题。应该用条件编译明确分隔逻辑:
- App 端:隐藏倍速 UI,或显示「App 暂不支持倍速播放」提示
- 微信小程序:启用
onLoadedMetadata+videoContext.playbackRate流程 - H5:用原生
video元素设playbackRate,并监听ratechange事件校验
关键点在于:倍速功能的「可用性判断」不能靠运行时特征检测(比如检查 videoContext.playbackRate 是否为函数),而应直接按平台做静态分支——因为 App 端该方法存在但无效,检测结果具有误导性。











