About Video components

The Video component is used to add video files, such as MP4 and other formats depending on the web browser.

You can add Video components to forms and control its behavior in Design Mode. However, the components are only functional in the web client.

Component properties

Use these properties to set up or modify how the components display or behave:


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. Empty string value pauses playing the file. Non-empty string value starts or resumes playing the file. For example, `NEWGUID()` and the full syntax: `SETCOMPVALUES(MyAudioUserComp1=NEWGUID())` Note: The ReadOnly/Disable property must be enabled to play the video file.
Behavior > Hidden	Use this property to hide or display the component. The default value is False.
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.

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 are displayed. 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 will play in muted state. To turn the sound 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 is not displayed when the bound data value is an illegal URI or not available. The poster image will overwrite 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 will start 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 are not displayed.
If you enable the component, nothing happens other than it is enabled.
If you enable the component and specify a non-empty value in the bound data, the video file will start 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 will start to play as early as possible.
Bound data: {"controls": true, "poster": "Content/images/MyMovie.jpg"}
The player controls are displayed. If you enable the component and load the bound data with a valid video URL, the video file will start to play as early as possible.
The poster will be the static image, MyMovie.jpg.