小程序激励视频观看超过30秒，获取奖励

---

需求是这样子的，小程序里面插入了video标签，拥有视频功能，用户看视频超过30秒时候，会显示弹框弹出奖励

//插入视频
//bindplay监听播放，bindpause监听暂停，bindended监听结束
 <video id="myVideo" objectFit="contain" autoplay="true"
  		enable-progress-gesture="{{false}}" bindtap='pause' 
  		bindplay='bindplay' bindpause='bindpause' bindended="bindended"
        src="{{videoUrl}}">
 </video>
 //弹框 visible控制显示
 <view class='modal' wx:if='{{visible}}'></view>

思路：

1.在视频开始播放的时候开始计时；
2.在视频暂停的时候，记录下时间；
3.如果有暂停，需要计算开始到暂停之间的时间，当视频暂停后又开始播放，需要重新记录开始播放的时间；
4.所有时间相加，大于30秒满足条件跳出弹框

//设一个全部变量，开始时间
var thisData;
 data: {
 visible:false,//模态框是否显示
 lastTime:null,// 最后时间
 isClick:false,//是否点击过暂停
 	}

 //监听播放，播放时候开始计算时间，获取当前的时间
    bindplay: function () {
        thisData = new Date();
    },

//监听暂停
 bindpause: function () {
     //暂时时候时间
     //当前时间减去已经播放的时间 存入一个变量   然后重新计算开始时间
     var passTime = parseInt(new Date() - thisData) / 1000;
     var lastTime = this.data.lastTime == null ? 0 : this.data.lastTime;
     this.data.lastTime = parseInt(lastTime + passTime);
     //lastTime大于30 秒的时候弹弹框
     if (this.data.lastTime >= 30) {
     this.setData:{
    	 isClick:true
     }
     //调用视频奖励方法
         this.getVideoStep();
     }
 },

//监听视频结束，视频结束的时候也会弹弹框
bindended:function(){
       //谈过弹窗就不再显示，
      var passTime = parseInt(new Date() - thisData) / 1000;
      var lastTime = this.data.lastTime == null ? 0 : this.data.lastTime;
      this.data.lastTime = parseInt(lastTime + passTime);
       if(!that.data.isClick && this.data.lastTime >= 30){
           that.getVideoStep();
       }
   },

//获取奖励步数
 getVideoStep:function(){
       wx.request({
 		 url: 'test.php', //仅为示例，并非真实的接口地址
 		 data: { },
 			success (res) {
 			this.setData({  
 			//显示弹框             
                 visible: true 
             });
 		 }
 		})
 },

ok，整个流程已经结束，写的比较乱，参考着看一下吧，用的最笨的方法