Video

Chart style

The Video widget is a media component that plays MP4 videos. You can customize the video URL, playback properties, and player appearance.

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. Search configuration items.

  • Size: the width and height of the widget. Unit: pixels.

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

  • Rotate: The widget is rotated around the center of the widget. Unit: degrees.

    • Enter the rotation angle directly, or click + or - to adjust the value.

    • Click the icon to flip the widget style.

    • Click the icon to flip the widget style.

  • Opacity: a value from 0 (hidden) to 1 (fully visible). Default: 1.

• Video URL: the URL of an MP4 video, for example, xx.test.com/video.mp4. You can also set the URL in the Data Source panel. The Data Source value takes precedence.

• NoVideo Text: the placeholder text displayed at the top of the widget when no video is specified.

• Autoplay: whether to play the video automatically on preview or publish pages.

  Important

  • For Chrome 66 or later, enable autoplay as follows.

    Go to chrome://flags/#autoplay-policy and set Autoplay policy to No user gesture is required.

  • In Chrome 66 or later, videos autoplay in mute mode by default.

• Loop: whether to loop the video on preview or publish pages.

• Control Bar: whether to display a control bar at the bottom of the video player.

• Muted Play: whether to mute the video.

• Volume (%): the playback volume. You can drag the control bar to adjust the volume. Takes effect only when Muted Play is off.

• Maintain Original Size: preserves the original video dimensions.

Data Sources panel

url: (optional) the URL of the video. Functions the same as Video URL in the Style panel. If both are set, the data source value 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 after a data interface request is returned and processed by a filter. The processed JSON data is passed with the event. View specific examples in the Data Response Result section of the Data Source tab.
     When playback starts	Triggered when the video starts playing.
     When playback ends	Triggered when video playback ends.

   • Action

     Action	Notes
     Request Data Interface	Requests server data again. Data from an upstream node is passed as a parameter. For example, if the 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 for redrawing without requesting the server again. View specific examples in the Data Response Result section of the Data Source tab.
     Start the playback	Starts video playback. No parameters required.
     Pause playback	Pauses video playback. No parameters required.
     End playback	Stops video playback. No parameters required.
     Move	Moves the widget to a specified location. 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 /Hide	Toggles whether the widget is displayed or hidden. No parameters are required.
     Display	Displays the widget. 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. 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 get the configuration data, then modify the style field in the Blueprint Editor data processing node.