先加載封面圖,用戶點擊后再切換為視頻標簽
效果:文章來源:http://www.zghlxwxcb.cn/news/detail-518465.html
<view class="ContainerStudyVideo-live" v-for="(item, index) in datalist" v-bind:key="index">
<view class="ContainerStudyVideo-image">
<image mode="aspectFill" v-if="!item.pause" :src="item.coverImagePath" @click="pauseVideo(item)"></image>
<video
v-else
:id="`myVideo${index}`"
controls
:autoplay="true"
:src.sync="item.videoPath"
:show-center-play-btn="true"
:poster="item.coverImagePath"
:controls="true"
enable-danmu
objectFit="cover"
:danmu-btn="false"
@play="playVideo(index)"
>
</video>
</view>
</view>
js代碼文章來源地址http://www.zghlxwxcb.cn/news/detail-518465.html
this.$http.Get(this.configFun.apiHome.studydataserch,parem).then(res => {
let data = res.content;
if(this.datalist.length < res.totalElements){
this.loadMore = true;
}else{
this.loadMore = false;
}
data.map(item => {
this.$set(item, 'pause', false);
})
this.datalist = this.datalist.concat(data);
})
pauseVideo(item) {
item.pause = true;
}
到了這里,關于解決微信小程序視頻加載過多黑屏問題的文章就介紹完了。如果您還想了解更多內(nèi)容,請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關文章,希望大家以后多多支持TOY模板網(wǎng)!