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

sakura~~

于 2022-03-23 15:55:49 发布

阅读量8.4k

点赞数

文章标签：前端 vue javascript vue.js

本文链接：https://blog.youkuaiyun.com/weixin_57286220/article/details/123688253

版权

在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 android真机中黑屏 只有声音没有画面

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