Video Widget

The video widget plays a video from a URL.

The video URL can take one of three formats:

• Simple string
• Map of URLs candidates
• List of URL candidates

String URL

If it is a simple URL string that video file will be played.

url: 'https://www.youtube.com/embed/eIG5z-DcrIo'

Map of URLs

If it is a map, the widget value is used as a key to the map to select a corresponding URL. A key of "*" will be selected if there is no better match.

url: {
    sunny: 'https://www.youtube.com/embed/eIG5z-sunny'
    cloudy: 'https://www.youtube.com/embed/eIG5z-cloudy',
    '*': 'https://www.youtube.com/embed/eIG5z-default',
}

List of URLs

If the URL value is a list, the list must contain candidates with expressions that are evaluated at run-time to select the best match. For example:

[
    { 
        expression: 'temp > 40', 
        value: 'https://www.youtube.com/embed/eIG5z-DcrIo',
    },
    {
        expression: true,
        value: 'https://www.youtube.com/embed/eIG5z-other'
    }
]

Autoplay of video is typically prevented by the browser and may require the video to be muted at first.

Configurable components

Class Name	Description
card	Background card component
primary	Primary video component

Widget Properties

Name	Description
url	URL string, map or list of URLs
value	Widget data value used to select the image from the URL map or list

Common CSS Properties

Name	Description
--w-autoplay	Set to true to autoplay the video. Defaults to false.
--w-end	End time of the video in seconds.
--w-fullscreen	Set to true to allow the video to be played in fullscreen. Defaults to false.
--w-loop	Set to true to loop the video. Defaults to false.
--w-start	Start time of the video in seconds.