解决微信小程序视频加载过多黑屏问题

先加载封面图,用户点击后再切换为视频标签
效果:
解决微信小程序视频加载过多黑屏问题_第1张图片
解决微信小程序视频加载过多黑屏问题_第2张图片

<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代码

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;
    }

你可能感兴趣的:(笔记,javascript,前端,uni-app)