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

目录:

1. 概述编辑

1.1 版本

报表服务器版本App HTML5移动端展现
10.010.4.69V10.4.69

1.2 应用场景

在现在越来越多的大屏展示需求背景下,表格数据、图表混合着视频一同展现在同一个屏幕下的需求比较常见。

用户可安装「视频播放控件插件」,实现模板中播放视频的效果。

1.3 功能描述

  • 在决策报表中可以添加视频控件用于播放在线视频或本地视频。

  • 在移动端模板中不支持全屏、不支持组件选中、不支持绝对画布块;支持设置导航书签、支持冻结在移动端模板顶部。

注:该插件使用的是 HTML 的视频播放技术,因此仅支持谷歌浏览器、火狐浏览器、Safari 浏览器以及 IE11+ 的浏览器,如果需要支持 IE11 以下的的浏览器,可以使用 Flash 播放技术,自行使用源码修改。

2. 示例编辑

2.1 安装插件

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

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

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

2.2 添加控件

在 FineReport 设计器中新建决策报表,在控件处点击「下拉」箭头,将「Video」控件拖入到决策报表中即可使用,如下图所示:

1587726445265047.png

2.3 设置控件属性

1)示例视频地址为「本地资源」,点击下载示例视频:测试.mp4

将压缩包解压后,将视频放在%FR_HOME%\webapps\webroot文件夹下,如下图所示:

注:本地资源仅支持 %FR_HOME%\webapps\webroot 目录以及其子目录(但不支持 WEB-INF 目录)下的视频资源。

1587730387703514.png

2)选中控件,在「属性」中添加「视频地址」,并且设置视频播放的各种属性,如下图所示:
29.png

各设置项的属性介绍如下表所示:

设置项说明
可见

勾选:模板预览时该控件可见

未勾选:模板预览时不可见

可用
未勾选该按钮,移动端使用该插件播放视频时无影响
视频地址

本地资源:

移动端安卓系统:mp4、mkv

移动端 iOS 系统:mp4

PC 端支持视频格式:mp4

注:本地资源仅支持%FR_HOME%\webapps\webroot目录以及其子目录(但不支持 WEB-INF 目录)下的视频资源

远程资源:

支持视频格式:mp4

自动播放

勾选:单个视频时打开表单即进入视频全屏播放模式;多个视频时同时播放

未勾选:不自动播放,点击播放按钮后,从默认状态到播放状态

本地资源:

不支持 PC 端、HTML5 端自动播放

多个视频设置自动播放时 App 端仅随机播放某一个或几个视频

远程资源:

支持 PC 端、App 端自动播放,

不支持 HTML5 端自动播放

显示控制器

勾选:

移动端:视频播放时可暂停视频、快进视频、调节音量

PC 端:视频播放时可暂停视频、快进视频、调节音量、全屏显示、下载视频

未勾选:视频播放时不能对视频进行操作

循环播放

勾选:视频播放完毕自动进入下一轮播放

未勾选:视频播放完毕后即停止

静音

勾选:喇叭图标关闭,即使播放也默认静音

未勾选:声音大小跟随手机系统声音,大小可调节

预加载

勾选:暂停播放后,断开网络,可继续播放

未勾选:暂停播放,断开网络,点击播放显示网络错误

2.4 效果预览

2.4.1 PC 端

PC 端效果如下图所示:

1587731895184379.gif

2.4.2 移动端

注:HTML5 端不支持「自动播放」。

以 App 效果为例,如下图所示:

3.gif