小程序 教育平台视频学习打卡

功能

1. 课程学习详情页，点击课程列表自动播放课程视频
2. 视频播放过程中每5分钟弹窗确认进度
3. 弹窗时暂停播放
4. 弹窗时间10秒钟，超时自动退出课程
5. 点击确认进度后自动播放视频
6. 禁止快进
7. 视频播放完停止进度确认弹窗

代码

wxml

video

// enable-progress-gesture 关闭控制进度的手势
// show-progress 展示播放进度
// initial-time 指定视频初始播放位置，单位为秒
<video id="videoCon" enable-progress-gesture="{{false}}"  bindtimeupdate="timeChange" show-progress="{{false}}" bindended="noPop" autoplay="true" initial-time="{{initialTime}}" src="{{videoSrc}}"></video>

弹窗

<view class="fix-bg" wx:if="{{popShow}}"></view>
<view class="confirm" wx:if="{{popShow}}">
 <view class="title">进度打卡</view>
 <view class="txt">进度打卡</view>
 <view class="confirm-btn">
   <van-button block type="default" bind:click="confirmStudy"><van-count-down bind:finish="finished" time="{{ time }}" format="确认（ss 秒）" /></van-button>
 </view>
</view>

.fix-bg{
  position: fixed;
  top: 0;
  left: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.7);
}
.confirm{
  z-index: 3;
  position: fixed;
  top: 45%;
  left: 50%;
  width: 640rpx;
  overflow: hidden;
  font-size: 30rpx;
  background-color: #fff;
  border-radius: 30rpx;
  -webkit-transform: translate3d(-50%, -50%, 0);
  transform: translate3d(-50%, -50%, 0);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  -webkit-transition: 0.3s;
  transition: 0.3s;
  -webkit-transition-property: opacity, -webkit-transform;
  transition-property: opacity, -webkit-transform;
  transition-property: transform, opacity;
  transition-property: transform, opacity, -webkit-transform;
}
.txt{
  -webkit-box-flex: 1;
    -webkit-flex: 1;
    flex: 1;
    max-height: 60vh;
    padding: 30rpx 46rpx;
    overflow-y: auto;
    font-size: 28rpx;
    line-height: 40rpx;
    white-space: pre-wrap;
    text-align: center;
    word-wrap: break-word;
    -webkit-overflow-scrolling: touch;
    padding-top: 15rpx;
    color: #646566;
}
.title{
  padding-top: 30rpx;
  font-weight: 500;
  line-height: 48rpx;
  text-align: center;
}
.confirm-btn{
  overflow: hidden;
  -webkit-user-select: none;
  user-select: none;
  border-top: 1rpx solid #f3f3f3 ;
  font-size: 32rpx;
}
.confirm-btn .van-button,  .confirm-btn .van-count-down{
  color: #1476ff;
  line-height: 95rpx;
  border: none;
}

js

// pages/courseDetails/courseDetails.js
var api = require('../../utils/api.js');
var CONST = require('../../utils/const_str.js');
var util = require('../../utils/utils.js');
Page({

  /**
   * 页面的初始数据
   */
  data: {
  	// 视频地址
    videoSrc: '',
    // 视频起始位置
    initialTime: 0,
    // 进度确认弹窗
    popShow: false,
    // 定时器
    timer:null,
    //弹窗倒计时
    time: 10000，
    // 视频初始化位置
    initPosition: 0,
    // 视频时长
    duration: ''
  },
  // 点击播放视频
  play(event) {
	...
	// 记录当前视频的src、播放初始时间和播放进度
		 let src = event.currentTarget.dataset.src
	    let initialTime = event.currentTarget.dataset.time
	    let index = event.currentTarget.dataset.index
		this.setData({
	      videoSrc: src,
	      initialTime: initialTime,
	      initPosition: initialTime
	    })
      that.showPop()
    ...
  },
  // 视频播放进度获取
  timeChange(info){
    var that = this;
    // 计算当前时间和上一次记录的播放时间是否间隔 5s及以上
    let num = Number(info.detail.currentTime) - Number(that.data.initPosition)
    if (num > 5 || num == 5) {
      that.setData({
        initPosition: info.detail.currentTime,
        duration: info.detail.duration
      })
      // 提交进度
     	...
    }
  },
  // 视频播放结束后触发 清除定时器（不再进度弹窗）
  noPop(){
    clearTimeout(this.data.timer)
    // 再次提交 学习进度
    ...
  },
  // 弹窗确认后触发，隐藏弹窗、播放视频并开启下一轮计时弹窗
  confirmStudy() {
    var that = this;
    clearTimeout(that.data.timer)
    var videoContext = wx.createVideoContext('videoCon', that)
    let timer = setTimeout(() => {
      videoContext.pause()
      this.setData({
        popShow:true
      })
    }, 300000);
    that.setData({
      popShow:false,
      timer: timer
    })
    videoContext.play()
  },
  // 视频播放后开始计时弹窗
  showPop() {
    clearTimeout(this.data.timer)
    // 创造视频上下文环境
    var videoContext = wx.createVideoContext('videoCon', this)
    let timer = setTimeout(() => {
      // 暂停视频，出现弹窗
      videoContext.pause()
      this.setData({
        popShow:true
      })
    }, 300000);
    this.setData({
      timer: timer
    })
  },
  // 弹窗计时结束后未点击确认
  finished() {
    clearTimeout(this.data.timer)
    wx.navigateBack({//返回
      delta: 1
    })
  }