在现代项目中，物联网、作战指挥、工业监控等领域经常需要在大屏幕上进行实时展示，特别是多屏展示功能。传统安防行业通常采用海康、大华、宇视的解码器来实现大屏展示。然而，随着技术的发展，越来越多的项目转向基于网页、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添加到相应的窗口中。
百度虚拟主播
百度智能云平台的一站式、灵活化的虚拟主播直播解决方案
36 查看详情 
不同窗口对应的视频播放、关闭等操作
问题：如何判断不同窗口中的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网络，实现互联网级别的直播分发。
以上就是EasyNVR纯H5摄像机直播解决方案前端解析之：RTSP安防监控实时直播的四分屏的前端展示方案的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/599561.html
微信扫一扫 
支付宝扫一扫 
