The Video UI pattern allows you to embed a native video player into your application.
Use Video as a powerful tool to engage users. But always remember to show all the essential information as text in the application.
Note: if you want to stream videos from YouTube, Vimeo, or others, see the How to Add Video to Your Applications article.
How to use
In the Interface tab of Service Studio, drag the Video block from the Toolbox into your application's screen. At the Properties tab define the source video file to embed. All other parameters such as controls or size are optional.
Drag the Video pattern from the toolbox into the preview.
Set the SourceFile value:
If using an external source file, insert the file URL.
If using a local file, include the video in a module as a resource and use the runtime path:
In the Data tab, right-click the Resources folder and select Import Resource.
Browse the video file and click Open.
- Go to the Interface tab and select the screen where you inserted the Video pattern.
- Select the Video pattern.
In the Properties tab, click at the SourceFile field and type the runtime path
"Resources.video-file-name". See an example below:
The following table describes all the available input parameters:
|Input Name||Description||Type||Mandatory||Default Value|
|SourceFile||Insert the video file URL or the runtime path of the resource video 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.