微信小程式 | 視訊設定預設圖片封面，點選播放視訊並停止播放上一個視訊。

這樣就可以避免視訊的預載入，可以節省流量。

目前的bug就是，當前視訊播放著，點選下一個視訊的時候，上個視訊的播放進度會重置為零

解決辦法可以通過video屬性initial-time來設定上個視訊的播放位置，實現並不難，我懶得寫了。

演示例子

這裡是在開發軟體上進行的，沒有顯示播放進度、時間，但是我在手機上預覽時，是有顯示的Σ(⊙▽⊙"a

wxml程式碼

<view class="container">
    <view class="card" wx:for="{{video_collect}}" wx:key="id">
        <view hidden="{{index==current_video?true:false}}" class="video-img" bindtap="hiddenImg" data-index="{{index}}" data-link="{{item.video}}" style="background-image:url({{item.bgImg}});"></view>
        <video hidden="{{index==current_video?false:true}}" autoplay="true" class="video-img" id="myVideo{{index}}" data-index='{{index}}' bindplay="videoPlay" show-mute-btn enable-play-gesture src="{{index==current_video?video_url:''}}"></video>
    </view>
</view>
 

wxss程式碼

.card{
    height: 640rpx;
    width: 100%;
    display: flex;
    justify-content: space-around;
    align-items: center;
}

.video-img{
    height: 480rpx;
    width: 100%;
}

js程式碼

// pages/test/test.js
Page({

  data: {
    // 當前播放視訊的index
    indexCurrent: null,
    current_video: -1,
    // 音訊url集。測試的時候，如果連結過期的話，就自己找幾個對應型別連結替換就行了。
    video_collect: [
      { id: 1, video: "https://f.video.weibocdn.com/u0/ykGecLOQgx07TZn6xubK01041201OTAB0E010.mp4?label=mp4_hd&template=540x960.24.0&trans_finger=61f9ef5eeb81e19b3536a7177427a5ca&ori=0&ps=1CwnkDw1GXwCQx&Expires=1648814046&ssig=QPD%2F5IDghO&KID=unistore,video", bgImg: "https://wx3.sinaimg.cn/orj480/001TVDbigy1gznp5qgtj9j60u0141q6t02.jpg" },
      { id: 2, video: "https://f.video.weibocdn.com/o0/zusXQXIRlx07UWedhVL201041200AZvy0E010.mp4?label=mp4_hd&template=852x480.28.0&ori=0&ps=1BThihd3VLAY5R&Expires=1648814010&ssig=dV3oWNeGOo&KID=unistore,video", bgImg: "https://wx2.sinaimg.cn/orj480/006nwti5gy1h0uculyipsj325j17mb2a.jpg" }
    ],
  },

  // 視訊與封面圖片的切換
  hiddenImg(e) {
    let video_url = e.currentTarget.dataset.link;
    let current_video = e.currentTarget.dataset.index;
    this.setData({
      current_video,
      video_url,
    })
  },

  // 視訊播放控制
  videoPlay: function (e) {
    console.log(e);
    var that = this;
    var curIdx = e.currentTarget.dataset.index;

    // 有播放時先將prev暫停，再播放當前點選的current
    if (that.data.indexCurrent != null) {
      var videoContextPrev = wx.createVideoContext('myVideo' + that.data.indexCurrent)
      if (that.data.indexCurrent != curIdx) {
        videoContextPrev.pause()
      }
      that.setData({
        indexCurrent: curIdx
      })
    } else {  // 沒有播放時播放視訊
      that.setData({
        indexCurrent: curIdx
      })
    }
  },
})