程式碼主要實現視訊列表中當播放當前視訊需要點選下一個的時候，上一個視訊關閉，點選視訊播放上一個視訊並顯示封面和標題（回到當初的面貌）

1.wxml檔案

注：這裡我沒有寫for迴圈，列舉三個表達下效果。myVideo1可以代表為傳過來的視訊id

{{ index == 1 ? ‘none’ : ‘block’ }};" id=“1” 中的1代表傳過來的id，在實際操作中自己加上：如 {{ index == id? ‘none’ : ‘block’ }} 即可

<view>
  <view  class="video">
    <video id="myVideo1" class="myVideo"  src="http://video.pearvideo.com/mp4/adshort/20181117/cont-1477753-13248875_adpkg-ad_hd.mp4" custom-cache="{{false}}" >
    </video>
    <view style="display: {{ index == 1 ? 'none' : 'block' }};" id="1">
    <cover-view class="controls" id="controls" >
    //封面圖片
    <cover-image src="http://image2.pearvideo.com/cont/20181117/cont-1477753-11703578.png" />
    </cover-view>
    <cover-view class="title" style="z-index:200;color:#FFF;font-size:15px;">CNN起訴川普政府案宣判，CNN獲勝CNN起訴川普政府案宣判，CNN獲勝</cover-view>
    <cover-view class="play" style="z-index:200;">
    //中間的播放圖片標誌
    <cover-image bindtap="bindplay" data-id="1" src="../../img/play.png" style="width:160rpx;"/>
    </cover-view>
    </view>
    <view class="info"><image src="http://image.pearvideo.com/node/35-10030502-logo.jpg" class="avatar"  ></image><span id="name">看看新聞</span></view>
</view>
<view style="clear:both"></view>

<view  class="video">
    <video id="myVideo2" class="myVideo"  src="http://video.pearvideo.com/mp4/adshort/20181116/cont-1477146-13247738_adpkg-ad_hd.mp4" custom-cache="{{false}}">
    </video>
    <view style="display: {{ index == 2 ? 'none' : 'block' }};">
    <cover-view class="controls" >
    <cover-image src="http://image.pearvideo.com/cont/20181116/cont-1477146-11703021.jpeg" />
    </cover-view>
    <cover-view class="title" style="z-index:200;color:#FFF;font-size:15px;">靚聲界男神陳奕迅英音讀《小王子》</cover-view>
    <cover-view class="play" style="z-index:200;">
    <cover-image bindtap="bindplay" data-id="2" src="../../img/play3.png" style="width:140rpx;" />
    </cover-view>
    </view>
<view class="info"><image src="http://image.pearvideo.com/node/19-10027896-logo.jpg" class="avatar"  ></image><span id="name">眼鏡兒</span></view>
</view>
<view style="clear:both"></view>



<view  class="video">
    <video id="myVideo3" class="myVideo"  src="http://video.pearvideo.com/mp4/short/20181118/cont-1478240-13253290-hd.mp4" custom-cache="{{false}}">
    </video>
    <view style="display: {{ index == 3 ? 'none' : 'block' }};">
    <cover-view class="controls" >
    <cover-image src="http://image1.pearvideo.com/cont/20181118/cont-1478240-11705317.png" />
    </cover-view>
    <cover-view class="title" style="z-index:200;color:#FFF;font-size:15px;">設計賽評委：重慶是生機勃勃的城市</cover-view>
    <cover-view class="play" style="z-index:200;">
    <cover-image bindtap="bindplay" data-id="3" src="http://image2.pearvideo.com/cont/20181117/cont-1477753-11703578.png" style="width:160rpx;" />
    </cover-view>
    </view>    
<view class="info"><image src="http://image.pearvideo.com/node/1548-10523493-logo.png" class="avatar"  ></image><span id="name">梨重慶</span></view>
</view>
<view style="clear:both"></view>
</view>
 

2. js

Page({
  /**
   * 頁面的初始資料
   */
  data: {
    videoimage: "block" ,//預設顯示封面
    bindplay: null,
    _index:0,
  },
  //點選播放按鈕，封面圖片隱藏,播放視訊
  bindplay: function (e) {
    var index = e.currentTarget.dataset.id;
    var that = this;
    this.setData({
      index: index
    })
    //停止正在播放的視訊
    var videoContextPrev = wx.createVideoContext("myVideo" + that.data._index)
    videoContextPrev.seek(0)
    videoContextPrev.pause()

    setTimeout(function () {
      //將點選視訊進行播放
      var videoContext = wx.createVideoContext('myVideo' + index)
      videoContext.play();
      that.data._index = index;
    }, 100)
  },
})

 

3.wcss

.myVideo{ 
  width:100%;
  height: calc(9 * 750rpx / 16);
  background-color: #fff;
}
.controls{
  position:absolute;
  z-index:1; 
  background-color: #fff;    
  height: calc(9 * 750rpx / 16); 
  margin-top:-430rpx;
}
.play{ 
    position:absolute;
    left:50%;
    margin-top:-300rpx;
    margin-left:-80rpx;    
}
.title{
  position:absolute;
  white-space: normal;
   width:700rpx;
   margin-left:15px;
   margin-right:30px;
  margin-top:-410rpx;
}
.video{
  margin-top:15px;
}
.avatar {
  position:absolute;
  display: block;
  width: 56rpx;
  height: 56rpx;
  margin-top: 5rpx;
  margin-left: 30rpx;
  border-radius: 50%;
}
#name{
float: left;
  font-size:15px;
  margin-left:50px;
  margin-top:3px;
}

 

好了，分享完了，趕快去試下吧！