Video
You can use the Video UI pattern to embed a native video player into your 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 the Video UI Pattern
-
In Service Studio, in the Toolbox, search for
Video
.The Video widget is displayed.
-
From the Toolbox, drag the Video widget into the Main Content area of your application's screen.
-
On the Properties tab, set the SourceFile property to the source video file you want to embed in your app.
-
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 as follows:
-
On the Data tab, right-click the Resources folder and select Import Resource.
-
Browse and select the video file you want to add and click Open.
-
On the Resource properties tab, from the Deploy Action drop-down, select Deploy to Target Directory.
-
On the Interface tab, from the Widget Tree, select the Video pattern.
-
In the SourceFile property, enter the runtime path of the video file.
Tip: You can copy the runtime path from the Resource Runtime Path property tab.
-
-
-
On the Video Properties tab, you can also define (optional) properties, such as the height and width of the video and the audio settings.
-
After following these steps and publishing the module, you can test the pattern in your app.
Properties
Property | Description |
---|---|
SourceFile (Text): Mandatory | The video file URL or the runtime path of the resource video file. |
Width (Text): Optional | Width (in pixel or percentage) of the video. Examples
|
Height (Text): Optional | Height (in pixel or percentage) of the video. Examples
|
Autoplay (Boolean): Optional | If True, the video starts playing as soon as the page is rendered. If False, the video doesn't play until the Play video control is clicked. This is the default. |
Loop (Boolean): Optional | If True, the video restarts playing as soon as it ends. If False, it does not replay. This is the default. |
Muted (Boolean): Optional | If True, the audio of the video is disabled. If False, the audio is enabled. This is the default. |
Controls (Boolean): Optional | If False, the video controls are disabled. If True, the video controls are enabled. This is the default. Note In the case of mobile apps, the controls are always enabled. |
ExtendedClass | Add custom style classes to the Video UI Pattern. You define your custom style classes in your application using CSS. Examples
|
Notes
Autoplay parameter only works if Muted is set to True.
Device Compatibility
In case of mobile, the controls will always be enabled.