uni-app video组件跨端兼容核心问题是平台原生渲染差异:h5用原生video、ios用avplayer、android用videoview、小程序无hls支持且禁自动播放,需按端适配https、muted硬编码、v-if重载src等策略。

uni-app 的 video 组件在 H5 和 App 端基本可用,但小程序端(尤其微信)存在原生限制,自动播放、静音、封面图等行为必须严格满足平台策略,否则直接失效。
video 自动播放失败的常见原因和绕过方式
微信小程序和 iOS Safari 对 autoplay 有强限制:未静音 + 无用户手势触发 = 拒绝播放。即使你写了 autoplay="true" muted="true",也得确保同时满足以下条件:
-
muted必须为true,且不能是动态绑定(比如:muted="isMuted"),得写死为muted="true"; - 视频资源需托管在 HTTPS 域名下,本地
file://或 HTTP 地址会触发安全拦截; - H5 端若用 iOS 微信内置浏览器,还需加
playsinline="true"和webkit-playsinline="true"属性,否则强制全屏; - App 端(iOS)需在
manifest.json → App 模块配置中勾选VideoPlayer模块,否则打包后video标签可能降级为黑屏或白屏。
src 动态切换不生效?试试 v-if 强制重载
直接修改 :src 绑定值,video 组件往往不会重新加载——这是 Webview 渲染机制导致的缓存行为。尤其在直播流地址(如 .m3u8)切换时,旧连接可能残留。
更可靠的做法是用 v-if 控制组件销毁重建:
<video v-if="videoKey" :src="currentSrc" autoplay muted></video>
切换时只需更新 videoKey(如 this.videoKey = Date.now()),触发 Vue 重新挂载整个 video 实例。
注意:live-player 组件不支持此法,它只在小程序中存在,且 src 变更需配合 replay 方法或销毁重建(通过 v-if + $nextTick)。
controls、poster、danmu-btn 这些属性的坑点
controls 控制条在不同平台表现差异大:
- App 端默认显示,设为
false后仍可能残留进度条(尤其 Android); - 微信小程序设
controls="false"后,show-center-play-btn才真正生效; -
poster封面图必须是可访问的 HTTPS 图片,本地路径(如../../static/cover.jpg)在小程序中无效; -
danmu-btn是个“一次性开关”:初始化渲染后无法动态修改,想隐藏弹幕按钮只能在首次创建组件时就设为false。
App 端 video 播放黑屏或无声的排查重点
App 打包后出现黑屏,大概率不是代码问题,而是构建环节漏了关键配置:
- 检查
manifest.json → App 模块配置是否勾选了VideoPlayer; - Android 平台还需确认是否手动放入了对应版本的播放器 SDK(如
videoplayer-release.aar)到nativeplugins/VideoPlayer/android/目录; - iOS 需确认
uni-app项目是否启用了Use Legacy Swift Language Version(Xcode 构建时常见报错Undefined symbol: _OBJC_CLASS_$_AVPlayerViewController即由此引发); - 避免在
video外层套cover-view——它仅支持特定子组件,video不在其列,会导致遮挡或渲染异常。
最常被忽略的是:App 端的 video 组件依赖原生模块,而这个依赖不会随代码自动注入,必须人工干预 manifest 和 nativeplugins 目录。











