Embeds a native video player.
Use Video as a powerful tool to engage users. However, always show all essential information as text in the application.
How to use
Drag the Block to the screen and define the source video file to be embedded. All other parameters such as controls or size are optional.
Drag the Video pattern into the preview.
Set the mandatory values.
|Input Name||Description||Type||Mandatory||Default Value|
|SourceFile||Used when video is a resource file.||Text||True||none|
|Width||Width (in pixel or percentage) is added for the video, otherwise the original video Width is detected.||Text||False||"100%"|
|Height||Height (in pixel or percentage) is added for the video, otherwise the original video Height is detected.||Text||False||"100%"|
|Autoplay||If True, specifies that the video will start playing as soon as it is ready.||Boolean||False||False|
|Loop||If True, specifies that the video will restart playing as soon as it ends.||Boolean||False||False|
|Muted||If True, specifies that the audio of the video will be disabled.||Boolean||False||False|
|Controls||If False, disabled video controls. In case of mobile, the controls will always be enable.||Boolean||False||True|
|ExtendedClass||Add custom style classes to this Block.||Text||False||none|
Layout and Classes
Advanced Use Case
Use custom Play and Pause buttons
Set a name to the Video pattern.
Create Play and Pause actions on the screen.
In the Logic tab, click on the OutSystems UI Web to go to the Video Folder.
Drag the PlayVideo and PauseVideo actions inside the Play and Pause actions you created.
For each server action, set the WidgetId parameter to the name of the Video pattern.
Create the elements you want to act as buttons. You can also wrap icons around containers and set the OnClick to the Play and Pause actions.
Publish and test.
Autoplay parameter only works if Muted is set to True.
In case of mobile, the controls will always be enabled.