媒体组件
图片
适用场景
用户可自行导入自己需要的图片,满足大家功能及装饰上的需求。并可在图片中通过超链接配置等实现页面切换,跳转页面等复杂交互。
样式设置

图片的样式设置可分为背景图、响应配置和超链接配置。
上传图片:支持从本地上传图片,将图片拖到右侧样式设置的图片上传区域,即可完成图片上传。或点击图片上传区域,上传图片。
删除图片:鼠标悬停在右侧样式设置的图片上传区域,会出现删除按钮,可进行图片的删除。
事件穿透:勾选事件穿透后,即使图片在其他组件图层之上,但是不影响其他组件的交互引擎的使用场景。
超链接设置:图片可设置超链接,直接将网址粘贴即可,如不配置,则无超链接。超链接可选择在新窗口打开,如勾选,则点击图片后的超链接会在新的浏览器标签页打开,如不勾选,则点击图片后的超链接会在当前页面打开。
数据设置
.9ce3d6f1.png)
数据设置可以设置hyperUrl字段和Url字段。
hyperUrl:图片超链接url
Url:图片本身的Url。
在下方表格中可输入或复制粘贴所需要的数据。其中,每一列数据对应一个数据字段,第一行为该列数据字段名,需要在上方进行映射设置。
目前,数据接入表格支持复制、粘贴、修改、删除数据。选中需要进行改动的数据后,可以点击右键进行操作,也可以使用ctrl+c等快捷键进行操作。当点击列序号或行序号是,会对该列或行全部选中,点击末尾的红色按钮可对该行或列进行删除操作,也可以点击右键对该行或列进行其他操作。
当点击红框内的放大按钮时,会出现放大输入窗口,方便用户进行操作。窗口内操作方式相同,修改数据完成后点击完成即可保存并进行后续字段映射。
当点击高级输入时,用户需在输入框中输入json格式的数据,数据格式如下。
[{"hyperUrl":"","url":""}]
视频
适用场景
视频相对于文字图片来说,展现形式更加直观,可以在短时间内捕获用户注意力。一些炫酷视频配合其他组件共同使用,使大屏更加立体生动。视频组件支持接入m3u8等实时视频格式,支持此类型的实时视频,可以满足直播等对视频时效性要求较高的情境。
样式设置

视频的样式设置可设置视频的地址链接,配置视频是否自动播放,循环播放以及是否显示控制条。
视频组件暂不支持本地上传,仅支持无访问限制的对象存储。
数据设置

数据字段
视频组件的数据字段包括:url
url:视频的地址链接;
需要注意的是:如果数据设置和样式设置中同时配置了视频的URL,那么将以数据设置中的链接为准;
在下方表格中可输入或复制粘贴所需要的数据。其中,每一列数据对应一个数据字段,第一行为该列数据字段名,需要在上方进行映射设置。
目前,数据接入表格支持复制、粘贴、修改、删除数据。选中需要进行改动的数据后,可以点击右键进行操作,也可以使用ctrl+c等快捷键进行操作。当点击列序号或行序号是,会对该列或行全部选中,点击末尾的红色按钮可对该行或列进行删除操作,也可以点击右键对该行或列进行其他操作。
当点击红框内的放大按钮时,会出现放大输入窗口,方便用户进行操作。窗口内操作方式相同,修改数据完成后点击完成即可保存并进行后续字段映射。
当点击高级输入时,用户需在输入框中输入json格式的数据,数据格式如下。
[
{
"url":""
}
]
监控视频
适用场景
监控视频组件使用星眸视频提供的监控视频播放器,专门用于接入实时监控视频的场景。普通视频和实时视频请选择“视频组件”。监控视频一般两种技术方案,公有云方案和私有化部署方案。
公有云方案:莫奈为公有云,接入的摄像头数量较少(10个以内),低成本快速POC。监控视频组件配置HLS或者Http-Flvg公网取流地址,进行监控视频播放
本地化部署方案:莫奈为本地化部署,接入的摄像头数量较多,且有专门的视频第三方视频汇聚平台对接,摄像头无法访问公网,需要专业的企业级或者政府级视频一张图应用。
样式设置

