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

最新推荐文章于 2022-06-15 17:49:14 发布

Black蜡笔小新

最新推荐文章于 2022-06-15 17:49:14 发布

阅读量1k

点赞数

分类专栏：前端 EasyNVR 文章标签： Easy NVR EasyNVR播放器集成 web无插件直播 rtsp转rtmp hls、rtmp的web播放

本文链接：https://blog.csdn.net/Black_3717/article/details/83212956

版权

EasyNVR 同时被 2 个专栏收录

136 篇文章 6 订阅

订阅专栏

前端

12 篇文章 0 订阅

订阅专栏

背景需求：

对于实际的应用过程中，EasyNVR自身的web页面也是拥有自身的风格，因此和许多需要将视频播放页面集成到自身系统的用户就不是很友好了。

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>