监控实时直播的四分屏的前端展示

最新推荐文章于 2023-08-31 11:20:08 发布

狂野小徒

最新推荐文章于 2023-08-31 11:20:08 发布

阅读量640

点赞数

安防监控平台www.liveqing.com

本文链接：https://blog.csdn.net/fuyuanpiao/article/details/101090349

版权

本文介绍了如何在前端实现四分屏的实时直播监控展示，包括样式布局和播放处理。通过html和css进行四等分布局，利用videojs加载rtmp格式的视频流。针对视频播放、关闭等问题，提出了解决方案，如通过不同的id和全局数组管理窗口状态，以及关闭按钮停止视频流。同时提供了在线演示平台的链接。

摘要由CSDN通过智能技术生成

完成运行效果图：

一、四分屏展示样式布局

###1.通过html、css等来进行样式排版###
根据需求的四分屏的样式；来合理的划分出四个大块，分别用于放置四个播放器；
以四等分结构为例进行前端的排版；

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>