EasyNVR无插件直播服务器播放页面的集成----单独的播放器样式

时间 2020-07-10

标签 easynvr 插件直播服务器播放页面集成单独样式繁體版

原文原文链接

背景需求：

EasyNVR自身拥有独立的客户端体系，安卓和IOS拥有各自独立的APP，
安卓下载地址：https://fir.im/EasyNVR；
IOS下载可直接在APPstore搜索EasyNVR便可；
对于应用最为普遍的web端，直接包含在EasyNVR软件包的www目录下；
对于EasyNVR的web端，使用的是vue+webpack进行打包压缩的，不只项目体积小，并且很友好的提高了浏览器的可读性；html

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

解决方案：

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

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

具体传递参数
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服务器

代码实例及样式展现：网络

测试集成播放页样式：
svg

原始样式：
测试

简单的集成应用：插件

<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网络，实现互联网级别的直播分发；

详细说明：http://www.easynvr.com

点击连接加入群【EasyNVR解决方案】：383501345