实现的功能：
微信小程序视频组件添加图片封面,
点击图片播放视频,
点击下一个视频的封面图自动停止播放当前视频并播放点击的视频。

效果GIF图：

实现代码：

WXML：

view class='vv' wx:for='{{vedio_data}}' wx:key=''  view class='block' style='margin-left:20rpx;'    image src='/img/1.png' class='img1' style='margin-left:20rpx'/image    text class='text'{{item.title}} /text    view id="{{index}}" class="cover" style="display: {{ _index == index ? 'none' : 'block' }};" bindtap="videoPlay"      !-- 视频图层 --      image class="videoVideo2" src="{{item.img}}" mode="scaleToFill"        !-- 视频按钮 --        image class="videoPlay" src="/img/bf.png" mode="scaleToFill"/image      /image    /view  /view  !-- 视频 --  video src="{{item.url}}" id="{{index}}" class='video' wx:if="{{_index == index}}"  /video/view

js：

var util = require('../../utils/util');var app = getApp();Page({  data: {    videoPlay: null,    vedio_data: [{      title: '视频标题1',      url: 'http://wxsnsdy.tc.qq.com/105/20210/snsdyvideodownload?filekey=30280201010421301f0201690402534804102ca905ce620b1241b726bc41dcff44e00204012882540400&bizid=1023&hy=SH&fileparam=302c020101042530230204136ffd93020457e3c4ff02024ef202031e8d7f02030f42400204045a320a0201000400',      img: 'https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=1437596250,215562873&fm=26&gp=0.jpg',     }, {        title: '视频标题2',        url: 'http://wxsnsdy.tc.qq.com/105/20210/snsdyvideodownload?filekey=30280201010421301f0201690402534804102ca905ce620b1241b726bc41dcff44e00204012882540400&bizid=1023&hy=SH&fileparam=302c020101042530230204136ffd93020457e3c4ff02024ef202031e8d7f02030f42400204045a320a0201000400',        img: 'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1545625549289&di=4bf95a6bd0d05003dea5598aa516f718&imgtype=0&src=http%3A%2F%2Fi2.hdslb.com%2Fbfs%2Farchive%2F7cec9a37f417277ec1bb62840da6b9d9c2c22f05.jpg',     }]  },  // 点击cover播放，其它视频结束  videoPlay: function(e) {    var _index = e.currentTarget.id    this.setData({      _index: _index    })    //停止正在播放的视频    var videoContextPrev = wx.createVideoContext(this.data._index)    videoContextPrev.stop();    setTimeout(function() {      //将点击视频进行播放      var videoContext = wx.createVideoContext(_index)      videoContext.play();    }, 500)  }})

css：

.vv {width: 700rpx;height: 530rpx;border-left: gainsboro 1px solid;border-right: gainsboro 1px solid;border-top: gainsboro 1px solid;margin-bottom: 80rpx;border-radius: 15rpx;overflow: hidden;position: relative;top: 40rpx;left: 20rpx;} /* 小图标 */.img1 {  width: 36rpx;  height: 28rpx;  margin-top: 30rpx;} /* 标题文字 */.text {  font-size: 28rpx;  color: #585858;  margin-left: 10rpx;} /* 视频 */.video {  width: 100%;  height: 450rpx;  margin-top: 20rpx;  border-bottom-left-radius: 15rpx;  border-bottom-right-radius: 15rpx;}.videoVideo2 {   width: 703rpx;    height: 453rpx;  position: absolute;  top: 80rpx;  left: 20rpx;  z-index: 99;}.videoPlay{  position: absolute;    width: 80rpx;    height: 80rpx;    top:45%;    left: 45%;    margin: -30rpx 0 0 -30rpx;  z-index: 100;} /* 底部盒子 */.bottom {  width: 40rpx;  height: 40rpx;}