云犀直播页面编辑器操作手册

小犀发表于:2019年09月26日 20:12:15更新于:2019年10月08日 16:34:46

一、功能入口

进入到云犀直播官网(www.yunxi.tv),点击右上角【登录】按钮,输入账号密码登录后点击左侧【直播列表】,选择您的直播场次。点击【播放界面】

【自定义组件位置、可视化编辑,高级版用户免费尝鲜!】

直播列表>直播详情>播放界面>页面装修:

0015d9c3d848e9d7f669376a59d1868

进入页面后,点击【页面装修】按钮

0015d9c3d84ce02b5537d9bebe8fc80

进入页面展示效果

0015d8cacfaf1ba3109cc6804a5d73e

二、操作介绍

2.1 操作流程

0015d9c3d84a37a42395afa18df7d5f

左侧组件库中是目前可以使用的组件,目前有播放器、欢迎页、菜单栏、轮播图、图文、相册、评论、关于企业、关于活动组件,中间预览窗口可预览观看页的编辑效果,右侧检查器可编辑选中的组件属性和设置项。操作步骤如下:

  1. 在组件库中选择要添加组件

  2. 拖动组件至预览窗口相应的位置,并放下

  3. 点击选中要编辑的组件

  4. 在右侧检查器编辑组件属性

  5. 点击页面右上角的「发布」按钮,设置生效

注:所有在编辑页面做的操作最终必须「发布」后才会生效。 



2.2 编辑组件位置

添加至预览窗口后如需再次调整组件位置,可点击组件右侧的上移、下移按钮:

                         0015d9c3d84a7a0da68cb9b2ce51b04

2.3 删除组件

点击组件右侧删除按钮:

                         0015d9c3d84b3b69404879d348cf0e5

2.4 分享设置

点击「设置」按钮可进入设置页面,在此页面可编辑微信分享的标题、描述和图标,编辑效果可实时预览:

0015d9c3d84c72b98bc683826fa6df8

三、组件介绍

3.1 播放器

可添加多个播放器

3.1.1 封面设置

点击「上传封面」按钮可从本地选择图片上传作为封面:

0015d9c3d84ba2e01583ff5c5def432

3.1.2 浮动设置

0015d9c3d84cf4dd0118a5e408bf44a

开启后页面滑动至窗口上沿后,窗口将始终浮动在页面顶部:

0015d9c3d84e88e1b326bc548e95cc6

3.1.3 视频源设置

每一个播放器都可以添加一个视频源,视频源可以是直播视频或媒体库视频。当所选择的视频源类型为直播时,可设置预告片,在直播开始之前将会播放预告片。

0015d9c3d84e42aca1c4be232bc549a


动态操作效果图

【播放器】

0015d8cad845e6615bd800ee8b5d8af


0015d8cae16805b1cdcb2930d2f3cfd




3.2 欢迎页

默认展示时长5秒,5秒后可进入直播间,欢迎页图片尺寸建议:750*1206,支持JPG、PNG格式。

0015d9c3d84f0e9c5a7364f73702374

欢迎页组件是独占一页,需点击预览窗口左上角的「欢迎页」按钮进入管理

0015d9c3d85079853f5c32175502d4e

3.3 菜单栏

菜单栏可增加或减少分类,每个分类下可内嵌其它组件,通常菜单栏会内嵌图文组件、评论组件、相册组件。

0015d9c3d8505e6b8110e63cb0df45c

3.1.1 添加子组件

拖拽其它组件至菜单栏下方,当在菜单栏组件蓝色线框内部出现“松开鼠标组件会放到这里”的提示时,放置组件,组件便可以添加在菜单栏组件内部,成为菜单栏的子组件:

0015d9c3d857af32d1fd92b0c2be0e3

注:菜单栏的子组件移动位置时,无法移出母组件

当需要向不同分类下添加组件时,在预览窗口点击组件名称即可切换到相应分类下,拖拽组件添加至新的分类下即可:

0015d9c3d85286547dd2a8012f1da65

3.1.2 编辑分类

选中菜单栏组件后,在右侧可以新增分类、删除分类、改变分类顺序、编辑分类名称:

0015d9c3d85214c18d2e0ea9d7a40e9

3.1.3 设置组件高度

菜单栏组件高度可设置为自适应或固定高度,当设置为自适应高度时,组件高度将会根据菜单栏分类下内容自动伸缩;当设置为固定时,若分类下内容高度超出菜单栏高度,可滑动查看,同时也可以拖动组件底部调整组件整体高度:

0015d9c3d85275fa00778fb4d808d85


0015d8caf7b46e1ade58b4410b92809



3.4 轮播图

可设置最多5张图片循环滚动轮播,当只有1张图片时不会滚动轮播。

0015d9c3d852c8c36d8aa979baccc41

3.4.1 新增图片

