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

Properties	Description
Video source	specify the location of the video file or provide a URL to an external video source
Autoplay	enables the video to start playing automatically when the webpage loads
Loop	allows the video to play continuously in a loop
Show controls	whether the video player controls are visible or hidden
Mute	allows the video to play without any sound
Volume	controls the audio level of the video
Event Handler	Trigger queries, control components, or call other APIs in response to component events.
Tooltip	Users can enter the component tooltip here. The tooltip will be shown when it is focused. Markdown format is supported.
Hidden	Dynamically 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.

Properties	Description
Video URL	video source url

• setVolume

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

Properties	Description
Volume	numeric 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

Properties	Description
Speed	numeric 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)

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

Event handler

Event	Description
Play	perform specific actions or execute code when the video playback begins
Pause	handle the pause event and execute actions accordingly
Loaded	performing 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
Ended	handle 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 name	Description
autoplay	A boolean value that determines whether the video should automatically start playing when it is loaded.
controls	A boolean value that determines whether the video player controls, such as play, pause, and volume, are displayed to the user.
displayName	A string value that represents the name or title of the video.
events	An array or object that defines the event handlers associated with the video component, such as play, pause, loaded, ended, etc.
hidden	A boolean value that determines whether the video component is hidden from the user interface.
loop	A boolean value that determines whether the video should automatically restart playing from the beginning once it reaches the end.
muted	A boolean value that determines whether the video should be muted, i.e., played without sound.
playing	A boolean value that indicates whether the video is currently playing.
tooltipText	string value that represents the tooltip or hovers text to display when the user hovers over the video component.
url	A string value that specifies the URL or source of the video file to be played.
volume	A 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

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}}.

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}}.

Step 3 Test

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