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