完成執行效果圖：

一、四分屏展示樣式佈局

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();

關於EasyNVR

EasyNVR能夠通過簡單的網路攝像機通道配置，將傳統監控行業裡面的高清網路攝像機IP Camera、NVR等具有RTSP協議輸出的裝置接入到EasyNVR，EasyNVR能夠將這些視訊源的音視訊資料進行拉取，轉換為RTMP/HLS，進行全平臺終端H5直播（Web、Android、iOS），並且EasyNVR能夠將視訊源的直播資料對接到第三方CDN網路，實現網際網路級別的直播分發；

獲取更多資訊

Copyright © EasyDarwin.org 2012-2017