历史版本11 :ckplayer视频播放控件 返回文档
编辑时间: 内容长度:图片数:目录数: 修改原因:

目录:

1. 概述编辑

1.1 版本

报表服务器版本

JAR 包版本

插件版本

10.02019-10-01V1.3

1.2 应用场景

适用于一些公司大屏需要以视频形式展示公司文化或会议观点的场合,视频更具传染力,更便于表达,该插件便提供了视频播放的功能,大概效果如下所示:

9916F16E-DF18-4FAC-81AA-3B78C0184258.GIF

1.3 功能介绍

  • 该插件集成了流行的播放器 ckplayer 的解决方案,解决了众多平台中的播放问题。支持更多的浏览器(比如在低版本 IE 下自动 fallback 到 flash )。

  • 原播放器支持多种视频格式,但是由于端侧不同的浏览器支持的视频格式不同。我们为了屏蔽这些技术上的差异,本插件考虑多浏览器支持情况,我们做了只支持 MP4 视频格式的控制,建议用户使用 MP4 视频文件,其他格式的视频可以转成 MP4 格式。

  • 支持添加多个视频。支持添加、修改和删除,并且可以通过上移下移调整视频播放的顺序。

  • 提供了丰富的 JS 接口,可以自由控制视频的播放、暂停等。

2. 插件介绍编辑

2.1 插件安装

点击下载插件:视频播放插件

设计器插件安装方法参照:设计器插件管理

服务器安装插件方法参照:服务器插件管理

设计器内安装搜索:ckplayer视频播放控件

2.2 操作步骤

下载安装好插件后可以在控件栏看到ckplayer插件,将其拖入决策报表即可使用。

image.png

2.3 属性设置

1)属性

  • 视频地址选择视频资源所在路径。

  • 高级则是导航栏,可以设置是否自动播放,是否显示控制器,是否循环播放,是否静音和预加载。

image.png

视频地址详情页:可以增加,删除,移动你的视频,如果不点击属性>高级>循环播放则是按排列顺序播放。

image.png

注1:上图红框处提示有错误,如果视频文件放在 WEB-INF 目录下,预览时会提示播放错误,建议 MP4 本地资源存放到 %FR_HOME%\webapps\webroot\help 路径下。

注2:目前视频只支持 MP4 格式。

注3:当前视频大小无法自适应,需要自己根据报表大小调节。

2)事件

可以添加 JS 事件。

image.png

2)移动端

可针对移动端的样式进行设置以及修改导航名称。

image.png

3. 示例编辑

3.1 报表设计

1)下载安装好插件:视频播放插件 和 图片控件设计器。如下图所示:

1586238503545562.png


2)新建决策报表,body 组件中拖入图片控件,将 客厅电视背景墙.jpg 以适应模式插入到决策报表中,如下图所示:

Snag_fadda05.png

3)将视频播放控件拖入到 body 中,调整大小正好覆盖图片中的电视机,如下图所示:

Snag_fb0f55e.png

4)自定义视频播放控件的属性,如下图所示:

Snag_fb4dffe.png

将 高清中国风清明节气.mp4 存放到%FR_HOME%\webapps\webroot\help\路径下,将视频插入到控件中,如下图所示:

Snag_fba7dfb.png

3.2 效果预览

保存报表,点击PC端预览,效果如应用场景中所示。

注:不支持移动端。

4. 模板下载编辑

已完成模板可参见:%FR_HOME%\webapps\webroot\WEB-INF\reportlets\demo\other\视频播放插件.frm

点击下载模板:视频播放插件.frm

点击下载视频:高清中国风清明节气.mp4

点击下载图片:客厅电视背景墙.jpg