实时视频的样式设置可设置视频的地址链接,配置视频是否自动播放,循环播放以及是否显示控制条。
该组件暂不支持本地上传。
监控视频的样式设置可设置视频的地址链接,选择播放器架构。CS架构支持设置同时播放几路视频、是否开启轮询和轮询间隔。BS架构暂不支持。
视频链接参照不同情况。
- 公有云情况
购买海康摄像头,接入公网,连接海康萤石云,利用接入账号开通海康萤石云开发者账号,在海康萤石云平台配置摄像头的公网监控视频流地址
海康萤石云开放平台地址:https://open.ys7.com/cn/s/index


公有云莫奈视频播放组件配置HLS或者Http-Flvg公网取流地址,进行监控视频播放。
- 私有化部署情况
- 本地化部署莫奈+星眸+天权
- 星眸对接本地化的视频汇聚平台,进行视频流的转发,以及监控数据处理
- 莫奈内置星眸视频播放组件,已经打通星眸数据对接,可以轻松实现地图撒点播放视频以及其他视频一张图的专业大屏生产。
数据设置

数据字段
实时视频组件的数据字段包括:url
url:视频的地址链接;
需要注意的是:如果数据设置和样式设置中同时配置了视频的URL,那么将以数据设置中的链接为准;
在下方表格中可输入或复制粘贴所需要的数据。其中,每一列数据对应一个数据字段,第一行为该列数据字段名,需要在上方进行映射设置。
目前,数据接入表格支持复制、粘贴、修改、删除数据。选中需要进行改动的数据后,可以点击右键进行操作,也可以使用ctrl+c等快捷键进行操作。当点击列序号或行序号是,会对该列或行全部选中,点击末尾的红色按钮可对该行或列进行删除操作,也可以点击右键对该行或列进行其他操作。
当点击红框内的放大按钮时,会出现放大输入窗口,方便用户进行操作。窗口内操作方式相同,修改数据完成后点击完成即可保存并进行后续字段映射。
当点击高级输入时,用户需在输入框中输入json格式的数据,数据格式如下。
[{"url":""}]
图片轮播组件
适用场景
在有多张图片需要循环展示并要查看其详细信息,可以使用图片轮播组件。
样式设置
.5de21231.jpg)
图片轮播的样式设置支持上传本地图片,上传顺序即为轮播顺序,可对任意位置的图片进行替换或删除。
图片轮播组件填充方式有四种:等比例宽度铺满、等比例高度铺满、全部铺满、无。
.52707873.jpg)
图片轮播组件的标题栏可以设置位置与标题文字相对标题栏的对齐方式。

图片轮播的切换按钮支持大小、颜色、选中颜色与位置的设置。位置设置非常灵活,可以通过边距和位置联合调整到组件内的任意位置。

图片轮播组件的动画设置可以选择循环翻页或首页暂停。在轮播时,鼠标移入则轮播停止。

图片轮播组件支持对每个图片添加弹窗,预览后单击添加过弹窗链接的组件即可查看弹窗信息。
数据设置
.69d29c4e.jpg)
数据字段
视频组件的数据字段包括:title、imageUrl、iframeUrl
title:图片的标题(必填,有多少标题则轮播多少图片);
imageUrl:图片的地址链接(非必填);
iframeUrl:弹窗的地址链接(非必填);
需要注意的是:如果数据设置和样式设置中同时配置了图片,那么将以数据设置中为准;
在下方表格中可输入或复制粘贴所需要的数据。其中,每一列数据对应一个数据字段,第一行为该列数据字段名,需要在上方进行映射设置。
目前,数据接入表格支持复制、粘贴、修改、删除数据。选中需要进行改动的数据后,可以点击右键进行操作,也可以使用ctrl+c等快捷键进行操作。当点击列序号或行序号是,会对该列或行全部选中,点击末尾的红色按钮可对该行或列进行删除操作,也可以点击右键对该行或列进行其他操作。
当点击红框内的放大按钮时,会出现放大输入窗口,方便用户进行操作。窗口内操作方式相同,修改数据完成后点击完成即可保存并进行后续字段映射。
当点击高级输入时,用户需在输入框中输入json格式的数据,数据格式如下。
[{"title":"标题1","image":"https://storage.360buyimg.com/visualdata/7000a130de51442d91550849f519fa97.png"},{"title":"标题2","image":"https://storage.360buyimg.com/visualdata/b3d7b06e4cc147d6b7545b0b9f8d21e5.png"},{"title":"标题3","image":"https://storage.360buyimg.com/visualdata/5ca9100867c7452791c80b4c8abd0482.png"}]