Quad finish running renderings:

Quad layout style show

To be styled layout by html, css, etc.

The quad pattern needs; reasonable divided to four chunks, respectively, for placing four players;
with four aliquots layout configuration example of the front end;

html layout styles:

   <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 style definition:

.video-window{
        float: left;
        margin-left: 1%;
        margin-bottom: 1%;
        width: 48%;
        height: 0;
        position: relative;
        padding-bottom: 25%;
        background-color: #000;
}

Reasonable for the size and location of the four blocks quartered;
determining a position after a good four blocks can; be loaded by the initialization videojs a player, rtmp complete live video stream format;

Quad play processing

###, respectively, to load different videojs live video

Videojs need to be initialized when using videojs for video playback before you can play the video.

Since src is different each time, and four display window is different, can be loaded by videojs different windows correspond to the next window id set different values to distinguish between different videojs; if loaded videojs There is no corresponding id to distinguish his uniqueness, videojs after the first loaded successfully, there will again be loaded error videojs of conflict;
therefore to different window by setting different "alt" attribute value; when you load the corresponding window below when videojs, performed by "alt" window property corresponds to a corresponding videojs id assignment; can not only determine uniqueness videojs also videojs window and tie it may be relevant, so only need to different src, in the corresponding window before the initialization videojs the src be played by adding js come.

Different windows ### corresponding to the video playback, off, etc.

How to determine whether a different window videojs initialization?

Define a global array storage for playback window; default storage is not initialized window 1,2,3,4 videojs

var windows = [1, 2, 4, 3];

当对应窗口进行videojs初始化的时候，删除windows中对应的值；然后通过判断windows数组中的值；及可判断出当前所有窗口中，那些窗口中存在已经初始化的videojs，那些只是默认的video加载标签窗口；

如何动态的向没有进行播放的窗口进行视频的添加播放？

通过全局数组windows中的值可以判断出当前的四个窗口中的video的播放状态；
windows存在的必然是没有进行播放的窗口对应的数字。当有需要视频进行播放，初始化videojs的时候，可以随机或者特定的获取windows中的具体元素。通过获取到的元素来找到相对应的窗口进行视频的播放。

如何关闭对应窗口的视频播放（不是暂停、停止播放。）？

可以给对应的窗口一个关闭按钮，当触发关闭按时来进行videojs的关闭；
由于播放的是实时推流的rtmp格式的视频文件；因此在关闭窗口的时候需要将推流的信息也停掉,videojs内置的方法可以关闭视频流。

videojs("video").dispose();

在线演示

LiveNVR就是实现将传统安防RTSP摄像机实现在互联网直播、录像、回放，兼容Windows和各移动终端。
大家可以在 http://nvr.liveqing.com

获取更多信息

安防流媒体互联直播-QQ交流群：615081503

国标GB28181无插件LiveGBS-QQ交流群：947137753

邮件：[email protected]

WEB：www.liveqing.com

Tel：189-5515-0114 (同微信）

Traditional security monitoring live quad display of front-end codes