Skip to main content

 

 

 

 

Template:OutSystems/Documentation_KB/Breadcrumb_New_Layout

 

 

Template:OutSystems/OSLanguageSwitcher

 

Applies only to Traditional Web Apps

 

 

OutSystems

Video

Template:OutSystems/Documentation_KB/ContentCollaboration
  • Edit
    Collaborate with us
    Edit this page on GitHub
  • 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

    1. In Service Studio, in the Toolbox, search for Video.

      The Video widget is displayed.

    2. From the Toolbox, drag the Video widget into the Main Content area of your application's screen.

    3. 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:

        1. On the Data tab, right-click the Resources folder and select Import Resource.

        2. Browse and select the video file you want to add and click Open.

        3. On the Resource properties tab, from the Deploy Action drop-down, select Deploy to Target Directory.

        4. On the Interface tab, from the Widget Tree, select the Video pattern.

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

    4. On the Video Properties tab, you can also define (optional) properties, such as the height and width of the video and the audio settings.

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

    • Blank - The video is 100% wide. This is the default value.
    • 150 - The video is 150px wide.
    Height (Text): Optional Height (in pixel or percentage) of the video.

    Examples

    • Blank - The video is 100% high. This is the default value.
    • 150 - The video is 150px high.
    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

    • Blank - No custom styles are added (default value).
    • "myclass" - Adds the myclass style to the Video UI styles being applied.
    • "myclass1" "myclass2" - Adds the myclass1 and myclass2 styles to the Video UI styles being applied.

    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?