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