uniapp video视频组件poster视频封面不显示问题

关于poster视频封面不显示问题：1、controls属性必须为true（默认）；2、poster路径必须是网络资源地址，即https；3、视频加载完才行（这个官方没说，所以问题就出在这里）；解决办法就是加个判断，当poster的值加载完成不为空时显示video组件，解决代码如下：<view class="video-item"><vide

孤山剑客扫秋风

5181人浏览 · 2021-12-22 16:45:21

孤山剑客扫秋风 · 2021-12-22 16:45:21 发布

关于poster视频封面不显示问题：

1、controls属性必须为true（默认）；

2、poster路径必须是网络资源地址，即https；

3、视频加载完才行（这个官方没说，所以问题就出在这里）；

解决办法就是加个判断，当poster的值加载完成不为空时显示video组件，解决代码如下：

<!-- 视频区域 -->
<view class="video-item">
    <video id="myVideo" v-if="video.thumb" :poster="video.thumb" style="width: 100%;height: 100%;" :src="video.path"></video>
</view>

视频组件加载

//页面准备好时创建video
onReady: function(res) {
	this.videoContext = uni.createVideoContext('myVideo')
},

//离开页面时暂停视频播放
onHide() {
    this.videoContext.pause();
},