EasyNVR无插件直播服务器播放页面的集成----单独的播放器样式
背景需求:
EasyNVR自身拥有独立的客户端体系,安卓和IOS拥有各自独立的APP,
安卓下载地址:https://fir.im/EasyNVR;
IOS下载可直接在APPstore搜索EasyNVR即可;
对于应用最为广泛的web端,直接包含在EasyNVR软件包的www目录下;
对于EasyNVR的web端,使用的是vue+webpack进行打包压缩的,不仅项目体积小,而且很友好的提升了浏览器的可读性;
对于实际的应用过程中,EasyNVR自身的web页面也是拥有自身的风格,因此和许多需要将视频播放页面集成到自身系统的用户就不是很友好了。EasyNVR自身的播放页面也是包含了,云台控制、视频分享、扫码直播等功能,然而部分客户需要的仅仅只是一个播放页面的集成。
这样,即使是简约的风格,也在用户的集成中带来了一定的麻烦。
解决方案:
有过阅读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://192.168.1.202:10800/play.html?channel=1&iframe=yes&aspect=640x360" width="640" height="360" allowfullscreen></iframe>
</div>
</body>
</html>
关于EasyNVR
EasyNVR能够通过简单的网络摄像机通道配置,将传统监控行业里面的高清网络摄像机IP Camera、NVR等具有RTSP协议输出的设备接入到EasyNVR,EasyNVR能够将这些视频源的音视频数据进行拉取,转换为RTMP/HLS,进行全平台终端H5直播(Web、Android、iOS),并且EasyNVR能够将视频源的直播数据对接到第三方CDN网络,实现互联网级别的直播分发;
点击链接加入群【EasyNVR解决方案】:383501345
Copyright © EasyNVR Team 2016-2018
EasyNVR无插件直播服务器播放页面的集成----单独的播放器样式的更多相关文章
- EasyNVR无插件直播服务器软件接口调用返回“Unauthorized”最简单的处理方式
背景需求 对于EasyNVR的受众群体十分的广泛,不仅仅有将EasyNVR作为视频直播平台直接使用的,更多的是使用EasyNVR的对应功能集成到自身系统.对于前者,只需要将软件的使用功能搞清楚即可,对 ...
- EasyNVR无插件直播服务器软件览器低延时播放监控摄像头视频(EasyNVR播放FLV视频流)
背景描述 EasyNVR的使用者应该都是清楚的了解到,EasyNVR一个强大的功能就是可以进行全平台的无插件直播.主要原因在于rtsp协议的视频流(默认是需要插件才可以播放的)经由EasyNVR处理可 ...
- EasyNVR无插件直播服务器软件使用详情功能 - 录像功能说明
背景介绍 EasyNVR不仅仅拥有无插件的直播功能,更拥有对于直播录像的存储和日期检索功能: 本篇博文主要用于介绍EasyNVR的录像功能. 之前有博文介绍相关的录像功能,本篇主要为了介绍录像的新功能 ...
- EasyNVR无插件直播服务器软件使用详情功能-通道配置Excel
背景需求 使用EasyNVR的用户都有知道,由于EasyNVR是将设备与EasyNVR的通道进行绑定的,因此EasyNVR是通过手动的通道配置来进行设备接入的,这样可以做到将设备的和通道对应的接入.但 ...
- EasyNVR无插件直播服务器软件如何自己更改web界面(网页的自定修改)
背景需求 很多用户都在使用了EasyNVR,看到EasyNVR自身带有的界面后有这样的需求,就是需要更改一下web前端的一些样式,当前EasyhNVR为3.0版本,web前端为了增加前端的运行效率和减 ...
- EasyNVR无插件直播服务器如何使用ffmpeg实现摄像机快照功能的
EasyNVR提供快照预览功能,并且提供向EasyDSS云平台上传快照的功能 EasyNVR会定时向配置的摄像机抓取快照数据,保存图片用于预览,并且用于快照上传 原理 将从摄像机取出来的I帧数据编码成 ...
- 使用EasyNVR无插件流媒体服务器接口和EasyPlayer.js播放器插件实现web网页H5播放无插件
1.背景需求 很多客户在使用EasyNVR无插件流媒体服务器时,不喜欢产品化的界面,有时可能满足不了日常观看使用的需求.因此软件提供丰富的HTTP接口,供第三方平台调用集成.但是有时客户这边可能没有专 ...
- EasyNVR无插件直播流媒体服务器云端集中管控的EasyNVS云管理平台安装使用文档
EasyNVS - EasyNVR云端集中管理服务 EasyNVS云管理平台是一套专门用于集中化管理EasyNVR 的解决方案. EasyNVR 采用主动注册的方式接入到 EasyNVS, 再由 Ea ...
- EasyNVR无插件直播服务如何配合EasyBMS使用以及实现流媒体管理功能概述
本文转自:https://blog.csdn.net/black_3717/article/details/79769195 功能概要: 1.摄像机的无插件直播: 2.摄像机的低延时直播: 3.摄像机 ...
随机推荐
- EasyUI Tree 动态传递参数
1.问题背景 一般出现在加载的时候,传递参数给后台,进行数据筛选,然后在加载tree渲染数据.所谓动态参数,可以是你的上一级节点node,或者是根节点node. 2.涉及方法 onBeforeLoad ...
- 当php懈垢windows通用上传缺陷
转自独自等待博客 早上逛乌云发现了PKAV大牛的一篇文章,针对php和windows文件上传的分析,思路很YD,果断转之与大家分享. 虽然此文可能有许多的限制条件,但是如果你认真阅读会发现,其实还是比 ...
- xtrabackup详解
xtrabackup是Percona公司CTO Vadim参与开发的一款基于InnoDB的在线热备工具,具有开源,免费,支持在线热备,备份恢复速度快,占用磁盘空间小等特点,并且支持不同情况下的多种备份 ...
- ThinkPHP的sql_mode的默认设置,导致无效信息被插入
在thinkphp中的DbMySql.class.php和DbMySqli.class.php中每次连接mysql后,都会自动设置sql_mode=''; mysql_query("SET ...
- linger博客原创性博文导航
linger博客原创性博文导航 http://blog.csdn.net/lingerlanlan 大学研究游戏外挂技术開始了此博客.断断续续写了些博文. 后来,開始机器学习和深度学习的研究工作,因为 ...
- 【BIEE】10_资料库查看数据报错
导入元数据后,在资料库右键物理表名,[查看数据]报错: 出现这个问题,没搞明白是为啥- 后来百度意外发现一个方法,修改NQSConfig.INI文件即可解决问题 那么就开始来搞定这个问题 [1]打开路 ...
- Spring MVC 学习笔记 spring mvc Schema-based configuration
Spring mvc 目前支持5个tag,分别是 mvc:annotation-driven,mvc:interceptors,mvc:view-controller, mvc:resources和m ...
- HTML5+CSS3学习笔记(一) 概述
HTML5+CSS3概述 HTML5和CSS3不仅仅是两项新的Web技术标准,更代表了下一代HTML和CSS技术.虽然HTML5的标准规范还没有正式发布,但是未来的发展前景已经可以预见,那就 ...
- AngularJS---Unknown provider: $routeProvider
AngularJS路由报错: Unknown provider: $routeProvider 根据先知们的指引,在网上爬贴,有翻到官方的解决文章. 原来在AgularJS1.2.0及其之后的版本中, ...
- Hadoop 配置及hadoop HA 的配置
注:本文中提到的ochadoop 不要感到奇怪,是亚信公司内部自己合成的一个包.把全部的组件都放在一个包内了.免去了组件的下载过程和解决兼容问题.事实上也能够自己下载的.不要受到影响. 另,转载请注明 ...