最近遇到一个需求,为防止用户观看课程时刷机,需要每5分钟自动暂停视频,强迫用户手动继续。 首先在template中放入video标签
<video id="myVideo" :initial-time="initial_time" show-progress=false enable-progress-gesture=false
@timeupdate="bindtimeupdate" @ended="ended" v-if="activeItem.type === 5" class="top-img"
:src="activeItem.fileUrl"></video>
里面有个@timeupdate方法很重要,每秒返回视频播放的时间,我们在这个方法里设个判断的定时器就可以了
const bindtimeupdate = (e) => {
videoTime.value = parseInt(e.detail.duration)
var time = parseInt(e.detail.currentTime)
var times = parseInt(e.detail.duration)
let timeout = setTimeout(() => {
timeout && clearTimeout(timeout)
if (time && (time % 300 == 0)) {
videoContext.value.pause()
}
},1000)}
搞定。