监控实时直播的四分屏的前端展示
完成运行效果图:
一、四分屏展示样式布局
###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>
CSS样式的定义:
.video-window{float: left;margin-left: 1%;margin-bottom: 1%;width: 48%;height: 0;position: relative;padding-bottom: 25%;background-color: #000;
}
用于合理的四等分四个块的大小及位置;
确定好四个块的位置过后可以;通过初始化videojs来加载出播放器,完成rtmp格式的视频流直播;
二、四分屏播放处理
1.分别加载不同的videojs来进行视频的直播
问题:
使用videojs来进行视频播放时需要将videojs进行初始化,然后才可以进行视频的播放。
由于进行的是监控或其他实时视频的播放,每一次视频播放的src都不一定是相同的,并且当视频播放窗口占满后,如果我们需要进行播放其他设备推流的视频信息,会出现没有播放窗口可用的情况。
解决:
由于每次使用的src是不同的,并且四个播放窗口也是不同的,可以通过不同的窗口来给对应窗口下进行加载的videojs设置不同的id值,来进行区分不同的videojs;如果加载的videojs没有对应的id来区别他的唯一性,videojs在加载第一次成功后,再次加载会出现videojs的冲突报错;
因此通过给不同的窗口设置不同的“alt”的属性值;当加载对应窗口下面的videojs时,通过对应窗口的“alt”属性来给对应的videojs进行id的赋值;这样不仅可以确定videojs的唯一性,也可以将videojs和所属的窗口一一对应起来,这样只需要将不同的src,在对应的窗口下初始化videojs之前将所要播放的src通过js追加进来。
2.不同窗口对应的视频的播放、关闭等
问题:
如何判断不同窗口中的videojs是否初始化?
解决:
定义一个全局的数组,来进行播放窗口的存储;默认存储的是没有初始化videojs的窗口 1,2,3,4
var windows = [1, 2, 4, 3];
当对应窗口进行videojs初始化的时候,删除windows中对应的值;然后通过判断windows数组中的值;及可判断出当前所有窗口中,那些窗口中存在已经初始化的videojs,那些只是默认的video加载标签窗口;
问题:
如何动态的向没有进行播放的窗口进行视频的添加播放?
解决:
通过全局数组windows中的值可以判断出当前的四个窗口中的video的播放状态;
windows存在的必然是没有进行播放的窗口对应的数字。当有需要视频进行播放,初始化videojs的时候,可以随机或者特定的获取windows中的具体元素。通过获取到的元素来找到相对应的窗口进行视频的播放。
问题:
如何关闭对应窗口的视频播放(不是暂停、停止播放。)?
解决:
可以给对应的窗口一个关闭按钮,当触发关闭按时来进行videojs的关闭;
由于播放的是实时推流的rtmp格式的视频文件;因此在关闭窗口的时候需要将推流的信息也停掉,videojs内置的方法可以关闭视频流。
videojs("video").dispose();
在线演示
LiveNVR就是实现将传统安防RTSP摄像机实现在互联网直播、录像、回放,兼容Windows和各移动终端。
大家可以在 http://nvr.liveqing.com:10800
获取更多信息
邮件:support@liveqing.com
技术交流QQ群:947137753
咨询电话:15156896292(同微信)
试用下载:https://gitee.com/liveqing/ReleaseVersion/releases/LiveNVR
LiveQing视频流媒体无插件直播方案:www.liveqing.com
Copyright © LiveQing Team 2016-2019
监控实时直播的四分屏的前端展示相关推荐
- EasyNVR H5无插件摄像机直播解决方案前端解析之:监控实时直播的四分屏的前端展示
完成运行效果图: 一.四分屏展示样式布局 1.通过html.css等来进行样式排版 根据需求的四分屏的样式:来合理的划分出四个大块,分别用于放置四个播放器: 以四等分结构为例进行前端的排版: html ...
- EasyNVR纯H5摄像机直播解决方案前端解析之:RTSP安防监控实时直播的四分屏的前端展示方案
我们经常会有一些物联网.作战指挥.工业监控方面的大型项目,需要上大屏展示直播,尤其是多屏展示的功能,传统安防里面,我们一般都是采用的海康.大华.宇视的解码器上大屏的:而现在,越来越多的项目,是基于网页 ...
- EasyNVR纯H5摄像机直播解决方案前端解析之:RTSP安防监控实时直播的网页H5自动播放方案
我们很多安防.互联网.直播的应用场景中,在打开一路直播流后,极少看到需要点击播放按钮才能直播 播放视频流的情况,但是由于H5场景的播放需要兼容的浏览器非常多,这样的情况下经常会遇到各种各样的摄像机网页 ...
- 简单使用萤石云,实时直播,监控回放
实时直播 这个我直接使用的视频播放标签 用直播地址 ps:高清好像要转码,后端搞得我不清楚 <videoid="1234567"src="地址"autop ...
- 【树莓派-网络监控(5)前端搭建】基于iframe标签,集成监控实时画面与遥控功能,完成网络监控的搭建与调试
前期内容提要: [树莓派-网络监控(1)分析准备]基于树莓派搭建可视化可远程遥控网络监控--工程分析及前期准备 [树莓派-网络监控(2)画面传输]基于mjpg-stream实现监控画面的传输 [树莓派 ...
- 如何解决直播中黑屏、花屏、闪屏问题?10 分钟搞明白
播放失败 直播卡顿 首开慢 延时高 音画不同步 马赛克严重 播放黑屏.花屏.绿屏 播放杂音.噪音.回声 点播拖动不准 直播发热问题 其他问题(待续) 首先我们要明白,黑屏.花屏.闪屏等问题,可能是推流 ...
- 【解决方案】EasyNVR海量安防设备接入实时直播+云端(服务器)录像的实现
安防视频监控解决方案中,除了实时直播,为了便于事件备查还需要进行存储,目前监控录像的存储方式主要有内存卡.硬盘录像机存储.云存储三种.TSINGSEE青犀视频解决方案中目前通过不同的协议(如GB281 ...
- 直播平台软件开发的前端如何实现整套视频直播技术流程
直播平台软件开发的前端如何实现整套视频直播技术流程 正文 下面按照目录大纲来一个一个讲解. 1. 直播技术的介绍 直播技术涵盖很广,现如今大家广泛了解的就有视频网站的个人直播.手机直播.安防方面的摄像 ...
- Python基于Flask框架实现视频直播,电脑桌面录屏web端展示,远程控制电脑
流媒体原理基本介绍 流媒体是一种技术,其中,服务器以数据块的形式响应请求. 非常大的响应 .对于非常大的响应而言,内存中收集的响应只返回给客户端,这是很低效的.另一种方法是将响应写入磁盘,然后使用fl ...
最新文章
- python学习详解_Python学习入门到精通:Python列表讲解
- php签名墙代码,我们是一家人(签名墙)
- vue设置多选框默认勾选_vue中复选框怎么默认全选,至少选择4个才可以点击下一步...
- 安装mysql会有驱动吗_kettle 安装mysql 驱动
- 在ccs中添加芯片_985博导团队重大成果,涉及隐私保护领域,已在腾讯与京东、快手的业务中应用...
- ArcGIS Server服务介绍与服务在js中的使用
- python编程入门与案例详解-干货|| 清华大佬推荐的python400集入门资料
- 065_VFPage中CallBack回调函数的解释
- HTTPS 使用certbot升级过期证书
- 拖放drag drop(PyQt或Qt for python)
- leach算法的实现过程_LEACH-REC算法的研究及实现
- 子龙山人翻译pdf(47篇全)打包下载 [转]
- python实现excel表格图片识别,并转换成excel文件
- 梁念坚:从MOTO到微软 从无缝连接到统一沟通
- 【论文阅读】Conversational Memory Networkfor Emotion Recognition in Dyadic Dialogue Videos
- redis为什么这么快
- 量化投资:为什么在中国发展之路任重而道远
- CVPR2016 论文快讯:人脸专题
- 万商云集企业SAAS服务平台
- d强制访问位置服务器的数据库w,基于WEB的分布式数据库系统的研究与设计-软件工程专业论文.docx...
热门文章
- OMPL库教程翻译/OMPL学习
- Flutter 使用 ESC/POS蓝牙或以太网库控制热敏打印机
- 慈溪视频软件测试,慈溪论坛
- 计算机如何连接wifi台式,台式机怎么连接wifi_台式机连接wifi教程-太平洋IT百科...
- iframe 重新加载
- 保姆级零基础 C 语言学习路线,万字总结!
- Android在针式打印机上通过ESC/P指令打印二维码
- 六大接口管理平台,总有一款适合你的!
- ​最适合女生的10个副业(上篇),只要你有执行力,实现财富自由很简单!
- 【burpsuite安全练兵场-服务端8】文件上传漏洞-7个实验(全)