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

最新推荐文章于 2024-07-02 13:26:53 发布

它经不起推敲的

最新推荐文章于 2024-07-02 13:26:53 发布

阅读量1.7k

点赞数

分类专栏：笔记文章标签： javascript 前端 uni-app

本文链接：https://blog.csdn.net/m0_46365130/article/details/128530224

版权

笔记专栏收录该内容

63 篇文章 1 订阅

订阅专栏

该代码示例展示了如何在Vue.js应用中创建一个列表，列表项先显示封面图片，用户点击后切换到内嵌视频播放。使用v-if和v-else指令根据pause属性切换图像和视频，并通过@click和@play事件处理视频的播放和暂停。

摘要由CSDN通过智能技术生成

先加载封面图，用户点击后再切换为视频标签
效果：
请添加图片描述

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