最近的項目中需要實現(xiàn)視頻斷點續(xù)播的功能，一聽到這個功能。內(nèi)心方張了..但卻又有點小竊喜，小懵亂。抱著求學態(tài)度去挑戰(zhàn)一下。
1.安裝插件
|
1
|
npm install vue-video-player --save |
2.Main.js 引入組件
|
1
2
3
4
|
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.頁面使用組件
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
|
<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: '', //用戶id chapterId:'',//章節(jié)id timeLog: '', //視頻觀看時長 }, playerOptions: { playbackRates: [0.5, 1.0, 1.5, 2.0], //播放速度 autoplay: false, // 如果true,瀏覽器準備好時開始回放。 muted: false, // 默認情況下將會消除任何音頻。 loop: false, // 導致視頻一結(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, // 當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: { //當前時間和持續(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); }, //當前播放位置發(fā)生變化時觸發(fā)。 onPlayerTimeupdate (player) { // console.log(' onPlayerTimeupdate!', this.timeLog) }, /* 設(shè)置視頻進度 */ playerReadied: function (player) { },};</script> |
上面的 src視頻地址可以換成具體的地址串,也能換成后臺的地址串，因為我的是章節(jié)樹所以我和章節(jié)id進行了關(guān)聯(lián)
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
|
/** 查詢部門下拉樹結(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ù)交互
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
|
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 ~~~~~~~~~') } },//當前播放位置發(fā)生變化時觸發(fā)。onPlayerTimeupdate (player) { this.learningDuration.timeLog = player.cache_.currentTime // console.log(' onPlayerTimeupdate!', this.timeLog) },}, |
saveTime是我自定義的與后端交互的方法。（可自行定義）
|
1
2
3
4
5
6
7
8
|
// 保存視頻進度export function saveTime(data) { return request({ url: '/***/****/***/', method: 'put', data: data })} |
那么到了這一步 進度就能保存下來了
4.進度恢復
想要恢復進度，就必須在視頻播放前把 保存進度下來的設(shè)置到視頻當中，通過打印可以看出playerReadied 可以設(shè)置
|
1
2
3
4
5
6
|
/* 設(shè)置視頻進度 */playerReadied: function (player) {//可在此調(diào)用后臺交互方法...player.currentTime(this.learningDuration.timeLog)}, |
到此 進度可以 恢復了 大功告成！。至于后臺交互數(shù)據(jù) 需求不一樣，代碼也就沒有貼出來。
到此這篇關(guān)于vue-video-player 斷點續(xù)播的文章就介紹到這了,更多相關(guān)vue video player 斷點續(xù)播內(nèi)容請搜索服務(wù)器之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持服務(wù)器之家！
原文鏈接：https://blog.csdn.net/weixin_45676325/article/details/113371747
