跳到主要内容

Video

The video component in ILLA Cloud is a powerful tool that allows users to incorporate multimedia content into their applications or projects. With this feature, users can seamlessly integrate videos into their user interfaces and create engaging and interactive experiences for their end-users.

The video component supports various video formats, including popular formats such as MP4, AVI, and MOV. Users can upload videos directly from their devices or provide URLs to external video sources. This flexibility enables users to leverage existing video content or create new videos specifically for their applications.

Properties

PropertiesDescription
Video sourcespecify the location of the video file or provide a URL to an external video source
Autoplayenables the video to start playing automatically when the webpage loads
Loopallows the video to play continuously in a loop
Show controlswhether the video player controls are visible or hidden
Muteallows the video to play without any sound
Volumecontrols the audio level of the video
Event HandlerTrigger queries, control components, or call other APIs in response to component events.
TooltipUsers can enter the component tooltip here. The tooltip will be shown when it is focused. Markdown format is supported.
HiddenDynamically control whether the component is hidden. You can change the hidden status through a dynamical boolean value.

Method

You can use other components to control the component. We support the following eight methods:

  • play

start playing the video. When invoked, it initiates the playback of the video from the current position.

  • pause

pause the video playback. When called, it temporarily stops the video at its current position.

  • showControls

toggle the visibility of the video player controls. By invoking this method, the controls can be displayed or hidden, allowing users to interact with the video playback.

  • setVideoUrl

dynamically change the source or URL of the video.

PropertiesDescription
Video URLvideo source url
  • setVolume

adjusting the audio volume of the video. It takes a numeric value as the parameter volume

PropertiesDescription
Volumenumeric value, ranging from 0 to 1, where 0 represents muted or no sound, and 1 represents maximum volume.
  • setSpeed

changing the playback speed of the video. It accepts a numeric value as the parameter Speed

PropertiesDescription
Speednumeric value. 1 represents the normal playback speed. Values less than 1 slow down the video, while values greater than 1 speed it up.
  • setLoop

enable or disable the looping functionality of the video. By passing a boolean value as a parameter, the video can be set to loop continuously or play only once.

  • seekTo

seeking a specific time or position in the video. It takes numerical values as the parameter time(s)

PropertiesDescription
Time(s)a numeric value representing the desired time in seconds as a parameter and adjusts the playback position accordingly.

Event handler

EventDescription
Playperform specific actions or execute code when the video playback begins
Pausehandle the pause event and execute actions accordingly
Loadedperforming tasks that need to be executed after the video has been fully loaded, such as updating the UI to display the video duration or initializing additional features related to the video playback
Endedhandle the end of the video and perform actions such as displaying a replay button, showing related content, or executing any other desired logic when the video has finished playing

Data

The component has some commonly used data, which can be called via {{componentName.propertyName}} in the app.

Property nameDescription
autoplayA boolean value that determines whether the video should automatically start playing when it is loaded.
controlsA boolean value that determines whether the video player controls, such as play, pause, and volume, are displayed to the user.
displayNameA string value that represents the name or title of the video.
eventsAn array or object that defines the event handlers associated with the video component, such as play, pause, loaded, ended, etc.
hiddenA boolean value that determines whether the video component is hidden from the user interface.
loopA boolean value that determines whether the video should automatically restart playing from the beginning once it reaches the end.
mutedA boolean value that determines whether the video should be muted, i.e., played without sound.
playingA boolean value that indicates whether the video is currently playing.
tooltipTextstring value that represents the tooltip or hovers text to display when the user hovers over the video component.
urlA string value that specifies the URL or source of the video file to be played.
volumeA number value between 0 and 1 represents the volume level of the video, where 0 is muted and 1 is the maximum volume.

Example: {{video1.volume}}

Use case

Next, we will demonstrate how to control the video playing with a button.

Step 1 Add Components

Add a Video component and a button component to the canvas.

We set the video source of video component to the youtube link of any video you want to play. Here we will use the default video as example and labeled the button as “Play” as shown below

video_layout

Step 2 Configure the component

For the button component, we can configure it to set the video component playing if the video is not playing.

  1. Click the **button** component to open its inspect page. Under Event handler, click **+ New**.
  2. In the Edit event handler, select Control component in action, and select the video1 component that you want to change as the target of the event.
  3. Choose the play action
  4. In the Only run when field, put {{!video1.playing}}.

video_config

Similarly, to stop the video playing, we create a new Event handler and follow the first two steps the same as above.

  1. Choose the pause action
  2. In the Only run when field, put {{video1.playing}}.

video_config_1

Step 3 Test

Now that when you click the “Play” button, the video should play if not playing and pause if playing.

video_test