最近的項目中需要實現(xiàn)視頻斷點續(xù)播的功能，一聽到這個功能。內(nèi)心方張了..但卻又有點小竊喜，小懵亂。抱著求學(xué)態(tài)度去挑戰(zhàn)一下。

npm install vue-video-player --save2.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.頁面使用組件

<el-tree :data='ChapterOptions' :props='defaultProps' node-key=’id’ highlight-current :filter-node-method='filterNode' ref='tree' default-expand-all @node-click='handleNodeClick' /><video-player ref='videoPlayer' :playsinline='true':options='playerOptions'@pause='onPlayerPause($event)'@ended='onPlayerEnded($event)'@play='onPlayerPlay($event)'@timeupdate='onPlayerTimeupdate($event)'@ready='playerReadied' /><script>import { videoPlayer } from ’vue-video-player’import ’video.js/dist/video-js.css’import ’vue-video-player/src/custom-theme.css’import { treeselect } from '@/api//driver/videoChapter';import Treeselect from '@riophae/vue-treeselect';import '@riophae/vue-treeselect/dist/vue-treeselect.css';export default { name: 'videoPlayer', components: { Treeselect,videoPlayer }, data() { return { //用戶信息 user:{}, //=============================== paused: true, learningDuration: { userId: ’’, //用戶id chapterId:’’,//章節(jié)id timeLog: ’’, //視頻觀看時長 }, playerOptions: { playbackRates: [0.5, 1.0, 1.5, 2.0], //播放速度 autoplay: false, // 如果true,瀏覽器準(zhǔn)備好時開始回放。 muted: false, // 默認情況下將會消除任何音頻。 loop: false, // 導(dǎo)致視頻一結(jié)束就重新開始。 preload: ’auto’, // 建議瀏覽器在<video>加載元素后是否應(yīng)該開始下載視頻數(shù)據(jù)。auto瀏覽器選擇最佳行為,立即開始加載視頻（如果瀏覽器支持） language: ’zh-CN’, aspectRatio: ’16:9’, // 將播放器置于流暢模式，并在計算播放器的動態(tài)大小時使用該值。值應(yīng)該代表一個比例 - 用冒號分隔的兩個數(shù)字（例如'16:9'或'4:3'） fluid: true, // 當(dāng)true時，Video.js player將擁有流體大小。換句話說，它將按比例縮放以適應(yīng)其容器。 sources: [ { type: ’video/mp4’, // 這里的種類支持很多種：基本視頻格式、直播、流媒體等，具體可以參看git網(wǎng)址項目 src: ’’// url地址 } ], hls: true, poster: ’’, // 你的封面地址 width: document.documentElement.clientWidth, // 播放器寬度 notSupportedMessage: ’此視頻暫無法播放，請稍后再試’, // 允許覆蓋Video.js無法播放媒體源時顯示的默認信息。 controlBar: { //當(dāng)前時間和持續(xù)時間的分隔符 timeDivider: true, //顯示持續(xù)時間 durationDisplay: true, //是否顯示剩余時間功能 remainingTimeDisplay: false, //全屏按鈕 fullscreenToggle: true } } };},computed: { player() { return this.$refs.videoPlayer.player//自定義播放 } },mounted () { this.timer = setInterval(this.putLearningObj, 3000) },destroyed () { // 如果定時器在運行則關(guān)閉 if (this.timer) { clearInterval(this.timer) } },methods: { //用戶信息 getUser() { getUserProfile().then(response => { this.user = response.data; this.learningDuration.userId = this.user.userId }); }, //============================ fullScreen() { const player = this.$refs.videoPlayer.player player.requestFullscreen()//調(diào)用全屏api方法 player.isFullscreen(true) player.play() }, onPlayerPlay(player) { this.paused = false // player.play() }, onPlayerPause (player) { this.paused = true // console.log(’onPlayerPause!’, player) }, onPlayerEnded (player) { this.paused = false; // clearInterval(this.timer); }, //當(dāng)前播放位置發(fā)生變化時觸發(fā)。 onPlayerTimeupdate (player) { // console.log(’ onPlayerTimeupdate!’, this.timeLog) }, /* 設(shè)置視頻進度 */ playerReadied: function (player) { },};</script>

上面的 src視頻地址可以換成具體的地址串,也能換成后臺的地址串，因為我的是章節(jié)樹所以我和章節(jié)id進行了關(guān)聯(lián)

/** 查詢部門下拉樹結(jié)構(gòu) */ getTreeselect() { treeselect().then((response) => { //封面 var img = ’’; this.ChapterOptions = response.data; for (let i = 0; i <this.ChapterOptions.length ; i++) { this.videoName = this.ChapterOptions[0].children[0].chapterName this.videoIntroduce = this.ChapterOptions[0].children[0].chapterIntroduce this.VideoUrl = JSON.parse(this.ChapterOptions[0].children[0].videoAddress) img = JSON.parse(this.ChapterOptions[0].children[0].imageAddress) //初始化封面 for (let j = 0; j <img.length ; j++) { this.playerOptions.poster =img[0]; } //初始化第一個章節(jié)視頻 for (let j = 0; j <this.VideoUrl.length ; j++) { this.playerOptions.sources[0].src = this.VideoUrl[0] } //初始化章節(jié) this.learningDuration.chapterId = this.ChapterOptions[0].children[0].id; //默認高亮第一個章節(jié)節(jié)點 this.$nextTick(()=>{ this.$refs.tree.setCurrentKey(this.ChapterOptions[0].children[0].id); }) } }); }, // 篩選節(jié)點 filterNode(value, data) { if (!value) return true; return data.label.indexOf(value) !== -1; }, // 節(jié)點單擊事件 handleNodeClick(data) { // console.log(data) var img = ’’; //刷新原視頻, 原封面 this.playerOptions.sources[0].src = ’’; this.playerOptions.poster = ’’; //轉(zhuǎn)換視頻 this.VideoUrl= JSON.parse(data.videoAddress); // console.log('this.VideoUrl') for (let i = 0; i <this.VideoUrl.length ; i++) { this.playerOptions.sources[0].src = this.VideoUrl[0]; } img = JSON.parse(data.imageAddress); for (let i = 0; i <img.length ; i++) { this.playerOptions.poster = img[0]; } // console.log('this.playerOptions.sources[0].src') // console.log(this.playerOptions.sources[0].src) //章節(jié)介紹 this.videoIntroduce = data.chapterIntroduce; //章節(jié)名稱 this.videoName = data.chapterName; //章節(jié)id this.learningDuration.chapterId = data.id // console.log(this.videoIntroduce) },

4.進度保存

接下來就是 保存視頻的進度條了，通過打印發(fā)現(xiàn)onPlayerTimeupdate可獲取到視頻的進度，故采用定時器 每3秒觸發(fā)一次數(shù)據(jù)交互

computed: { player() { return this.$refs.videoPlayer.player//自定義播放 } }, mounted () { this.timer = setInterval(this.putLearningObj, 3000) }, destroyed () { // 如果定時器在運行則關(guān)閉 if (this.timer) { clearInterval(this.timer) } },methods: { putLearningObj () { if (!this.paused) { //保存視頻進度 saveTime(this.learningDuration) console.log(’putLearningObj ~~~~~~~~~’) } },//當(dāng)前播放位置發(fā)生變化時觸發(fā)。onPlayerTimeupdate (player) { this.learningDuration.timeLog = player.cache_.currentTime // console.log(’ onPlayerTimeupdate!’, this.timeLog) },},

saveTime是我自定義的與后端交互的方法。（可自行定義）

// 保存視頻進度export function saveTime(data) { return request({ url: ’/***/****/***/’, method: ’put’, data: data })}

那么到了這一步 進度就能保存下來了

4.進度恢復(fù)

想要恢復(fù)進度，就必須在視頻播放前把 保存進度下來的設(shè)置到視頻當(dāng)中，通過打印可以看出playerReadied 可以設(shè)置

/* 設(shè)置視頻進度 */playerReadied: function (player) {//可在此調(diào)用后臺交互方法...player.currentTime(this.learningDuration.timeLog)},

到此 進度可以 恢復(fù)了 大功告成！。至于后臺交互數(shù)據(jù) 需求不一樣，代碼也就沒有貼出來。

到此這篇關(guān)于vue-video-player 斷點續(xù)播的文章就介紹到這了,更多相關(guān)vue video player 斷點續(xù)播內(nèi)容請搜索好吧啦網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持好吧啦網(wǎng)！