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

蓮花仙者
2025-09-03
热度

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

完成运行效果图：

一、四分屏展示样式布局

通过HTML和CSS进行样式排版

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

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

HTML样式布局：
```
    


    


    


    
```
CSS样式的定义：
```
.video-window {
    float: left;
    margin-left: 1%;
    margin-bottom: 1%;
    width: 48%;
    height: 0;
    position: relative;
    padding-bottom: 25%;
    background-color: #000;
}
```
通过上述代码，可以合理地将屏幕划分为四个部分，并为每个部分设置播放器。

二、四分屏播放处理

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

问题：

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

解决：

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

问题：如何判断不同窗口中的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网络，实现互联网级别的直播分发。