fluorite-cloud-player

Chart style

Fluorite Cloud Player is a media component that supports custom video URLs with RTMP and HLS video streams. You can add it to the dashboard to play videos, which are displayed at the original scale.

Style Panel

• Search Configuration: Click the icon in the upper-right corner of the Style panel to search for configuration items by name. Fuzzy match is supported. For more information, see Search configuration items.

  • Size: the width and height of the widget, in pixels.

  • Positioning: the x-axis and y-axis of the component, in pixels. X-coordinate is the pixel distance from the upper-left corner of the widget to the left edge of the canvas. Y-coordinate is the pixel distance from the upper-left corner of the widget to the top edge of the canvas.

  • Rotate: rotates the widget around its center, in degrees.

    • Enter a value in the Rotation Angle spin box, or click the plus sign (+) or minus sign (-) to adjust it.

    • Click the icon to flip the widget style.

    • Click the icon to flip the widget style.

  • Opacity: valid values: 0 to 1. A value of 0 hides the widget, and 1 displays it fully. Default value: 1.

• Video Stream URL: the URL of the video stream. You can also configure the URL on the Data tab.

• Video Stream Type: the protocol of the video stream. Valid values: RTMP and HLS.

  Note

  You must specify a video stream URL. However, the fluorite cloud player on a web page cannot be integrated based on client authentication. You can access the fluorite cloud platform to obtain the video stream URL.

• Video Loop: enables continuous loop playback. If you turn off the switch, the video plays only once.

• Muted Play: plays the video in mute mode.

• Hide control bar: hides the control bar when the switch is turned on.

Data Sources panel

source: (Optional) The video stream URL. This field serves the same purpose as the video stream address configuration item. If both are configured, the value in the Data Source panel takes precedence.

Advanced Panel

This widget does not support interaction events.

Blueprint Interaction

1. Click the icon in the upper-left corner to go to the Blueprint page.

2. On the Layer Nodes tab, add the widget to the main canvas.

3. View blueprint configuration parameters.

   • Event

     Event	Notes
     When the data interface request is completed	Triggered with the processed JSON data after a data interface request is completed and processed by a filter. For specific data examples, see the Data Response Result section of the Data Source tab in the right-side configuration panel of the canvas editor.

   • Action

     Action	Notes
     Request Data Interface	Requests server data again, using data from an upstream data processing node or layer node as parameters. For example, if the Fluorite Cloud Player API data source is https://api.test and the data passed to request data interface is { id: '1'}, the final request URL is https://api.test?id=1.
     Import data	Imports pre-processed data in the widget's drawing format for redrawing, without requesting server data again. For specific data examples, see the Data Response Result section of the Data Source tab in the right-side configuration panel of the canvas editor.
     Clear	Clears the video stream URL. No parameters are required. Use this action to switch between videos or stop playback.
     Move	Moves a widget to a specified location. See the following data example. { // The positioning type. to indicates absolute positioning, whereas by indicates relative positioning. The default value is to. "positionType": "to", // The location, which is indicated by the x and y coordinates. "attr": { "x": 0, "y": 0 }, // The animation type. "animation": { "enable": false, // The duration in which animation is displayed. "animationDuration": 1000, // The animation curve, which can be set to linear|easeInOutQuad|easeInOutExpo. "animationEasing": "linear" } }
     Switch Display /Display	Toggles whether the widget is displayed or hidden. No parameters are required.
     Display	Displays the widget. See the following data example. { "animationType": "",// The animation method. Valid value: fade. If you do not set this parameter, no animation is available. "animationDuration": 1000,// The animation delay. Unit: ms. "animationEasing": ""// animation curve }
     Hide	Hides the widget. See the following data example. { "animationType": "",// The animation method. Valid value: fade. If you do not set this parameter, no animation is available. "animationDuration": 1000,// The animation delay. Unit: ms. "animationEasing": ""// animation curve }
     Update component configurations	Dynamically updates widget style configurations. In the Style panel, click Copy Configuration to Clipboard to obtain the configuration data. Then modify the style field for the data processing node in Blueprint Editor.