android小程序video全屏按钮无响应,需同时启用controls="true"和enable-danmu="true"(微信/支付宝),真机验证优先,x5内核下加x5-video-player-type="h5"解决黑屏,cover-view全屏时失效属设计限制。

小程序 Android 全屏按钮点击无响应?先检查 controls 和 enable-danmu 是否双启用
微信/支付宝小程序里,video 组件的原生全屏按钮在部分 Android 机型(尤其是 X5 内核)上点不动,大概率不是代码写错,而是控件层被裁剪了。微信基础库要求 controls="true" 和 enable-danmu="true" 同时存在,哪怕你根本不用弹幕——缺一不可,否则全屏图标直接不渲染或禁用。
- 务必显式写成:
<video :src="url" controls="true" enable-danmu="true"></video> - 别用布尔绑定如
:controls="true",小程序模板解析对动态属性支持不稳定,老老实实写死字符串值 - 支付宝小程序同理,但部分低版本还需加
show-fullscreen-btn="true"
真机有效但开发者工具失效?别信模拟器,优先真机验证 + 条件编译隔离
微信开发者工具的 video 全屏逻辑和真机差异极大:iOS 模拟器走 WKWebView,Android 模拟器常 fallback 到老旧内核,而真机跑的是 X5 或系统 WebView。很多“点不动”问题只在真机复现,工具里一切正常。
- 调试必须用真机,且区分机型:X5 内核(微信安卓、QQ 浏览器)和 Chromium 内核(Edge、部分国产浏览器)行为不同
- 若需差异化处理,用条件编译:
#ifdef MP-WEIXIN包裹全屏逻辑,#ifdef APP-PLUS单独处理 App 端 - 避免在
@canplay里调requestFullScreen(),必须等用户手势(如按钮@click)触发,否则 iOS 和部分安卓静默失败
全屏后黑屏/有声无画?加 x5-video-player-type="h5" 强制 H5 播放器
微信安卓端常见现象:点击全屏后能听到声音,但画面卡住或纯黑。这是 X5 内核默认启用“同层播放器”导致的渲染冲突,尤其当视频源是 HTTP 或跨域时更敏感。
- 在
video标签上硬加上:x5-video-player-type="h5" - 进阶可补:
x5-video-player-fullscreen="true" webkit-playsinline playsinline x-webkit-airplay="allow" - 注意:
webkit-playsinline和playsinline必须同时写,且值为字符串"true"或空字符串,不能写成布尔绑定 - H5 端同样适用,但需配合
manifest.json中"orientation": "all"才能横屏全屏
cover-view 在全屏时消失?这不是 bug,是设计限制
很多开发者试图用 cover-view 盖在 video 上做自定义全屏按钮,结果一进全屏就消失。这不是兼容性问题,而是小程序明确设计:全屏状态下 video 进入原生 SurfaceView 层,cover-view 只存在于 WebView 层,自然无法渲染。
- 别折腾
v-if切换或z-index,无效 - 真要覆盖,只认两个方案:① 全屏前用
subNVue预加载 UI 层(需pages.json配置position: "dock"),② 改用原生插件封装播放器 -
subNVue的zIndex必须 ≥ 9999,且定位基于窗口而非页面,滚动时容易“钉死”,需手动监听scroll调整坐标
videoContext 失效——这些都不是孤立问题,而是同一套原生生命周期在不同平台上的撕裂表现。别指望一个 API 调用解决所有端,每个平台都得单独验、单独压测。











