完成運行效果圖：
一、四分屏展示樣式布局
###1.通過html、css等來進行樣式排版###
根據需求的四分屏的樣式；來合理的划分出四個大塊，分別用於放置四個播放器；
以四等分結構為例進行前端的排版；
html樣式布局：
<div class="row col-sm-9 video-show">
<div class="col-md-6 window1 video-window" alt="1">
</div>
<div class="col-md-6 window2 video-window" alt="2">
</div>
<div class="col-md-6 window3 video-window" alt="3">
</div>
<div class="col-md-6 window4 video-window" alt="4">
</div>
</div>
CSS樣式的定義：
.video-window{
float: left;
margin-left: 1%;
margin-bottom: 1%;
width: 48%;
height: 0;
position: relative;
padding-bottom: 25%;
background-color: #000;
}
用於合理的四等分四個塊的大小及位置；
確定好四個塊的位置過后可以；通過初始化videojs來加載出播放器，完成rtmp格式的視頻流直播；
二、四分屏播放處理
1.分別加載不同的videojs來進行視頻的直播
問題：
使用videojs來進行視頻播放時需要將videojs進行初始化，然后才可以進行視頻的播放。
由於進行的是監控或其他實時視頻的播放，每一次視頻播放的src都不一定是相同的，並且當視頻播放窗口占滿后，如果我們需要進行播放其他設備推流的視頻信息，會出現沒有播放窗口可用的情況。
解決：
由於每次使用的src是不同的，並且四個播放窗口也是不同的，可以通過不同的窗口來給對應窗口下進行加載的videojs設置不同的id值，來進行區分不同的videojs；如果加載的videojs沒有對應的id來區別他的唯一性，videojs在加載第一次成功后，再次加載會出現videojs的沖突報錯；
因此通過給不同的窗口設置不同的“alt”的屬性值；當加載對應窗口下面的videojs時，通過對應窗口的“alt”屬性來給對應的videojs進行id的賦值；這樣不僅可以確定videojs的唯一性，也可以將videojs和所屬的窗口一一對應起來，這樣只需要將不同的src，在對應的窗口下初始化videojs之前將所要播放的src通過js追加進來。
2.不同窗口對應的視頻的播放、關閉等
問題：
如何判斷不同窗口中的videojs是否初始化？
解決：
定義一個全局的數組，來進行播放窗口的存儲；默認存儲的是沒有初始化videojs的窗口 1，2，3，4
var windows = [1, 2, 4, 3];
當對應窗口進行videojs初始化的時候，刪除windows中對應的值；然后通過判斷windows數組中的值；及可判斷出當前所有窗口中，那些窗口中存在已經初始化的videojs，那些只是默認的video加載標簽窗口；
問題：
如何動態的向沒有進行播放的窗口進行視頻的添加播放？
解決：
通過全局數組windows中的值可以判斷出當前的四個窗口中的video的播放狀態；
windows存在的必然是沒有進行播放的窗口對應的數字。當有需要視頻進行播放，初始化videojs的時候，可以隨機或者特定的獲取windows中的具體元素。通過獲取到的元素來找到相對應的窗口進行視頻的播放。
問題：
如何關閉對應窗口的視頻播放（不是暫停、停止播放。）？
解決：
可以給對應的窗口一個關閉按鈕，當觸發關閉按時來進行videojs的關閉；
由於播放的是實時推流的rtmp格式的視頻文件；因此在關閉窗口的時候需要將推流的信息也停掉,videojs內置的方法可以關閉視頻流。
videojs("video").dispose();
在線演示
LiveGBS是通過GB28181協議將安防攝像頭、NVR、視頻平台接入到一起，進行web無插件直播、回放。 演示地址：gbs.liveqing.com
LiveNVR就是實現將傳統安防RTSP攝像機實現在互聯網直播、錄像、回放，兼容Windows和各移動終端。演示地址：http://nvr.liveqing.com:10800