大屏開場效果

1.1 版本說明

1.2 應用場景

參觀大屏時，經常有這樣的需求：希望在查看報表頁面之前，可以播放公司的宣傳視頻或過渡動畫，以提升大屏整體的視聽效果和浏覽體驗。

擴展圖表插件 4.5 版本新增「開場效果」功能，可以給決策大屏添加開場視頻，效果如下圖所示：

1.3 功能介紹

• 使用該功能需要先安裝 4.5 及其之後版本的 擴展圖表插件 ，已有插件直接更新版本即可。

• 該功能只支持決策報表。

• 用戶可以使用内置的 2 種開場效果，也可以用自己的視頻自定義。

• 開場效果僅支持 Chrome 浏覽器和 PC 端展示。

1.4 功能入口

安裝或更新擴展圖表插件後，決策報表的設計器菜單欄「模板」下新增「開場效果」功能，點擊去後勾選「使用開場效果」即可設置開場效果。如下圖所示：

2.1 打開模板

打開設計器内置模板：%FR_HOME%\webapps\webroot\WEB-INF\reportlets\demo\homepage\finereport.frm

點擊此處可直接下載：finereport.frm

2.2 選擇内置效果

該功能内置了 2 種出場效果，用戶可以直接拿來用，其整體設置頁面如下圖所示：

2.3 設置視頻效果

這裏我們選擇第二種内置視頻，視頻比例有 2 種，寬屏對應的大屏尺寸爲 16:9，超寬屏對應的大屏尺寸爲 32:9，這裏我們選擇寬屏。

2.4 設置開場文字

内置視頻展示時其實是有 2 段的，分爲背景視頻和過渡視頻，前後銜接，過渡視頻起到轉場的作用，讓背景視頻切換到報表頁面設時不會太突兀。

注：1.2應用場景的示例圖中，前半段地球旋轉的部分是背景視頻，後半段地球突然拉近的部分是過渡視頻。

設置的開場文字會跟随背景視頻播放，過渡視頻一旦出現，開場文字立刻消失。文字居中顯示在背景視頻的中央，如下圖所示：

這裏我們設置開場文字爲：帆軟決策大屏，文字樣式采用默認的即可，如下圖所示：

2.5 設置背景

由於自适應的原因，可能出現開場視頻無法填充滿浏覽器寬高的情況，此時需要設置開場效果的背景，防止 body 内容漏出，幹擾整體效果。

背景支持顔色和圖片，同時可以設置不透明度，這裏我們采用默認的設置即可，如下圖所示：

2.6 設置轉場

「退出開場」選擇「自動退出」時，背景視頻按照「退出時間」的時長播放，播放完自動開始播放過渡視頻。

「退出開場」選擇「點擊退出」時，只有鼠标點擊後，背景視頻才會停止播放，切換到過渡視頻，否則會一直播放背景視頻。

這裏我們設置爲自動退出，且退出時間爲 3 秒，如下圖所示：

2.7 效果預覽

保存該決策報表，PC 端預覽效果如下圖所示：

注：不支持移動端預覽。

3.1 添加視頻

自定義效果就是要用戶自己提供開場視頻，包括背景視頻和過渡視頻，其他設置同内置效果，整體設置頁面如下圖所示：

只支持%FR_HOME%\webapps\webroot\WEB-INF\reportlets\目錄及其子文件下的視頻，也就是視頻需要先放到這個路徑下，如下圖所示：

放好視頻後，可以手動輸入視頻路徑或點擊「選擇視頻路徑」按鈕，将視頻添加進來，如下圖所示：

注1：背景視頻是必選項，否則無開場效果。

注2：可以只添加背景視頻，不加過渡視頻。

3.2 格式支持

目前只支持 4 種視頻格式，分别爲：mp4、mov、webm、ogg。

除了對視頻格式有要求外，還對視頻的編解碼器有要求，支持的編解碼器類型有：vp8、vp9、AV1、Theora、H.264、MPEG-4

查看視頻編解碼器類型的方法，請自行查閱相關資料。

已完成模板可參見：%FR_HOME%\webapps\webroot\WEB-INF\reportlets\doc\Advanced\Chart\内置大屏開場效果.frm

點擊下載模板：内置大屏開場效果.frm