关于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();
},
Logo

华为开发者空间,是为全球开发者打造的专属开发空间,汇聚了华为优质开发资源及工具,致力于让每一位开发者拥有一台云主机,基于华为根生态开发、创新。

更多推荐