目錄

1.安裝插件

2.Main.js 引入組件

3.頁面使用組件

4.進度保存

4.進度恢復

---

最近的項目中需要實現視頻斷點續播的功能，一聽到這個功能。內心方張了..但卻又有點小竊喜，小懵亂。抱著求學態度去挑戰一下。

1.安裝插件

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.頁面使用組件

<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"class="video-player vjs-custom-skin"style="width: 1000px;height: 576px;display: inline-flex":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: '', //用戶idchapterId:'',//章節idtimeLog: '', //視頻觀看時長},playerOptions: {playbackRates: [0.5, 1.0, 1.5, 2.0], //播放速度autoplay: false, // 如果true,瀏覽器準備好時開始回放。muted: false, // 默認情況下將會消除任何音頻。loop: false, // 導致視頻一結束就重新開始。preload: 'auto', // 建議瀏覽器在<video>加載元素后是否應該開始下載視頻數據。auto瀏覽器選擇最佳行為,立即開始加載視頻（如果瀏覽器支持）language: 'zh-CN',aspectRatio: '16:9', // 將播放器置于流暢模式，并在計算播放器的動態大小時使用該值。值應該代表一個比例 - 用冒號分隔的兩個數字（例如"16:9"或"4:3"）fluid: true, // 當true時，Video.js player將擁有流體大小。換句話說，它將按比例縮放以適應其容器。sources: [{type: 'video/mp4', // 這里的種類支持很多種：基本視頻格式、直播、流媒體等，具體可以參看git網址項目src: ''// url地址}],hls: true,poster: '', // 你的封面地址width: document.documentElement.clientWidth, // 播放器寬度notSupportedMessage: '此視頻暫無法播放，請稍后再試', // 允許覆蓋Video.js無法播放媒體源時顯示的默認信息。controlBar: {//當前時間和持續時間的分隔符timeDivider: true,//顯示持續時間durationDisplay: true,//是否顯示剩余時間功能remainingTimeDisplay: false,//全屏按鈕fullscreenToggle: true}}}; }, computed: {player() {return this.$refs.videoPlayer.player//自定義播放}}, mounted () {this.timer = setInterval(this.putLearningObj, 3000)}, destroyed () {// 如果定時器在運行則關閉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.playerplayer.requestFullscreen()//調用全屏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);},//當前播放位置發生變化時觸發。onPlayerTimeupdate (player) {// console.log(' onPlayerTimeupdate!', this.timeLog)},/* 設置視頻進度 */playerReadied: function (player) {}, }; </script>

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

/** 查詢部門下拉樹結構 */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].chapterNamethis.videoIntroduce = this.ChapterOptions[0].children[0].chapterIntroducethis.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];}//初始化第一個章節視頻for (let j = 0; j <this.VideoUrl.length ; j++) {this.playerOptions.sources[0].src = this.VideoUrl[0]}//初始化章節this.learningDuration.chapterId = this.ChapterOptions[0].children[0].id;//默認高亮第一個章節節點this.$nextTick(()=>{this.$refs.tree.setCurrentKey(this.ChapterOptions[0].children[0].id);})}});},// 篩選節點filterNode(value, data) {if (!value) return true;return data.label.indexOf(value) !== -1;},// 節點單擊事件handleNodeClick(data) {// console.log(data)var img = '';//刷新原視頻, 原封面this.playerOptions.sources[0].src = '';this.playerOptions.poster = '';//轉換視頻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)//章節介紹this.videoIntroduce = data.chapterIntroduce;//章節名稱this.videoName = data.chapterName;//章節idthis.learningDuration.chapterId = data.id// console.log(this.videoIntroduce)},

4.進度保存

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

computed: {player() {return this.$refs.videoPlayer.player//自定義播放}},mounted () {this.timer = setInterval(this.putLearningObj, 3000)},destroyed () {// 如果定時器在運行則關閉if (this.timer) {clearInterval(this.timer)}}, methods: { putLearningObj () {if (!this.paused) {//保存視頻進度saveTime(this.learningDuration)console.log('putLearningObj ~~~~~~~~~')}}, //當前播放位置發生變化時觸發。 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.進度恢復

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

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

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

總結

以上是生活随笔為你收集整理的vue-video-player 断点续播的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。