フロントエンド・コードの伝統的なセキュリティ監視ライブクアッドディスプレイ

クワッドは、レンダリングを実行し終えます：

クワッドレイアウトスタイルのショー

HTML、CSS、などによってレイアウトをスタイリングします

クワッド・パターンが必要で、合理的には4人のプレーヤーを配置するため、それぞれ4つのチャンクに分割され、
フロントエンドの4つのアリコートレイアウト構成例と、

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;
}

四分4つのブロックのサイズと位置のための合理的な、
優れた4つのブロックの後に位置を決定することができ、初期化によってロードされるプレーヤ、RTMP完全ライブビデオストリーム形式をvideojs。

クワッドプレイ処理

###、それぞれ、異なるvideojsはビデオ住んでロードします

Videojsは、ビデオ再生のためのvideojsを使用しているとき、あなたがビデオを再生することができます前に初期化する必要があります。

srcが毎回異なり、4つの表示画面が異なるため、異なるウィンドウが異なるvideojs区別するために異なる値を設定し、次のウィンドウIDに対応videojsによってロードすることができ、ロードvideojs場合;彼の独自性を区別するために、該当するIDは、最初は再び紛争のロードエラーvideojsがあるだろう、正常にロードされvideojs後、ありません
ので、別のウィンドウに異なる「ALT」属性の値を設定することで、あなたは以下の対応するウィンドウをロードするとき「ALT」ウィンドウプロパティによって実行videojsは、対応videojs IDの割り当てに対応する場合、唯一これだけ異なるする必要があり、また、ウィンドウはvideojs一意videojsを決定し、それが関連し得る結ぶことができませんSRCは、対応するウィンドウにSRC videojs初期化がJSが来て追加することによって再生することが前に。

異なるウィンドウ###のビデオ再生に対応し、オフ、など

別のウィンドウvideojs初期化するかどうかを確認する方法？

再生ウィンドウのグローバルアレイストレージを定義します。デフォルトのストレージは、ウィンドウに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 (同微信）

Copyright © LiveQing.com 2016-2019