Vue-Video-player多rtmp视频流显示在同一个页面+流媒体服务器部署

上个月弄一个监控视频项目，需要将多个视频流显示在同一个页面，并且做切换。
注意：东西有点多，加上我写得也比较杂乱，看太快可能会看不懂，建议还是按步骤试一遍，加强记忆
用Vue-video-player实现，网上有许多关于这个的配置教程，我贴上一份：https://blog.csdn.net/liona_koukou/article/details/84025449
但是几乎都是单个视频的显示，最后自己琢磨出来的多视频显示，给大家分享一下。
由于是商业项目，所以不方便贴出所有代码，我尽量用部分伪代码讲清楚。
在此之前，我们先列一下需要的工作。

1.环境介绍及包安装
2.流媒体服务器部署
3.单视频显示到页面
4.多视频显示到页面
5.多视频下单个视频的切换	

1.环境介绍及包安装
基本上这个都难不倒大家，网上教程很多，我主要讲多视频的实现，这里就比较粗略带过。
我的开发环境使用的是Vue+webpack3.6，firefox浏览器
需要安装的依赖包如下：

"vue-video-player": "4.0.6",
"videojs-contrib-hls": "^5.14.1",
"videojs-contrib-hls.js": "^3.2.0",
"videojs-flash": "2.1.0",
"videojs-swf": "^5.4.2",

基本上都是npm install --save xx，大家自行安装。
在这里我给一份GitHub上的源码：https://github.com/arut/nginx-rtmp-module
这份源码是可以正常播放的，但是在我这不行，很坑，有博主说是vue-video-player版本更新后的问题，但是我测试后和版本无关，是一个十分坑的点：

坑点一：没有打开火狐浏览器的视频播放权限
坑点二：
	//poster: './static/images/logo.png', //这行代码是没错的，但是一开始如果不注释， 点击视频窗口的时候，会点击到图片，而不是视频，火