最近的項目中需要實現視頻斷點續播的功能，一聽到這個功能。內心方張了..但卻又有點小竊喜，小懵亂。抱著求學態度去挑戰一下。
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:'',//章節id timeLog: '', //視頻觀看時長 }, 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.player player.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進行了關聯
|
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
|
/** 查詢部門下拉樹結構 */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]; } //初始化第一個章節視頻 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; //章節id this.learningDuration.chapterId = data.id // console.log(this.videoIntroduce)}, |
4.進度保存
接下來就是 保存視頻的進度條了，通過打印發現onPlayerTimeupdate可獲取到視頻的進度，故采用定時器 每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
|
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是我自定義的與后端交互的方法。（可自行定義）
|
1
2
3
4
5
6
7
8
|
// 保存視頻進度export function saveTime(data) { return request({ url: '/***/****/***/', method: 'put', data: data })} |
那么到了這一步 進度就能保存下來了
4.進度恢復
想要恢復進度，就必須在視頻播放前把 保存進度下來的設置到視頻當中，通過打印可以看出playerReadied 可以設置
|
1
2
3
4
5
6
|
/* 設置視頻進度 */playerReadied: function (player) {//可在此調用后臺交互方法...player.currentTime(this.learningDuration.timeLog)}, |
到此 進度可以 恢復了 大功告成！。至于后臺交互數據 需求不一樣，代碼也就沒有貼出來。
到此這篇關于vue-video-player 斷點續播的文章就介紹到這了,更多相關vue video player 斷點續播內容請搜索服務器之家以前的文章或繼續瀏覽下面的相關文章希望大家以后多多支持服務器之家！
原文鏈接：https://blog.csdn.net/weixin_45676325/article/details/113371747
