Video
Displays a video.
Attributes
Common
ID
Sets the object's ID.
The ID identifies the object and is used to reference it in UISet actions, allowing to change its attributes dynamically.
The ID is not unique, it can be shared among multiple objects to quickly change a common attribute.
IDs can't be changed with a UISet action, but they can have a Value Binding assigned to them. Value Bindings on IDs allow an object to be dynamically attached to a set of attribute values.
E.g. the following Value Binding switches the ID of the object between mybutton1 and mybutton2 based on the value of the UISet button.address:
Value binding:
"mybutton" + ui('button', 'address')
UISet:
UISet('button', 'address', '1') switches the ID to mybutton1
UISet('button', 'address', '2') switches the ID to mybutton2
Position and Size
Position
Sets the object's position.
Attribute Values
| Value | Description | Example |
|---|---|---|
| x<left>y<top> | Specify left/top coordinates in pixels. | x10y20 |
This attribute is available when parent's layout is neither "flex" nor "grid".
When parent's layout is neither "flex" nor "grid", this attribute defaults to x0y0.
Flex Grow
Specifies if the objects should grow to fill the available space.
Attribute Values
| Value | Description |
|---|---|
| false | Default value. Objects do not grow to fill the available space. |
| true | Objects expand to fill the available space. |
This attribute is available when parent's layout is "flex".
The default value is: false.
Flex Shrink
Specifies if the objects should shrink to fit the available space.
Attribute Values
| Value | Description |
|---|---|
| false | Default value. Objects do not shrink to fit the available space. |
| true | Objects shrink to fit the available space. |
This attribute is available when parent's layout is "flex".
The default value is: false.
Column
Specifies the starting column of the object inside a grid container.
Minimum value is 1.
Attribute Values
| Value | Description |
|---|---|
| <int> | Column index starting from 1. |
This attribute is available when parent's layout is "grid".
This attribute is experimental. It might not work properly and it might be modified or removed in a future release.
Column Span
Specifies how many grid columns the object spans.
Minimum value is 1.
Attribute Values
| Value | Description |
|---|---|
| <int> | Column span starting from 1. |
This attribute is available when parent's layout is "grid".
When parent's layout is "grid", this attribute defaults to 1.
This attribute is experimental. It might not work properly and it might be modified or removed in a future release.
Row
Specifies the starting row of the object inside a grid container.
Minimum value is 1.
Attribute Values
| Value | Description |
|---|---|
| [empty] | Auto placement by the grid. |
| <int> | Row index starting from 1. |
This attribute is available when parent's layout is "grid".
When parent's layout is "grid", this attribute defaults to auto.
This attribute is experimental. It might not work properly and it might be modified or removed in a future release.
Row Span
Specifies how many grid rows the object spans.
Minimum value is 1.
Attribute Values
| Value | Description |
|---|---|
| <int> | Row span starting from 1. |
This attribute is available when parent's layout is "grid".
When parent's layout is "grid", this attribute defaults to 1.
This attribute is experimental. It might not work properly and it might be modified or removed in a future release.
Width
Sets the object's width in pixels.
Possible values are from 1 to 2000.
Height
Sets the object's height in pixels.
Possible values are from 1 to 2000.
Video
Video
Specifies the relative path of the image file to show.
The path is relative to one of the following folders:
- Common images folder, for images shared among projects (www/img)
- Project images folder, for project-specific images (www/projects/<project>/img) If an image with the same relative path is found in both folders, the project image is used.
Omit the file extension to support multiple formats, including mp4, webm, and ogg. m3u8 files are also supported for HLS streams.
Attribute Values
| Value | Description |
|---|---|
| <video> | Path to the video file. |
Mode
Specifies the video's mode.
Attribute Values
| Value | Description |
|---|---|
| stop | Default value. Stops the video. |
| auto | Plays the video once. |
| loop | Plays the video in a loop. |
The default value is: stop.
Controls
Specifies whether the video's controls are displayed.
Attribute Values
| Value | Description |
|---|---|
| false | Default value. Controls are hidden. |
| true | Controls are displayed. |
The default value is: false.
Muted
Specifies whether the video is muted.
Attribute Values
| Value | Description |
|---|---|
| false | Default value. Video is not muted. |
| true | Video is muted. |
The default value is: false.
Play
Play or pause the video. Warning: by default browsers won't allow autoplaying videos with sound, without user interaction.
Attribute Values
| Value | Description |
|---|---|
| true | Play the video. |
| false | Pause the video. |
| toggle | Toggle play/pause. |
This attribute is live. It can't be set from the Project Editor, it needs to be set dynamically with a UISet.
Meta
Comment
Specifies a comment, visible only in the Project Editor. It can be used to add a note or a tag to the object. The filter in the object's SELECT panel applies to the comment as well.
This attribute is static. Its value can't be changed dynamically with a uiSet command or with a value binding.
Exclude
Excludes the object from the UI. Useful to temporarily hide an object without deleting it. Different from the "Visible" attribute, which hides the object in the UI but keeps it in the project, allowing it to be shown again with a UISet.
Attribute Values
| Value | Description |
|---|---|
| false | Default value. Object is included in the UI. |
| true | Object is excluded from the UI. |
The default value is: false.
This attribute is static. Its value can't be changed dynamically with a uiSet command or with a value binding.