Using Media Player metadata in HTML pages

How to use metadata from Media Players in HTML pages

This is a tutorial that describes how the playback state of currently active Media Players can be propagated and used in HTML pages within the production. The functionality is available from Agile Live version 6.0.0.

Subscribing to metadata

HTML pages loaded into the Rendering Engine can subscribe to metadata from Media Players located on other input slots of the Rendering Engine. The metadata can for instance be used to create graphics to aid the production crew.

In order for Media Player metadata to propagate to an HTML page, the page must first subscribe to metadata updates. This is done in the JavaScript code of the HTML page by calling the function window.aclInputSlotMetadataSubscribe() when the page has been loaded. After doing this the global variable aclInputSlotMetadata will become available and updated periodically. In the simplest case:

<body onLoad="window.aclInputSlotMetadataSubscribe()">

Metadata structure

aclInputSlotMetadata is a JSON object with the Media Player information located in the “media_players” section and further organized by which input slot the Media Player is located at. An example with a media file being played at input slot number 2:

var aclInputSlotMetadata = {
   "media_players": {
     "2": {
         "file_name": "/mnt/media/ads/",
         "is_paused": false,
         "is_looping": true,
         "current_time_ms": 400000,
         "start_time_ms": 300000,
         "input_duration_ms": 1800000,
         "duration_ms": 120000,
         "time_left_ms": 20000

HTML example

The file “media-playback.html” located in the Agile Live examples ZIP file provides a full example of how to subscribe to, and use, the metadata from a Media Player. It can be loaded into the Rendering Engine to create a view that displays the metadata of the currently playing file. The HTML page accepts the Media Player’s input slot number as a query parameter. For example, if a Media Player is located at input slot number 4 and media-playback.html is served at localhost:8899 (on the same machine as the Rendering Engine is running) the following commands can be used to load the page into a new input slot:

html create 5 1920 1080
html load http://localhost:8899/media-playback.html?slot=4