小程序video组件懒加载的实现方式

最近小龙宝宝相册改版了几次，发现小程序每次进来都是自动加载所有的video，即便用户并不打算看，这样就无端的浪费掉了很多流量。原来的代码如下：

<video src="{{resource.url}}" poster="{{resource.cover_url}}" play-btn-position=\'center\' objectFit="contain" controls duration="{{resource.duration}}"></video>

后来尝试动态设置src属性，在电脑上调试没问题，但是到手机上真机调试就不行了，直接显示黑屏，点击后data里面是改好的，但是视图层就是没反应。代码如下：

<!-- 当点击video组件的时候把url_lazy设置成真实的url -->

<video src="{{resource.url_lazy}}" poster="{{resource.cover_url}}" play-btn-position=\'center\' objectFit="contain" controls duration="{{resource.duration}}" bindtap="startPlay"></video>

startPlay(e){
	var resource = this.data.resource
	resource.url_lazy = resource.url
	this.setData({
		resource: resource
	})
}

继续探索别的办法，尝试在video上覆盖一层封面图，然后点击的时候再把video组件渲染出来，再添加一个autoplay，这次终于成功了，代码如下：

<video src="{{resource.url}}" poster="{{resource.cover_url}}" play-btn-position=\'center\' objectFit="contain" controls autoplay duration="{{resource.duration}}" wx:if=\'{{videoShow}}\'></video>

<image src="{{resource.cover_url}}" mode="aspectFill"  wx:if="{{!videoShow}}" bindtap=\'startPlay\'></image>

<view class="play-button-div" bindtap=\'startPlay\' wx:if="{{!videoShow}}">
	<view class="play-button">
        	<image src="../../images/play.png"></image>
        </view>
</view>

startPlay(e){
	var videoShow = this.data.videoShow 
	videoShow = true
	this.setData({
		videoShow: videoShow 
	})
}