本文介紹螢石云播放器全量選擇時各配置項的含義。
圖表樣式
螢石云播放器是媒體組件的一種,支持自定義視頻的URL地址,支持RTMP和HLS協議的視頻流,能夠在數據看板中添加視頻播放器來播放您的視頻,同時視頻會按照原始比例進行展示。
樣式面板
搜索配置:單擊樣式面板右上角的搜索配置項圖標,可在搜索配置面板中輸入您需要搜索的配置項名稱,快速定位到該配置項,系統支持模糊匹配。詳情請參見搜索配置項。
尺寸:包括組件的寬度和高度,單位為px。
定位:包括組件的橫坐標和縱坐標,單位為px。橫坐標為組件左上角距離頁面左邊界的像素距離,縱坐標為組件左上角距離頁面上邊界的像素距離。
旋轉:以組件的中心為中心點,進行旋轉,單位為度(°)。
手動輸入角度值,控制組件的旋轉角度。
單擊圖標,控制組件左右翻轉樣式。
單擊圖標,控制組件上下翻轉樣式。
不透明度:取值范圍為0~1。為0時,圖表隱藏;為1時,圖表全部顯示。默認為1。
視頻流地址:視頻流的URL地址,也可以在數據頁簽中配置,優先使用數據面板中的配置。
視頻流類型:視頻流的協議類型,可選:rtmp和hls。
說明組件需要提供視頻流播放地址。網頁版的螢石云播放器不支持認證的方式接入。需要客戶端認證的可以接入螢石云開放平臺,獲取螢石云的視頻流地址進行播放。
循環播放:打開開關,播放器內視頻循環播放;關閉開關,視頻只播放一次。
靜音:打開開關,視頻靜音播放。
隱藏控制條:打開開關,隱藏控制條。
數據源面板
source
:(可選)視頻流地址,與視頻流地址配置項功能相同。若兩者都進行了配置,則優先使用數據源面板中的配置。
數據項配置 | 說明 |
數據源 | 組件的數據源中通過代碼編輯或可視化編輯展示了組件所包含的數據字段。也可以修改數據類型,靈活配置組件數據。 |
數據映射 | 當您需要自定義圖表字段配置時,可以在數據映射模塊設置不同的字段映射內容,將這些字段映射到組件對應的字段上。無需修改數據源中的字段,就可以實現數據的實時匹配。也可以單擊圖標對字段分別樣式配置。 |
過濾器 | 打開過濾器,選擇已創建的數據過濾器或新建數據過濾器,并配置數據過濾器腳本,實現數據的篩選功能。詳情請參見管理數據過濾器。 |
數據響應結果 | 實時展示了組件所使用的數據。當組件數據源發生變化時,數據響應結果會對應展示最新的數據。如果系統反應延遲,您可以單擊右側的圖標,查看數據響應結果,也可以單擊右側的圖標,獲取組件的最新數據。您也可以單擊查看示例,查看當前組件的響應結果示例。 |
禁止加載態 | 勾選復選框,在組件更新和預覽數據看板時,將看不到組件初始化時的加載內容,去勾選則相反。默認為去勾選狀態。 |
受控模式 | 勾選復選框,組件初始化狀態下不請求數據,僅通過全局變量或藍圖編輯器配置的方法發起請求數據;去勾選復選框,可以使用自動更新請求數據。默認為去勾選狀態。 |
自動更新請求 | 勾選復選框,可以手動輸入輪詢的時間頻次設置動態輪詢。清除后則不會自動更新,需要手動刷新頁面,或通過藍圖編輯器和全局變量事件來觸發請求更新數據。 |
高級面板
此組件沒有交互事件。
藍圖交互
單擊頁面左上角的圖標,進入藍圖頁面。
在圖層節點頁簽下,添加當前組件至主畫布中。
查看藍圖配置參數。
事件
事件
說明
當數據接口請求完成時
數據接口請求返回并經過過濾器處理后拋出的事件,同時拋出處理后的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://動畫曲線 }
更新組件配置
動態更新組件的樣式配置。需要先在組件的樣式面板中,單擊復制配置到剪貼板,獲取組件配置數據。再根據需要在藍圖編輯器配置頁面的數據處理節點中更改對應樣式的字段值。