<view wx:for="{{imgUrls}}" wx:key="index"><view class='videocover' data-id="{{index}}" bindtap='playbtn'wx:if="{{index == currentId ? false:true}}"><view class='videocoverbg'></view><image src='../../image/play.png' class='playbtn'></image><image src='{{item.cover}}' mode="widthFix" class='cover'></image></view><view wx:if="{{index == currentId ? true:false}}" ><video class='box-w block' src="{{item.video}}" show-center-play-btn="false" autoplay='{{index === currentId ? true:false}}' objectFit="cover" bindended="jieshu"></video></view><view class='has-padding-sm flex'><view class='f15 flex-1 self-middle'>{{item.title}}</view><view class='m-l10 self-middle'><image src='../../image/share.png' class='ico-share'></image></view></view>  </view>

Page({data: {imgUrls: [{"cover": "http://ozg6qzjmp.bkt.clouddn.com/spfm.jpg","video": "http://ozg6qzjmp.bkt.clouddn.com/misu.mp4","title":"标题1"},{"cover": "http://ozg6qzjmp.bkt.clouddn.com/spfm.jpg","video": "http://ozg6qzjmp.bkt.clouddn.com/misu.mp4","title": "标题2"},{"cover": "http://ozg6qzjmp.bkt.clouddn.com/spfm.jpg","video": "http://ozg6qzjmp.bkt.clouddn.com/misu.mp4","title": "标题3"},{"cover": "http://ozg6qzjmp.bkt.clouddn.com/spfm.jpg","video": "http://ozg6qzjmp.bkt.clouddn.com/misu.mp4","title": "标题3"}]},onLoad: function (options) {},playbtn(e) {var currentId = e.currentTarget.dataset.id;this.setData({"currentId": currentId})},jieshu() {this.pausevideo()},onHide() {this.pausevideo()},onShow(){this.pausevideo()},pausevideo(){this.setData({"currentId": null})}
})

.videocover{ position:relative;width:100%;height:225px;overflow: hidden }
.videocoverbg{ position:absolute;left:0;top:0;right:0;bottom:0;background:rgba(0,0,0,0.3) }
.playbtn{position:absolute;top:50%;z-index:2;left:50%; width:50px;height:50px;transform:translate(-50%,-50%)}
.videocover .cover{width:100%;}
.ico-share{ width:18px; height:18px; display: block}