Video

The widget can be used to show videos.

Model

{
    "type": "video",
    "actions": {},
    "dataSource": {},
    "mimeType": "video/mp4",
    "toolbars": {},
    "url": "",
    "videoOptions": {}
}
Field Description

actions

Property used to implement action pipelines for selected trigger events.

dataSource

Property used to retrieve data from the system

mimeType

Configure the MIME type for the video widget.

toolbars

Add, hide or customise toolbars for the video widget.

url

This property should contain the URL to the video to be displayed.

videoOptions

Additional configuration options for the video widget. See the Video Options section below for more details.

Video Options

Any valid video attributes can be added to the model. Visit 'The Video Embed element' to see the full list of attributes.

{
    "videoOptions": {
        "autoPlay": true,
        "muted": true,
        "loop": false,
        "controls": true
    }
}

Actions

The actions property of the video widget can be used to implement action pipelines for specific trigger events. The video widget only supports the generic widget action hooks, which can be found here.

Receive messages (Send Topics)

The video widget can receive messages from other widgets. This widget only supports the generic refresh and update topics.

DataSource

If a dataSource is defined as an object, the message returned by the data is determined by whether the type field matches the widget type. If the type field in the payload matches the widget type, then any matching model properties defined in the payload will be merged to the model. However, if the type field is not defined or does not match the widget type, then the url and mimeType fields are checked in the payload and merged into the model. If the type, url and mimeType fields are not defined in the payload, then no fields from the payload will be merged into the model.

When the payload is defined as a string, then the payload is assigned to the url field. If the payload is defined as an array, then no changes are merged to the model.

DataSource Pipeline

DataSource Examples

The sections below contain examples of the message payload returned by the dataSource on the Video widget and the expected merge behavior when applied to the model.

Message payload defined as an object where the type field matches the widget type

Consider the following example where the message payload returned by the dataSource contains a type field which matches the widget type. In this case, any matching model properties defined in the payload will be merged to the model, namely the captionBar, mimeType and videoOptions fields in the following example.

{
    "payload": {
        "type": "video",
        "captionBar": false,
        "mimeType": "video/mp4",
        "videoOptions": {
            "autoplay": false,
            "loop": true
        }
    }
}

Message payload, defined as an object, with no type field but the url or mimeType field is defined

Suppose that the message payload returned by the dataSource does not contain a type field which matches the widget type. Then, the url and mimeType fields will be checked for in the payload and if defined, these will be merged into the model. In the following example, only the mimeType field is defined and so, the mimeType is the only field from the payload which is merged to the model.

{
    "payload": {
        "captionBar": false,
        "mimeType": "video/mp4",
        "videoOptions": {
            "autoplay": false,
            "loop": true
        }
    }
}

Message payload defined as an object, where the type, url and mimeType fields are not defined

If the message payload returned by the dataSource does not contain a type, url or mimeType field, then no fields from the payload will be merged to the model.

{
    "payload": {
        "captionBar": false,
        "videoOptions": {
            "autoplay": false,
            "loop": true
        }
    }
}

Similarly, this merge behavior is observed when the message payload is defined as an array.

Toolbars

The video widget supports multiple custom toolbars. For information on configuring custom toolbars, see the toolbars section in the widget documentation.

Tools

The following tools have a default implementation in the video widget:

Icon Name Description

Refresh Btn

Refresh

Refreshes the widget.

Spacer

Configures the alignment of the tools in the widget toolbar