本文介紹視頻組件全量選擇時各配置項的含義。
圖表樣式
視頻是媒體組件的一種,支持自定義視頻的URL地址、視頻播放屬性、播放器的外觀屬性等,支持mp4格式的視頻,能夠在可視化應用中添加視頻播放器來播放您的視頻。
樣式面板
搜索配置:單擊樣式面板右上角的搜索配置項圖標,可在搜索配置面板中輸入您需要搜索的配置項名稱,快速定位到該配置項,系統支持模糊匹配。詳情請參見搜索配置項。
尺寸:包括組件的寬度和高度,單位為px。
定位:包括組件的橫坐標和縱坐標,單位為px。橫坐標為組件左上角距離頁面左邊界的像素距離,縱坐標為組件左上角距離頁面上邊界的像素距離。
旋轉:以組件的中心為中心點,進行旋轉,單位為度(°)。
手動輸入角度值,控制組件的旋轉角度。
單擊圖標,控制組件左右翻轉樣式。
單擊圖標,控制組件上下翻轉樣式。
不透明度:取值范圍為0~1。為0時,圖表隱藏;為1時,圖表全部顯示。默認為1。
視頻地址:建議使用mp4格式的視頻地址(如:xx.test.com/video.mp4),也可以在數據源面板中配置,優先使用數據源面板中的配置。
空視頻文案:在沒有具體視頻時,用來提醒用戶的文本,一般顯示在組件內部上方。
自動播放:打開開關,在預覽或發布頁面視頻可自動播放。
重要當使用Chrome 66以下版本時,需要按照以下方法開啟自動播放功能,配置項才有效。
在Chrome瀏覽器地址欄中輸入chrome://flags/#autoplay-policy,將Autoplay policy配置項設置為No user gesture is required。
當您使用Chrome 66及以上版本時,默認自動靜音播放。
循環播放:打開開關,在預覽或發布頁面視頻播放完畢后,再次播放。
控制條:打開開關,在預覽或發布頁面視頻底部可顯示控制條。
靜音:打開開關,視頻靜音播放。
音量(%):視頻播放時的聲音大小。拖動控制條可在可視化應用中調節音量的大小。只有在關閉靜音配置時生效。
保持原比例:保持原始視頻大小。
數據源面板
url
:(可選)配置視頻資源的地址,與視頻地址配置項功能相同。若兩者都進行了配置,則優先使用數據源中的配置。
數據項配置 | 說明 |
數據源 | 組件的數據源中通過代碼編輯或可視化編輯展示了組件所包含的數據字段。也可以修改數據類型,靈活配置組件數據。 |
數據映射 | 當您需要自定義圖表字段配置時,可以在數據映射模塊設置不同的字段映射內容,將這些字段映射到組件對應的字段上。無需修改數據源中的字段,就可以實現數據的實時匹配。也可以單擊圖標對字段分別樣式配置。 |
過濾器 | 打開過濾器,選擇已創建的數據過濾器或新建數據過濾器,并配置數據過濾器腳本,實現數據的篩選功能。詳情請參見管理數據過濾器。 |
數據響應結果 | 實時展示了組件所使用的數據。當組件數據源發生變化時,數據響應結果會對應展示最新的數據。如果系統反應延遲,您可以單擊右側的圖標,查看數據響應結果,也可以單擊右側的圖標,獲取組件的最新數據。您也可以單擊查看示例,查看當前組件的響應結果示例。 |
禁止加載態 | 勾選復選框,在組件更新和預覽數據看板時,將看不到組件初始化時的加載內容,去勾選則相反。默認為去勾選狀態。 |
受控模式 | 勾選復選框,組件初始化狀態下不請求數據,僅通過全局變量或藍圖編輯器配置的方法發起請求數據;去勾選復選框,可以使用自動更新請求數據。默認為去勾選狀態。 |
自動更新請求 | 勾選復選框,可以手動輸入輪詢的時間頻次設置動態輪詢。清除后則不會自動更新,需要手動刷新頁面,或通過藍圖編輯器和全局變量事件來觸發請求更新數據。 |
高級面板
此組件沒有交互事件。
藍圖交互
單擊頁面左上角的圖標,進入藍圖頁面。
在圖層節點頁簽下,添加當前組件至主畫布中。
查看藍圖配置參數。
事件
事件
說明
當數據接口請求完成時
數據接口請求返回并經過過濾器處理后拋出的事件,同時拋出處理后的JSON格式的數據。具體數據示例請參見畫布編輯器中組件右側配置面板數據源頁簽的數據響應結果區域。
當播放開始時
當視頻開始播放時拋出的事件。
當播放結束時
當視頻結束播放時拋出的事件。
動作
動作
說明
請求數據接口
重新請求服務端數據,上游數據處理節點或圖層節點拋出的數據將作為參數。例如視頻配置了API數據源為
https://api.test
,傳到請求數據接口動作的數據為{ id: '1'}
,則最終請求接口為https://api.test?id=1
。導入數據接口
按組件繪制格式處理數據后,導入組件,重新繪制。不需要重新請求服務端數據。具體數據示例請參見畫布編輯器中組件右側配置面板數據源頁簽的數據響應結果區域。
開始播放
開始播放視頻,無需參數。
暫停播放
暫停播放視頻,無需參數。
結束播放
結束播放視頻,無需參數。
移動
將組件移動到指定位置,參考數據示例。
{ // 移動方式。絕對定位:to,相對定位:by。默認值:to。 "positionType": "to", // 指定位置。x坐標,y坐標。 "attr": { "x": 0, "y": 0 }, // 動畫方式。 "animation": { "enable": false, // 動畫延時。 "animationDuration": 1000, // 動畫曲線。可選值為:linear|easeInOutQuad|easeInOutExpo。 "animationEasing": "linear" } }
切換顯隱
切換組件顯示或者隱藏,不需要參數。
顯示
顯示組件,參考數據示例。
{ "animationType": "",//動畫方式,可選值:fade,不填無動畫。 "animationDuration": 1000,//動畫延遲,單位ms。 "animationEasing": ""http://動畫曲線 }
隱藏
隱藏組件,參考數據示例。
{ "animationType": "",//動畫方式,可選值:fade,不填無動畫。 "animationDuration": 1000,//動畫延遲,單位ms。 "animationEasing": ""http://動畫曲線 }
更新組件配置
動態更新組件的樣式配置。需要先在組件的樣式面板中,單擊復制配置到剪貼板,獲取組件配置數據。再根據需要在藍圖編輯器配置頁面的數據處理節點中更改對應樣式的字段值。