vue关于videojs一个页面多个视频且一个播放器多个视频源的写法（播放m3u8视频格式的视频监控）_多个视频源提供多个播放选项

前言
突然接到一个任务是需要做一个视频回放，而且是监控视频那种。
1、首先需要能播m3u8视频
npm install --save video.js
npm install --save videojs-contrib-hls

import videojs from ‘video.js’
import ‘videojs-contrib-hls’
2、一个页面一个视频

<video id="my-video" class="video-js vjs-default-skin vjs-big-play-centered" controls preload="auto" preload="auto">
   <source src="XXXXXXX.m3u8" type="application/x-mpegURL">
</video>
//视频初始化
videojs('my-video', {
    bigPlayButton: false,
    textTrackDisplay: false,
    posterImage: true,
    errorDisplay: false,
    controlBar: true
}, function () {
    this.play()
})
1
2
3
4
5
6
7
8
9
10
11
12
13

3一个页面多个视频

<div v-for="(item,index) in vedioData" :key="index"
         style="width: 500px;height: 500px;position: relative">
      <video :id="'my-video'+index" class="video-js vjs-default-skin  vjs-big-play-centered" controls preload="auto"
             style='width: 100%;height: 100%'>
        <source :src="item.path" style='width: 100%;height: 100%' type="application/x-mpegURL">
      </video>
    </div>
    //js 部分
    for (let i = 0; i < this.vedioData.length; i++) {
                    let a = videojs("myvideo" + i, {
                            bigPlayButton: false,
                            textTrackDisplay: false,
                            posterImage: true,
                            errorDisplay: false,
                            controlBar: true
                        },
                        function () {
                            this.play();
                        }
                    );
                }
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

4.多个视频多个视频源拼接
因为是多个视频源所以需要我们自定义进度条

<div v-for="(item,index) in vedioData" :key="'spqymain'+index"
         style="width: 500px;height: 500px;position: relative">
      <video :id="'my-video'+index" class="video-js vjs-default-skin  vjs-big-play-centered" controls preload="auto"
             style='width: 100%;height: 100%'>
        <source :src="item.path[0]" style='width: 100%;height: 100%' type="application/x-mpegURL">
      </video>
      <div style="background-color: red;position: absolute;left: 21%;bottom: 3%;height: 1%;width: 48%;" :id="'prrrr'+index">
        <div style="background-color: blue;position: absolute;left: 0;bottom: 0;height: 100%;" :id="'progressed'+ index">
        <span style="backgroundcolor:yellow;position:absolute;right:-5px;bottom:-2px;height:10px;width:10px"id="progressSpan"></span>
        </div>
      </div>
    </div>
    //js部分
videofun() {
                for (let i = 0; i < this.vedioData.length; i++) {
                    var pathArr = this.vedioData[i].path
                    let a = videojs("my-video" + i, {
                            bigPlayButton: false,
                            textTrackDisplay: false,
                            posterImage: true,
                            errorDisplay: false,
                            controlBar: false
                        },
                        function (e) {
                            var count = 0
                            this.play();
                            let _this = this
                            this.on('ended', function (e) {
                                videojs.log('‘播放结束了!‘');
                                if(pathArr.length-1 != count) {
                                    this.src(pathArr[count + 1]);
                                    _this.play();
                                }
                                count++
                            });
                            var indexTime
                            this.on('timeupdate', function () {
                                let _this_ = this
                                var currentTimed
                                if (indexTime) {
                                    this.currentTime(indexTime)
                                    indexTime = 0
                                }
                                currentTimed = this.currentTime()
                                //几个视频的总时长248
                                this.duration('248')
                                let durationTime = 248
                                var progressed = document.getElementById("progressed" + i)
                                var prrrr = document.getElementById("prrrr" + i)
                                progressed.style.width = ((128 * count + currentTimed) * 100) / durationTime + "%"
                                prrrr.onclick = function (e) {
                                    let disX = e.clientX - prrrr.offsetLeft;
                                    let percentage = (disX / prrrr.offsetWidth) * 100 + "%"
                                    let toTime = (parseInt(percentage) / 100) * durationTime
                                    let videoIndex = parseInt(toTime / 124)
                                    indexTime = toTime % 124
                                    if (count !== videoIndex) {
                                        _this.src(pathArr[videoIndex])
                                        count = videoIndex
                                    }
                                    progressed.style.width = percentage
                                }
                            })
                        }
                    );
                }
            }
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

在做这个的过程中这几篇文章给了我很大的帮助，https://blog.csdn.net/weixin_41105030/article/details/86695625，https://blog.csdn.net/xingchen678/article/details/100900846，
https://blog.csdn.net/weixin_39924326/article/details/94619971
非常感谢
进度条样式方面我没有对细节进行调整，有时间在更新