EasyNVR H5无插件直播方案前端构建之：实时直播的四分屏的前端展示

以下是基于您提供的文章内容进行的伪原创处理，确保不改变文章的大意和图片位置，同时保持原文的语言：

完成运行效果图：

一、四分屏展示样式布局

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

根据需求的四分屏样式，通过HTML和CSS合理地划分出四个大块，分别用于放置四个播放器。以四等分结构为例进行前端排版。

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

HTML样式布局：

// 代码语言：JavaScript
// 代码运行次数：0

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来加载播放器，完成RTMP格式的视频流直播。

二、四分屏播放处理

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

问题：

由于进行的是监控或其他实时视频的播放，每次视频播放的源地址可能不同，并且当视频播放窗口占满后，如果需要播放其他设备推流的视频信息，会出现没有可用播放窗口的情况。

解决：

由于每次使用的源地址不同，四个播放窗口也不同，可以通过为不同的窗口设置不同的ID值来区分不同的Video.js。如果加载的Video.js没有对应的ID来区分其唯一性，Video.js在首次加载成功后再次加载时会出现冲突报错。因此，通过为不同的窗口设置不同的“alt”属性值，当加载对应窗口下的Video.js时，通过对应窗口的“alt”属性为Video.js赋予ID值。这样不仅可以确定Video.js的唯一性，还可以将Video.js与所属窗口一一对应起来，只需在初始化Video.js之前通过JavaScript将不同的源地址追加到对应的窗口中。

来画数字人直播

来画数字人自动化直播，无需请真人主播，即可实现24小时直播，无缝衔接各大直播平台。

0

查看详情

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

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

解决：

定义一个全局数组，用于存储播放窗口。默认存储的是未初始化Video.js的窗口1、2、3、4。

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

当对应窗口进行Video.js初始化时，从

windows

windows

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

解决：通过全局数组

windows

windows

windows

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

解决：可以为对应的窗口添加一个关闭按钮，当触发关闭按钮时进行Video.js的关闭。由于播放的是实时推流的RTMP格式的视频文件，因此在关闭窗口时需要停止推流信息，Video.js内置的方法可以关闭视频流。

videojs("video").dispose();

关于EasyNVR：

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

详细说明：https://www.php.cn/link/8301854f418d355675f6366dc08573f6

以上就是EasyNVR H5无插件直播方案前端构建之：实时直播的四分屏的前端展示的详细内容，更多请关注php中文网其它相关文章！