EasyNVR播放页面的集成----单独的播放器样式

2020-04-23 16:08:45 浏览数 (1)

背景需求:

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

代码实例及样式展示:

测试集成播放页样式:

原始样式:

简单的集成应用:

代码语言:javascript复制
<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>

0 人点赞