点击「新增轮播图」按钮可新增一个轮播位:

0015d9c3d85378e7eec0dea17321fe5

然后点击「添加图片」按钮,可从本地选择一张图片,图片尺寸建议:1280*720,格式支持JPG、PNG,大小不超过5MB。

3.4.2 设置图片跳转链接

轮播图可设置“无跳转”或“站内跳转”,站内跳转可跳转至其它直播页面。

3.4.2 更改轮播图顺序

点击图片右上角的移动位置按钮可跳转图片轮播顺序:

0015d9c3d854b14b4c3ef6d1e7584d0

3.4.3 删除图片

点击图片右上角的「删除」按钮可删除此位置的图片:

0015d9c3d8568d1db0901acfe1ed987

3.5 图文

图文组件可通过富文本编辑器制作丰富多样的图文排版:

0015d9c3d856c83311eb01686e48d75

编辑时可在中间预览窗口实时预览效果。

3.6 相册

利用相册组件可实现图片直播功能:

0015d9c3d8551951bcbcdf20b63f680

3.6.1 相册高度设置

可设置高度为自适应或固定,推荐相册位置放在页面最底部,高度设置为自适应

0015d9c3d8571d5a50207b26fb10c86

动态示意图

0015d8caf7b46e1ade58b4410b92809

3.6.2 绑定相册

相册组件需要绑定一个相册才会有内容,当向绑定的相册中上传图片时,图片将在观看页面的相册组件中展示出来

注:可绑定相册数量限制每月仍然为5场,同一个页面允许添加多个相册。

3.7  评论

同一个页面内添加多个评论组件时,评论内容一致,点击右侧检查器中的「观众评论」按钮,可进入评论管理页面

0015d9c4802a0a9b49b473dfe48d222

3.8  关于活动

用于展示直播名称、观看人次、详情(包括直播介绍、时间、地点)信息。

0015d9c49409e5da62ec5e420f0127f

3.9  关于企业 

用于展示企业logo、名称、公众号二维码。

0015d9c3d857991df37c3308f088cfc


四、Q&A

4.1 基础版能否使用此功能?

基础版可以使用新版页面编辑功能,但是发布后H5页面无法观看,将会出现如下提示:

0015d9c3d858cb71b50b434bd7922f9

4.2 高级版过期后已发布的页面能否继续使用?

不能继续使用,访问页面时会出现与基础版一致的提示。

4.3 新版页面为什么比老版本的组件少了几个?

目前新版第一期刚开发完成,有个别组件还未适配新版页面(如视频合辑、邀请榜、问卷等),目前剩余组件技术部门正在紧锣密鼓开发中,预计将于近期陆续上线,同时会有更多新的组件、模板和功能与大家见面。

五、几个新版页面应用技巧

5.1 如何实现纯净图片直播?

最简单的一个图片直播实现步骤如下:

  1. 在页面顶部添加一个轮播图组件,添加1张或多张图片;

  2. 在轮播图组件下方添加一个关于活动组件并设置活动相关信息;

  3. 在关于活动组件下方再添加一个相册组件并绑定相册。

最终页面效果如下:

0015d9c49ce6208ea08f5ccd11977570015d9c49ea1706d60613bc4a11905b

5.2 连续多天的直播如何在同一个直播间展示?

目前播放器组件新增了视频源设置,因此可通过更改播放器的视频源(绑定一场新的直播)的方式来实现此效果,具体操作步骤如下:

  1. 为每一天的直播创建一场活动,页面使用同一个;

  2. 为页面添加一个播放器组件(其它组件根据需要添加);

  3. 首先将播放器的视频源设置为第一天的直播视频链接;

  4. 第一天直播结束后,更换播放器绑定的视频源,设置为第二天的视频链接;

  5. 0015d9c3d85925fb946ef94e7ac5286

     

  1. 此时已经实现了在同一个直播间内观看第二天的直播,如果是连续多天的直播,重复步骤3~5即可;

注:当需要在此直播间内仍可以观看前几天已结束的直播时,可通过在菜单栏内添加播放器子组件,再将已结束的视频源绑定至播放器子组件上的方式实现。

5.3 当有多个会场直播时,如何制作主会场集合页面?

图文组件可以实现很多意想不到的效果,当需要实现一个主会场集合页面时,可通过如下步骤实现:

  1. 添加1个图文模块;

  2. 在该图文模块的富文本编辑器中上传一张图片,图片内容可以是分会场的主题名称、开始时间等信息;

  3. 为图片添加超链接,方式如下,链接地址是分会场的直播页面链接;

  4. 0015d9c3d85aaed3ebd852d2bf0cf41

4.重复步骤1~3,便实现了添加多个分会场的目的;

更多的使用技巧欢迎大家自己探索和分享!


如有问题,详询客服:400-622-9558