Skip to main content

 

Patterns

 

Applies only to Traditional Web Apps
OutSystems

Video

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.

  1. Drag the Video pattern into the preview.

  2. Set the mandatory values.

Input Parameters

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

  1. Set a name to the Video pattern.

  2. Create Play and Pause actions on the screen.

  3. In the Logic tab, click on the OutSystems UI Web to go to the Video Folder.

  4. Drag the PlayVideo and PauseVideo actions inside the Play and Pause actions you created.

  5. For each server action, set the WidgetId parameter to the name of the Video pattern.

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

  7. Publish and test.

Notes

Autoplay parameter only works if Muted is set to True.

Device Compatibility

In case of mobile, the controls will always be enabled.

  • Was this article helpful?