(共556篇)
全部分类

H5通过Video标签视频播放试看功能
[ 未分类 ] 

需求:

视频播放时要根据需求开启试看功能,超过设置的试看时间则不能再进行播放

描述:

video标签本身不带时间试看限制API, 但是却可以通过自带的其他API组合来进行模拟功能的实现

实现:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
// step1. 获取视频dom节点,用以对视频进行操作
const video = document.querySelector(".video_box");
// 视频可试看的时间(秒)
const freeTime = videoInfo.freeTime;
let timeDisplay;
// step1.1 如没有默认播放,可以手动触发
    video.play();
    // step2 监听Video的timeupdate事件,当时视频正在播放时会触发该监听
    video.addEventListener( "timeupdate", () => {
        // step2.1 获取当前播放进度
        timeDisplay = Math.floor(video.currentTime);
        // step2.2 如果视频当前进度时间大于免费试看时间进行处理
        if (freeTime !== -1 && timeDisplay > freeTime) {
          // 这步将进度条重置为可试看最大时间
          video.currentTime = freeTime;
          // 直接暂停
          video.pause();
          let msg = "该视频可试看" + freeTime / 60 + "分钟";
          if (freeTime === 0) {
            msg = "该视频不可试看";
          }
          vant.Toast({ message: msg });
        }
      },
      false
    );