uniapp video android真机中黑屏 只有声音没有画面

在uniapp中使用video组件时遇到页面重新加载后视频黑屏但有声音的bug。通过在onShow时启动播放,在onHide时暂停播放,可以有效避免该问题。代码示例中展示了如何利用uni.createVideoContext进行控制,确保视频在页面显示时正确播放,离开时暂停,从而消除黑屏现象。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

在使用uniapp的video组件的时候,遇到进入页面播放正常,但再次进入重新加载页面后,会出现黑屏但有声音的问题。
因为需求是要在离开页面后不再播放视频,所以这里在onShow时绑定视频组件,并开始播放:

<video id="myVideo" :src="videosrc" object-fit="cover" :autoplay="true" loop="true" controls="false" custom-cache="false" enable-play-gesture="false" poster="thumba"></video>
onShow() {
			this.videoContext = uni.createVideoContext('myVideo')
			this.videoContext.play()
			},

在onHide时暂停播放:

onHide() {
			this.videoContext.pause()
		},

就可以达到效果,并且不会再出现黑屏问题。

### UniApp Video 组件黑屏解决方案 当遇到 `DOMException: The element has no supported sources` 错误并伴随视频播放黑屏的情况时,这通常意味着所使用的视频源格式不受当前环境的支持。为了有效解决问题,可以从以下几个方面入手: #### 1. 确认视频文件格式兼容性 不同平台对于视频格式的支持存在差异。确保选用广泛被支持的 MP4 格式作为视频资源[^2]。 #### 2. 设置正确的属性配置 适当设置 `<video>` 标签的相关属性可以提高跨平台适配性和稳定性。例如启用自动播放功能以及循环模式可能有助于某些场景下的正常工作: ```html <video id="myVideo" src="your_video_url.mp4" controls autoplay loop></video> ``` #### 3. 处理原生组件层级问题 考虑到 uni-app 中 video 是一个原生组件,在 app 端其渲染层次较高,可能导致其他自定义视图无法覆盖该组件的现象。针对这种情况,官方建议采用特定方法调整布局结构来规避此影响[^3]。 #### 4. 检查网络请求状态 确认视频 URL 地址能够成功加载,并且服务器返回的状态码为 200 OK。此外还需注意 CORS 跨域资源共享策略是否已正确配置,以免因权限不足而导致资源获取失败。 #### 5. 更新至最新版本框架 保持开发工具和依赖库处于最新稳定版可以帮助避免一些潜在的技术债务带来的麻烦。定期更新项目依赖项能减少此类错误发生的概率。 通过上述措施应该可以在很大程度上缓解甚至彻底消除 UniApp 应用程序内使用 video 组件过程中遭遇的黑屏困扰。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值