監(jiān)聽視頻進度,完成視頻試看功能

前端監(jiān)聽視頻播放進度,在試看結(jié)束后做一些操作
html:

<!-- poster為視頻封面,timeupdate為視頻播放進度事件,每250毫秒觸發(fā)一次(但是不準) --> <video :src="class_info.video_audio_url"id="myVideo":poster="imgurl" @timeupdate="videoTimeUpdateEvent"> </video>

script:

data() {return {videoContext: {}, // 用于綁定視頻標簽} }, created() {// 創(chuàng)建視頻實例指向視頻控件this.videoContext = uni.createVideoContext('myVideo'); }, videoTimeUpdateEvent(e) { // 播放進度改變// e.detail.currentTime為每次觸發(fā)時,視頻的當前播放時間let currentTime = Number(e.detail.currentTime);console.log('播放進度條改變', currentTime)// 試看結(jié)束 this.class_info.freed_time為試看時間if (currentTime >= this.class_info.freed_time) {// 試看結(jié)束,在這做一些想做的操作,例如停止視頻播放this.videoContext.exitFullScreen();this.videoContext.pause();this.videoContext.seek(0);} },

ok,完成!

總結(jié)

以上是生活随笔為你收集整理的uniapp监听视频播放进度,完成视频试看操作的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。