About Video components

The Video component is used to add video files, such as MP4 and other browser-friendly video formats.

You can add a Video component to a form and control its behavior in the designer (Web Designer in the web client, Design Mode in the Windows client). However, the component is only functional in the web client.

Component properties

Use these properties to set up or modify how the component displays or behaves:


Property	Description
Data Source > Binding	Use this property to add the video file and to start or stop playing the file. To add the file, specify the URL to the video file or a data-URI that contains the entire file. For example: https://www.w3schools.com/html/mov_bbb.mp4 http://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4 Note: The video data-URI may be supported by some browsers, but it is not supported by Mongoose. To start or pause playing the video file, specify its URL or data-URI in the initialization string. An empty string value pauses playing the file. A non-empty string value starts or resumes playing the file. For example, `NEWGUID()` and the full syntax: `SETCOMPVALUES(MyAudioUserComp1=NEWGUID())` Note: To play the video file, the ReadOnly/Disable property must be enabled.
Behavior > Hidden	Use this property to hide or display the component. The default value is False, which displays the component.
Behavior > ReadOnly/Disable OR Behavior > Enabled When	Use this property to enable the component to play the video file. The default value is False. If set to True, the framework below the player controls is enabled. Note: When the player controls are displayed, they are automatically enabled independent of the value of this property.
Miscellaneous > Specific Attributes > User Component Initialization String	Use this property to set up the component initialization string.

Initialization string

In the User Component Initialization String property, specify the initialization string. Follow this format:

{"loop":value, "controls":value, "source":value, "muted":value, "poster":value, "crossorigin":value}

Use these values:


String	Value
`loop`	The default value is False. If set to True, the video file continuously loops and replays. The video file can be paused and restarted while in a continuous loop.
`controls`	The default value is False. If set to True, the browser-specific player controls, such as play, pause, and volume options display. Note: The Hidden property must be disabled to display the player controls. When player controls are displayed, its functions are always enabled.
`source`	The default value is blank. To start or play the video file, specify the video file's URL or data-URI.
`muted`	The default value is False. If set to True, the video file plays with the audio portion muted. To turn the audio back on, the player controls, which have the volume and mute buttons, must be displayed.
`poster`	The default value is blank. To display an image file when the video is not available, specify the image file's URL or data-URI. The video does not display when the bound data value is an illegal URI or not available. The poster image overwrites any error message from the player.
`crossorigin`	Use this string to indicate whether to use CORS to fetch the data or not. The default value is blank, which means the data is fetched without a CORS request or without sending the `Origin:` header. The valid values are browser-dependent, but typically are `anonymous` and `use-credentials`.

Possible scenarios:

Empty string: { }

If you enable the component and load the bound data with a valid video URL, the video file starts to play as early as possible.

source string only:

{"source":
                "http://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4"}

If the bound data value is empty, the source data is simply noted. There may be preloading, but that is dependent on the browser. The player controls do not display.

If you enable the component, nothing happens other than that it is enabled.

If you enable the component and specify a non-empty value in the bound data, the video file starts to play.

controls string only:

{"controls": true}

The player controls are displayed. If you enable the component and load the bound data with a valid video URL, the video file starts to play as early as possible.

Bound data:

{"controls": true, "poster":
                "Content/images/MyMovie.jpg"}

The player controls display. If you enable the component and load the bound data with a valid video URL, the video file starts to play as early as possible.

The poster will be the static image, MyMovie.jpg.