ckplayer视频播放控件插件

  • 文档创建者:枫城
  • 编辑次数:11次
  • 最近更新:Alicehyy 于 2021-03-24
  • 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 格式。

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

    • 不支持移动端。

    2. 插件介绍

    2.1 插件安装

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

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

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

    2.2 操作步骤

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

    image.png

    2.3 属性介绍

    1)属性

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

    设置项说明
    可见

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

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

    可用
    未勾选时,该控件会被蒙上一层灰色蒙版,但不影响视频点击与播放
    视频地址

    支持添加本地资源和远程资源,可同时添加多个视频,只支持.mp4格式

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

    自动播放

    勾选:可自动播放视频,多个视频时可同时播放

    注:在Chrome浏览器(以及所有以Chromium为内核的浏览器)中,不允许自动播放音频和视频。此时勾选「静音」才能自动播放视频

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

    显示控制器

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

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

    循环播放

    添加一个视频时:

    勾选与未勾选视频播放完毕都会自动进入下一轮播放

    添加多个视频时:

    勾选:视频只循环播放第一个视频

    未勾选:多个视频按顺序播放完毕后再从第一个视频继续播放


    静音

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

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

    预加载

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

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

    视频地址详情页:可以增加,删除,移动视频。

    image.png

    注1:上图红框处提示有错误,如果视频文件放在 WEB-INF 目录下,预览时会提示播放错误。本地资源仅支持 %FR_HOME%\webapps\webroot 目录以及其子目录(但不支持 WEB-INF 目录)下的视频资源。

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

    2)事件

    可以添加 JS 事件。

    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

    附件列表


    主题: 决策报表应用
    • 有帮助
    • 没帮助
    • 只是浏览
    • 评价文档,奖励 1 ~ 100 随机 F 豆!

    售前咨询电话

    400-811-8890转1

    在线技术支持

    在线QQ:800049425

    热线电话:400-811-8890转2

    总裁办24H投诉

    热线电话:173-1278-1526