GB28181、RTSP监控视频WEB多窗口无插件播放

最新推荐文章于 2020-09-17 01:55:36 发布

狂野小徒

最新推荐文章于 2020-09-17 01:55:36 发布

阅读量286

点赞数

安防监控平台www.liveqing.com

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

版权

本文介绍了如何使用HTML、CSS和videojs实现GB28181、RTSP监控视频在Web上进行四分屏无插件播放。通过设置不同的videojs 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