微信小程序 | 视频设置默认图片封面，点击播放视频并停止播放上一个视频

微信小程序 | 视频设置默认图片封面，点击播放视频并停止播放上一个视频。

这样就可以避免视频的预加载，可以节省流量。

目前的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
      })
    }
  },
})