效果圖：

本例子：是圖片和多個視訊混在一起

• html

<view class="case-ul">
      <repeat for="{{list}}" index="index" item="item" key="key">
        <view class="case-li case-view-item">
          <image hidden="{{item.isPlaying}}" style="" class="case-picture" src="{{item.path_url}}" mode="scaleToFill"
 
></image>
          <!-- 是視訊 -->
          <video wx:if="{{item.isPlaying}}" id="video-{{index}}" class="video" src="{{item.video_url}}" controls></video>
          <image wx:if="{{item.type==1}}" hidden="{{item.isPlaying}}" class="bt" mode="scaleToFill" @tap="playVideo({{item
 
}},{{index}})" src="./images/play-bt.png"></image>  <!--前提一個播放的按鈕-->
        </view>
      </repeat>
    </view>

1. list是一個數組
2. type 後臺給我一個標識，0：圖片 。 1：視訊
3. isPlaying 前臺自己新增是否播放視訊

4. path_url 圖片的地址。視屏也會反一個封面截圖，欄位都是path_url

   • js

playVideo(item, index) {
  this.list.forEach(n => {
    n.isPlaying = false
 
;
  })
  this.list[index].isPlaying = true;
  let videoContext = wx.createVideoContext(`video-${index}`)
  videoContext.play()
},