Skip to main content

Video

Video Component

BRICKS TOOLS avatar
Written by BRICKS TOOLS
Updated over 2 weeks ago

  • Introduction

The Video component is used to display video content, allowing users to render videos on their devices.

On the Canvas, the Video component can be presented in various layouts and arrangements.

  • Frame Block

The Frame attributes of this component are the same as those of the Rect component. For details, refer to the Rect component’s Frame section.

  • Properties Block

The basic Properties inherit from the Rect component. For details, see the Rect component’s Properties section.

Additional Properties

Property Name

Property Type

Description

Path

One Of

  • String

  • Object

  • Array of

One Of (String / Object / Array)

The video path list or the single video file path (URL or video file from Media Box).

The video path list or a single video file path (URL or Media Box file).
• String: Directly enter a video URL or select a video from Media Box.
• Object: Create an Object variable in Property Bank, add a url string in the variable Value, and enter the video link.
• Array: Create an array of strings or objects in Property Bank to include multiple video URLs or objects.

MD5

String

String (128-bit hash value)

The checksum of the file.

Automatically generated checksum for ensuring file integrity during transmission.

Resize mode

One Of

list

The resize methods that will be applied when the image's dimensions differ from the image brick's (the container's) dimensions.

  • contain

  • cover

  • stretch

Defines how the video is resized when its dimensions differ from the container (video brick).
• contain: Scales video while maintaining aspect ratio until both width and height fit within the container. May leave empty space inside.
• cover: Scales video while maintaining aspect ratio until both width and height cover or exceed the container. May crop overflow.
• stretch: Stretches video to fill the container without maintaining aspect ratio.

Repeat

Boolean

Boolean (Yes/No)

To set whether the video/ video list will be played on repeat.

Sets whether the video or video list should play on repeat.

Replay On Error

Boolean

Boolean (Yes/No)

To set whether to replay the video when errors occurred.

Sets whether the video should replay when an error occurs.

Replay Timeout

ms

Milliseconds (ms)

(When repeat is set to Yes and ReplayOnError is set to Yes)

The replay timeout is the wait time before the video/ video list is being replayed.

Sets the wait time before replaying the video or video list after ending or encountering an error.

  • Properties – Border Block

The border attributes are the same as those of the Rect component. For details, see the Rect component’s Border section.

  • Animations Block

The animation event attributes are the same as those of the Rect component. For details, see the Rect component’s Animation section.

Additional Animation Events

Next Video

Animation that will be triggered when the next video is about to be played.

Animation triggered when the next video is about to play.

Round End

Animation that will be triggered when all videos on the list are done playing.

Animation triggered when all videos in the list have finished playing.

On Load

Animation that will be triggered when the video is loaded.

Animation triggered when the video is successfully loaded.

On Error

Animation that will be triggered when the video is not successfully loaded.

Animation triggered when the video fails to load.

  • Events

The event attributes are the same as those of the Rect component. For details, see the Rect component’s Event section.

Additional Events

Next Video

Event that will be triggered when the next video is about to be played.

Event triggered when the next video is about to play.

Round End

Event that will be triggered when all videos on the list are done playing.

Event triggered when all videos in the list have finished playing.

On Load

Event that will be triggered when the video is loaded.

Event triggered when the video is successfully loaded.

On Error

Event that will be triggered when the video is not successfully loaded.

Event triggered when the video fails to load.

NEXT - Video Steaming Component

Did this answer your question?