EasyNVR H5無插件直播方案前端構建之：實時直播的四分屏的前端展現

完成運行效果圖：

1、四分屏展現樣式佈局

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格式的視頻流直播；

2、四分屏播放處理

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網絡，實現互聯網級別的直播分發；

詳細說明：http://www.easydarwin.org/easynvr/

獲取更多信息

郵件：support@easydarwin.org

WEB：www.EasyDarwin.org

Copyright © EasyDarwin.org 2012-2017