vue-video-player 断点续播、快进控制

最新推荐文章于 2024-12-30 11:23:29 发布

拾光的小男孩

最新推荐文章于 2024-12-30 11:23:29 发布

阅读量2.6k

点赞数 22

CC 4.0 BY-SA版权

文章标签： vue.js 前端 javascript

本文链接：https://blog.csdn.net/qq_45852978/article/details/136236512

本文介绍了如何在Vue项目中安装和使用vue-video-player插件，包括在main.js中的引入和配置，以及关键事件如duration变化、canplay、onPlayerTimeupdate和pause的处理，展示了如何控制视频播放、暂停、自动播放和限制快进功能。

1. 安装 video-player

npm install vue-video-player --save

2. main.js 引用

import VideoPlayer from 'vue-video-player'

require('video.js/dist/video-js.css')

require('vue-video-player/src/custom-theme.css')

Vue.use(VideoPlayer)

3. 主要代码

watch: {

duration() {

this.continuePlay();

},

},

//默认加载之后，就会执行该函数

canplay(player) {

this.player = player;

this.duration = player;

if (this.autoPlay) {

// 是否自动播放

this.player.play();

}

},

//当前播放位置发生变化时触发。

onPlayerTimeupdate(player) {

if (this.timeOut != 0) {

this.curr = this.timeOut;

this.oldTime = this.curr;

this.timeOut = 0;

} else {

this.curr = player.cache_.currentTime;

}

if (this.oldTime > this.curr) {

// 回退进度后，可以快进到指定位置 (oldTime的时长搞成视时长实现第二次播放)

return false;

}

// 限制快进

if (this.curr - this.oldTime > 2 && this.courseTaskType != "maybe") {

// 必修课限制快进，选修课不做限制

this.curr = 0;

this.player.currentTime(this.oldTime);

} else {

this.oldTime = this.curr;

}

if (this.courseTaskType != "maybe") {

// 选修课不做限制视频播放途中弹出题目相关

if (this.durationTime < 300) {

let time = this.durationTime / 2;

if (parseInt(this.curr) == parseInt(time)) {

this.videoBulletQuestion(parseInt(time));

}

} else {

let fre = parseInt(this.durationTime / 300); // 次数

for (var i = 0; i < fre; i++) {

let time = (this.durationTime - 40) / fre;

if (parseInt(this.curr) == parseInt(time) * (i + 1)) {

this.videoBulletQuestion(parseInt(time) * (i + 1));

}

}

}

}

},

//点击暂停时触发

pause() {

clearInterval(this.timeid);

if (this.watching) {

return;

}

this.saveTime(); // 保存播放位置

},

loop(currentTime) {

// 视频轮询以计算播放时间

//在这里加入请求，存放目前视频播放的时长，以便下次播放视频，直接跳转

if (this.last != this.curr) {

if (!this.watching) {

// 视频没播放完

if (this.curr - this.last > 10) {

this.saveTime();

this.last = this.curr;

}

}

}