小程序点击图片实现自动播放视频

<view>
 <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. }} </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}}\" >
<!-- log -->
 </video>
 </view>
 <view class=\'di\'>
 <image src=\'/img/qd.png\' class=\'bottom\'></image>
 <text class=\'bottom_text\'>敬请期待</text>
 </view>
</view>

/* 边框 */
.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;
}
 
/* 底部图片 */
.di {
 display: flex;
 flex-direction: row;
 padding: 60rpx 0rpx 100rpx 280rpx;
}
 
/* 底部文字 */
.bottom_text {
 font-size: 34rpx;
 color: #d8d8d8;
 margin-left: 10rpx;
}

// pages/class/class.js
Page({
 /**
 * 页面的初始数据
 */
 data: {
 videoPlay: null,
 
 vedio_data: [{
   : \'无13131（大班）\',
  url: \'xxx\',
  img: \'xxx\',
  
  },
  {
   : \' 如何23 1 、 2 、2423、4）\',
  url: \'xxx\',
  img: \'xxx\'
  },
  {
   : \'温热碍\',
  url: \'xxx\',
  img:\'xxx\'
  },
  {
   : \'挑嘎嘎嘎输\',
  url: \'xxx\',
  img: \'xxx\'
  },
  {
   : \'延伸挑战：运输圆球\',
  url: \'xxx\',
  img:\'xxx\'
  },
 
 ]
 },
 
 // 点击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)
 },
})