GB28181、RTSP监控视频WEB多窗口无插件播放 | 您所在的位置:网站首页 › 播放器四分屏 › GB28181、RTSP监控视频WEB多窗口无插件播放 |
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 获取更多信息技术交流QQ群:947137753 咨询电话:15156896292(同微信) 下载: GB28181方案:https://www.liveqing.com/docs/download/LiveGBS.html Onvif/RTSP方案:https://www.liveqing.com/docs/download/LiveNVR.html WEB:www.liveqing.com |
CopyRight 2018-2019 实验室设备网 版权所有 |