FVS本地影片組件

適用場景：安裝了「FineVis資料視覺化」插件的使用者，可參考本文了解 FVS 範本的相關功能。

1.1 版本

1.2 功能簡介

本機視頻組件，可展示各類內建視頻、自訂視頻或線上視頻。

視頻類型支援三種：

• 資源中心：可選擇「我的資源」，其中有內建視頻素材。

• 自訂視頻：使用者自己上傳的本地視頻，僅支援 webm、mp4、mov、ogg 四種視頻格式。

• 線上視頻：呼叫線上視頻的絕對地址，同樣僅支援 webm、mp4、mov、ogg 四種視頻格式。支援插入動態值

注：Chrome 瀏覽器 120 之後的版本，不再支援播放 ogg 格式視頻，請轉為其他三種格式上傳。

注：本文僅為大家介紹本地影片組件特有功能，其他屬性不贅述。

「本地視頻」組件不支援：FVS組件框架互動屬性 。

組件動畫請參見：FVS組件框架動畫屬性 。

組件屬性請參見： FVS組件屬性。

建立一張「視覺化看板」：

在頁面中新增一個「本地影片組件」，預設顯示「請在右側選擇影片」。如下圖所示：

3.1 我的資源

視頻類型選擇 資源中心 時，可選擇「我的資源」中的視頻素材，暫不支援線上資源。

選中本機視頻組件，點選「內容」，視頻類型選擇「資源中心」，點選「選擇」，選擇需要的視頻，選中後點選「完成」即可。

如下圖所示：

3.2 自訂上傳

使用者可將自己本地準備好的素材視頻上傳至範本中，並使用它。

3.2.1 上傳視頻

選擇「自訂上傳」類型後，點選「選擇」，點選「+上傳視頻」，即可選擇本地視頻檔案聯集傳，支援多選視頻檔案批量上傳。

支援上傳 webm、mp4、mov、ogg 格式的視頻檔案，單檔案大小限制為 50M 以內 。

注1：請勿手動修改視頻檔案的後綴名來滿足格式要求，這仍會導致資源上傳失敗。

注2：FVS V4.9.0 之前版本上傳的視頻沒有大小限制，如遇卡頓現象可參考本文第 5 章節 。

• 當單個視頻或批量上傳中僅存在單個超限檔案時，提示：視頻大小超過50M，建議改用線上視頻類型，或壓縮視頻後再上傳 。

• 當批量上傳中存在多個超限檔案時，提示將明確列出超限檔案名稱，提示：[視頻名稱1]、[視頻名稱2] 視頻大小超過50M，建議改用線上視頻類型，或壓縮視頻後再上傳 。

3.2.2 刪除視頻

在視頻列表中，滑鼠懸浮到對應視頻上，視頻右上角出現刪除按鈕。

點選「刪除」按鈕，跳出提示框「刪除素材會影響到所有使用該素材的組件，是否確認刪除？」，點選「確認刪除」，即可刪除該視頻素材。

若某個本地視頻組件使用了被刪除的視頻素材，那麼預覽時該組件內容為空。

3.3 線上視頻

本機視頻組件支援呼叫線上視頻，請確定伺服器可存取填寫的視頻地址，且呼叫的視頻源檔案僅支援 webm、mp4、mov 和 ogg 格式。

選中本機視頻組件，點選「內容」，視頻類型選擇「線上視頻」，填寫視頻地址，即可呼叫該視頻素材。如下圖所示：

視頻地址不支援相對地址，僅支援絕對地址，形如 https://src.fanruan.com/web/fr/video/finereportvideo.mp4。

V3.2.0 及之後版本，線上視頻支援「插入動態值」。支援輸入公式或直接綁定資料集欄位，資料集欄位預設選中首行資料。詳情請參見 FVS動態值 。

注：網頁中可透過瀏覽器的「開發者工具」定位視頻，獲取視頻原地址即「絕對地址」。詳細操作請自行百度。

若輸入視頻地址不對，例如直接輸入了網頁地址，預覽時組件提示如下圖所示：

若線上視頻原檔案格式不屬於 webm、mp4、mov 和 ogg 格式，或網路有問題。預覽時組件提示如下圖所示： 

視頻屬性設定如下圖所示：

4.1 填充方式

可選擇兩種視頻顯示方式：

4.2 色相

在視頻原本效果的基礎上，可調整色相、飽和度、亮度及對比度。

4.3 顯示影片工具欄

1）若不勾選「顯示影片工具欄」，則無法暫停/開始影片播放，無法調節影片音量。

2）若勾選了「顯示影片工具欄」，則按影片可暫停/開始影片播放；滑鼠懸浮到影片上，影片下方出現進度條、暫停按鈕、音量調節按鈕。

4.4 播放設定

4.4.1 在當前頁自動播放

1）若不勾選「在當前頁自動播放」按鈕，預覽範本時，需要手動點選組件以播放影片。

注：若不勾選「在當前頁自動播放」按鈕，請務必勾選「顯示影片工具欄」按鈕，否則在預覽時無法手動/自動播放影片。

2）若勾選了「在當前頁自動播放」按鈕且初始音量為 0 ，預覽範本時，無需手動點選，將自動播放視頻 。

注：若視頻組件在範本第一個分頁中，且初始音量不為 0 ，由於谷歌瀏覽器的限制，預覽範本時，仍需要手動點選組件以播放視頻 。

如果使用者已與網域進行了互動（如點選、點按等）；或在桌上裝置上，使用者的媒體參與指數達到臨界值（即使用者之前播放過有聲視頻）；或者使用者已在行動裝置上將網站新增到主螢幕，或在桌上裝置上安裝了 PWA（漸進式網路應用）。系統將允許有聲自動播放 。

此外，頂層框架也可以將自動播放權限委託給其 iframe，進而允許有聲自動播放 。

4.4.2 循環播放

1）若不勾選「循環播放」按鈕，視頻僅播放一次。如需再次播放，需要手動點選組件以播放視頻。

2）若勾選了「循環播放」按鈕，視頻播放結束後，會自動從頭開始再次播放，週而復始。

4.5 初始音量

影片音量調整範圍為 0 ~ 100。

5.1 視頻初次播放卡頓

當初次預覽視頻就有卡頓時，可能是視頻本身有問題，需要優化。

FVS 插件 V2.1.0 及之後版本，可以安裝或更新 FVS流媒體處理依賴插件 到 V1.4 及之後版本，並重新上傳本地視頻檔案。

• 設計器插件安裝方法參照：設計器插件管理

• 伺服器安裝插件方法參照：伺服器插件管理

5.2 視頻二次播放卡頓

雖然自訂上傳的視頻沒有大小限制，但視頻資源較大時，可能由於瀏覽器快取大小不足，再次播放時不走快取而再次請求資源導致卡頓等問題。

若感受到明顯卡頓，建議壓縮視頻或修改瀏覽器快取限制。修改chrome最大快取限制方法如下：

開啟註冊管理器，在 HKEY_LOCAL_MACHINE\SOFTWARE\Policies 下建立 Google\Chrome，建立項 DiskCacheSize，設定值為 77359400，儲存並重啟電腦後生效。

已完成範本請參見：FVS本地視頻組件範例.fvs