LiveGBS无插件播放页面的集成----单独的播放器样式

2024-05-15 16:55:52

背景需求：

LiveGBS对于应用最为广泛的web端，直接包含在LiveCMS软件包的www目录下；
对于LiveGBS的web端，使用的是vue+webpack进行打包压缩的，不仅项目体积小，而且很友好的提升了浏览器的可读性；

对于实际的应用过程中，LiveGBS自身的web页面也是拥有自身的风格，因此和许多需要将视频播放页面集成到自身系统的用户就不是很友好了。LiveGBS自身的播放页面也是包含了，云台控制、视频分享、扫码直播等功能，然而部分客户需要的仅仅只是一个播放页面的集成。
这样，即使是简约的风格，也在用户的集成中带来了一定的麻烦。

解决方案：

有过阅读EasyNVR软件包使用文档的用户应该知道了这个解决方案；其实在这个播放页面已经给出了答案；

就是通过iframe集成，在集成的过程中，通过对于参数的传递来，去除自身不需要的元素，最终集成到自身的页面的就是一个单纯的视频播放器画面；而且我们还可以通过传递参数来设置播放器的长宽比和是否将视频直播铺满全屏直播；

具体传递参数
iframe：是否以iframe形式嵌入，支持传递参数yes、no;
autoplay：是否开启自动直播，支持传递参数yes、no；
stretch：是否开启自动直播，支持传递参数yes、no；
aspect:播放器的比例，传递形式x:y,默认16：9

例： ip:port/play.html?channel=id&iframe=yes&aspect=4:3&autoplay=yes&stretch=yes

代码实例及样式展示：

测试集成播放页样式：

原始样式：

简单的集成应用：

<html><head><title>播放页集成测试用</title></head>
<body><div><iframe src="http://121.40.50.44:10000/play.html?serial=34020000001110000001&code=34020000001320000002&iframe=yes&aspect=640x360" width="640" height="360" allowfullscreen allow="autoplay"></iframe></div>
</body>
</html>

关于LiveGBS

LiveGBS能够通过简单的网络摄像机通道配置，将传统监控行业里面的高清网络摄像机IP Camera、NVR等设备接入到LiveGBS，LiveGBS能够将这些视频源的音视频数据进行拉取，转换为RTMP/HLS/FLV/RTSP，进行全平台终端H5直播（Web、Android、iOS），并且LiveGBS能够将视频源的直播数据对接到第三方CDN网络，实现互联网级别的直播分发；

转载于:https://www.cnblogs.com/kumukim/p/11006572.html

LiveGBS无插件播放页面的集成----单独的播放器样式相关推荐

EasyNVR无插件直播服务器播放页面的集成----单独的播放器样式
背景需求: EasyNVR自身拥有独立的客户端体系,安卓和IOS拥有各自独立的APP, 安卓下载地址:https://fir.im/EasyNVR: IOS下载可直接在APPstore搜索EasyNV ...
海康威视监控摄像头大华摄像头webrtc监控低时延无插件直播页面播放毫无延迟
5无插件WebRTC超低延时视频直播 1.WebRTC超低延时直播 2.WebRTC延时对比 3.LiveGBS的低延时的WebRTC流 4.分屏页面如何选择默认播放流 5.搭建GB28181视频直播 ...
多功能流媒体播放器实现网页无插件直播之EasyPlayer.js如何实现播放完自动循环播放
EasyPlayer-Android播放器是一款可针对RTSP.RTMP.RTSP&RTMP协议进行过优化的流媒体播放器,其中我们引以为傲的两个技术优势就是起播速度快和播放延迟低.最近我们遇到 ...
旧版RTSP协议网页视频无插件直播EasyNVR视频平台为什么无法播放H264编码视频？
RTSP协议视频平台EasyNVR经过了很多代的升级,目前已经支持H.265编码视频的播放,然而我们很多客户使用的还是旧版本的EasyNVR视频服务器软件(4.0.0之前的版本统称为旧版,均不支持H2 ...
EasyNVR摄像机网页无插件直播方案H5前端构建之：bootstrap弹窗功能的实现方案与代码
前言介绍在web前端的网页设计中,为了展示出简洁的网页风格和美观的效果,往往会使用弹窗效果在EasyNVR前端页面录像检索功能时,必然会播放录像,如果单独为播放录像文件排一个界面,用户在使用上会更加 ...
基于EasyNVR摄像机网页无插件直播服务二次开发实现H5播放页面的简单集成方案...
我们通常在构架一套视频SaaS应用的过程中,将平台设计为3层:视频硬件层(视频源).视频能力平台(vPaaS).视频应用平台(vSaaS),视频硬件包括各种IPC.NVR.编码器等视频生成设备,vPa ...
基于EasyNVR摄像机网页无插件直播服务二次开发实现H5播放页面的简单集成方案
我们通常在构架一套视频SaaS应用的过程中,将平台设计为3层:视频硬件层(视频源).视频能力平台(vPaaS).视频应用平台(vSaaS),视频硬件包括各种IPC.NVR.编码器等视频生成设备,vPa ...
GB28181监控视频统一汇聚平台LiveGBS将海康大华华为宇视等厂家监控设备统一接入后如何生成固定播放链接或者固定的流地址可以直接无插件播放或者拉取
目前汇聚各种厂家监控设备的视频汇聚平台,基本都是通过GB28181标准协议实现的.下面介绍下LiveGBS Web无插件直播的GB28181视频平台将各厂家(包括海康.大华.华为.宇视.天地伟业等)监 ...
EasyNVR、EasyDSS二次开发之：RTMP、HLS流在web页面进行无插件播放示例Demo代码
不管是基于EasyNVR还是EasyDSS,都是支持无插件直播,这也是未来视频直播的一个趋势.对于传统的浏览器插件播放谁用谁知道: 以上是软件自带播放展示背景需求对于EasyNVR和EasyDSS ...

最新文章

热门文章