【大华摄像机hls拉流vue使用videojs展示 一个页面多个视频同时播放】_大华摄像头拉完流然后怎么

前言

主要参考https://blog.csdn.net/qq_39923762/article/details/89149715?spm=1001.2014.3001.5506

我们的项目是在大华摄像机通过流媒体服务器进行拉流的方式进行的，前端调取视频数据只需要通过访问ip就可以获取到了。

cnpm install video.js
cnpm install videojs-contrib-hls --save

main.js中引入css
import ‘video.js/dist/video-js.css’

template页面：

<div v-show='!isError'>
   <video id="videobox" class="video-js vjs-default-skin vjs-big-play-centered vjs-16-9" controls preload="auto" webkit-playsinline="true" playsinline="true" type="application/x-mpegURL" allowsInlineMediaPlayback=YES  webview.allowsInlineMediaPlayback=YES  width='100%' ref='videoRef' x5-video-player-fullscreen="true" :poster="posterSrc" >
      <source id="sourceBox" :src="videoSrc">
      <p class="vjs-no-js">不支持播放</p>
   </video>
</div>
<div v-show='isError' class="errorTip"><p>视频出错了！</p></div>
1
2
3
4
5
6
7

<script>
组件页面引入：
import videojs from 'video.js'
import 'videojs-contrib-hls'
......
 
data(){
   
  return{
   
	videoSrc:'http://down.soundaer.com/live/stream_89003_sd/playlist.m3u8?k=d708550fbd49c58a1b8a8412c8623277&t=1553687908',
	posterSrc:'https://matrimony001.100msh.net.cn/public/code/material/mp-7261-1554175849.jpg',
   isError:false
   }
}
mounted() {
   
	//为避免在初始化video时播放源是空的，报播放源错误，需要先给source 的src赋值
        var player = videojs('videobox',{
   
                    bigPlayButton: true,
                    textTrackDisplay: true,
                    posterImage: true,
                    errorDisplay: false,
                    controlBar: false,
                    playbackRates: [0.5, 1, 1.5, 2],
                    ControlBar:{
   
                        customControlSpacer: true
                    }
                },
                function onPlayerReady(){
   
                    this.play();
                    setTimeout(() => {
      //延时确保能监听到视频源错误
                        var mediaError = this.error();
                        if(mediaError!=null && mediaError.code){
   
                            _this.isError=true
                            Dialog.alert({
   
                                message: '啊哦，播放出错了。<br>请刷新重试，如无法播放建议您观看其它内容。',
                                confirmButtonText:'确定'
                            }).then(() => {
   
                                _this.goback();
                            });
                        }
                    },1000);
                });        
             // player.width(this.videoW)   //设置播放器宽度
},
 beforeDestroy(){
   
            const videoDom = this.$refs.videoRef;   //不能用document 获取节点
            videojs(videoDom).dispose();  //销毁video实例，避免出现节点不存在 但是flash一直在执行,也避免重新进入页面video未重新声明
   }
</script>
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

下面是自己的内容

上图是大华摄像机的拉流方式，需要知道的信息是平台ip，地址，设备编号，通道号和码流类型，这些都可以通过大华的摄像机管理平台进行获取，码流类型分为主码流和辅码流，两个的差别是视频的清晰度问题，因为我们需要在一个页面展示多个视频数据，所以同时传输主码流会发生问题，造成卡顿，对网络造成压力。然而使用辅码流会对视频在全屏的时候造成视频模糊的问题。

问题一

由于项目图片不便于展示进行打码，页面进行视频展示采用的是videojs，在github上可以查到使用方法，这里出现了一个小问题是在github上的视频播放器不支持h265格式的浏览器展现，所以在做vue页面之前需要保证视频流格式是h264的。如果使用videojs对h265视频进行播放会发现只有声音没有画面，是因为声音的解码方式和画面解码方式不同。使用vlc工具可以对视频流格式进行分析vlc下载地址
然后我们使用videojs的全屏检测功能进行处理，当我们是正常屏幕时我们使用辅码流，在全屏时使用主码流。

async initVideo () {
   
      await this.getUrlsList()
      this.urlsList.map((item, i)<
1
2
3