小程序激励视频观看超过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,整个流程已经结束,写的比较乱,参考着看一下吧,用的最笨的方法