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

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