前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >EasyNVR播放页面的集成----单独的播放器样式

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

作者头像
EasyNVR
发布2020-04-23 16:08:45
5530
发布2020-04-23 16:08:45
举报
文章被收录于专栏:EasyNVR

背景需求:

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

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

EasyNVR
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>
本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
原始发表:2018-10-20 ,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 背景需求:
  • 解决方案:
相关产品与服务
云直播
云直播(Cloud Streaming Services,CSS)为您提供极速、稳定、专业的云端直播处理服务,根据业务的不同直播场景需求,云直播提供了标准直播、快直播、云导播台三种服务,分别针对大规模实时观看、超低延时直播、便捷云端导播的场景,配合腾讯云视立方·直播 SDK,为您提供一站式的音视频直播解决方案。
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档