EasyNVR纯H5摄像机直播解决方案前端解析之：RTSP安防监控实时直播的四分屏的前端展示方案

在现代项目中，物联网、作战指挥、工业监控等领域经常需要在大屏幕上进行实时展示，特别是多屏展示功能。传统安防行业通常采用海康、大华、宇视的解码器来实现大屏展示。然而，随着技术的发展，越来越多的项目转向基于网页、h5、b/s、chrome的架构，这些架构以其轻量、友好、无插件和去ie化为特点。本文将介绍如何在h5中实现类似传统安防的多屏播放展示功能，以四分屏为例。

完成运行效果图：

一、四分屏展示样式布局

1. 通过HTML和CSS进行样式排版

   立即学习“前端免费学习笔记（深入）”；

   为了实现四分屏的样式，需要合理地划分出四个大块，每个块用于放置一个播放器。以下是一个基于四等分结构的前端排版示例：

   HTML样式布局：

   <div class="video-window" alt="window1">
       <video id="video1" class="video-js" controls preload="auto" data-setup="{}"></video>
   </div>
   <div class="video-window" alt="window2">
       <video id="video2" class="video-js" controls preload="auto" data-setup="{}"></video>
   </div>
   <div class="video-window" alt="window3">
       <video id="video3" class="video-js" controls preload="auto" data-setup="{}"></video>
   </div>
   <div class="video-window" alt="window4">
       <video id="video4" class="video-js" controls preload="auto" data-setup="{}"></video>
   </div>

   CSS样式的定义：

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

   通过上述代码，可以合理地将屏幕划分为四个部分，并为每个部分设置播放器。

二、四分屏播放处理

1. 分别加载不同的Video.js进行视频直播

   问题：

   由于监控或其他实时视频的播放，每次视频播放的源（src）可能不同，且当所有播放窗口已满时，需要播放其他设备的推流视频时，可能会没有可用窗口。

   解决：

   可以通过为每个窗口设置不同的ID值来区分不同的Video.js实例。如果没有唯一ID，Video.js在第一次加载成功后再次加载可能会发生冲突。因此，通过在每个窗口设置不同的“alt”属性值，并在加载Video.js时根据“alt”属性为Video.js实例分配ID值。这样不仅确保了Video.js的唯一性，还能将Video.js实例与其所属窗口一一对应。具体操作是在初始化Video.js之前，通过JavaScript将不同的src添加到相应的窗口中。

   

   Okaaaay

   适用于所有人的AI文本和内容生成器

   下载

2. 不同窗口对应的视频播放、关闭等操作

   问题：如何判断不同窗口中的Video.js是否已初始化？

   解决：

   定义一个全局数组来存储播放窗口的状态，默认存储未初始化的窗口号，例如 [1, 2, 3, 4]。

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

   当窗口初始化Video.js时，从数组中删除对应的窗口号。通过检查数组中的值，可以判断哪些窗口已初始化Video.js，哪些窗口仍是默认的视频加载标签。

   问题：如何动态地向未播放的窗口添加视频播放？

   解决：

   通过全局数组

   windows

   中的值，可以判断当前四个窗口的播放状态。数组中存在的数字必然对应未播放的窗口。当需要播放视频时，可以随机或特定地从

   windows

   中获取一个元素，并找到对应的窗口进行视频播放。

   问题：如何关闭对应窗口的视频播放（非暂停、停止播放）？

   解决：

   可以在每个窗口添加一个关闭按钮，当触发关闭按钮时，调用Video.js的内置方法关闭视频流。

   videojs("video").dispose();

   由于播放的是实时推流的RTMP格式视频文件，因此关闭窗口时需要停止推流。

关于EasyNVR：

EasyNVR可以通过简单的网络摄像机通道配置，将传统监控行业中的高清网络摄像机IP Camera、NVR等具有RTSP协议输出的设备接入到EasyNVR中。EasyNVR能够拉取这些视频源的音视频数据，并将其转换为RTMP/HLS格式，进行全平台终端H5直播（Web、Android、iOS）。此外，EasyNVR还可以将视频源的直播数据对接到第三方CDN网络，实现互联网级别的直播分发。