EasyNVR H5無插件直播方案前端架構之：直播頁面和視頻列表頁面切換的問題

關於直播頁面和視頻列表頁面切換

爲了給用戶更好的用戶體驗，而且更好的讓用戶快速簡潔的瞭解實時的視頻直播信息。通常多會分爲列表展現和實時的視頻直播展現。

EasyNVR在列表快照展現界面並無進行視頻流的播放，展現多爲視頻的快照信息、是否在線等信息；
而在實時四分屏展現界面不只會展現實時的通道名稱，更要經過通道名稱來獲取實時的視頻流來進行實時的播放。
所以在進行兩個視圖之間的切換的時候，不只須要考慮外表視圖的變化，更應該注意到視頻流的關閉；當我須要在實時四分屏視圖向列表視圖進行切換的時候，須要將當前四分屏視圖中全部的視頻流所有停掉。

爲了保持初始播放器樣式的統一，在四分屏播放頁面每一次播放視頻流時都是從新加載初始化videojs。所以當須要進行切換到列表視圖時須要判斷當前四個播放窗口中，哪個窗口正在進行視頻播放，以便於在切換視圖時將對應窗口的視頻流停掉。
經過js能夠完成該判斷操做；
首先定義一個全局數組，目的用於存儲當前窗口中正在進行實時播放的窗口號信息。這個信息會根據窗口的播放狀態而實時的變化；

var players = [];

當須要進行切換到列表視圖時，只須要將players裏面的元素對應的窗口中的視頻流停掉便可；

$.each(players, function (index, item) {
     videojs("player" + item).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