Mux Data

Documentation sections

• Scope of support
• Mux Data player settings
• Player code example
• Source change support

Introduction

With the release of Radiant Media Player 5.0.6 we support video-centric analytics through the Mux Data platform. Our integration provides a streamlined, configurable interface to enable out-of-the-box support of Mux Data in Radiant Media Player. The following features are supported:

• Tracking of data for the HTML5 media element
• Tracking of data for hls.js
• Custom errors (hls.js)
• Source change support (playlist & related)

Mux Data player settings

muxDataSettings: Object

Pass Mux Data metadata to the player to enable Mux Data support. A env_key property for the data object of the muxDataSettings object is required for Mux Data support to be enabled in the player. See below for a complete example. The player_name, player_version and player_init_time properties are automatically set by the player. Default: {}.

muxDataUseListData: Boolean

Automatically emit data to Mux Data when a source change happens with our playlist/related layout. Only the video_title property will be updated. If you want to update more properties a custom implementation is required. See below for an example. Default: true.

Player code example

<!-- Include Mux Data library -->
<script src="https://src.litix.io/core/2/mux.js"></script>
<!-- Include Radiant Media Player library -->
<script src="https://cdn.radiantmediatechs.com/rmp/5.7.1/js/rmp.min.js"></script>
<div id="rmpPlayer"></div>
<script>
  var src = {
    hls: 'https://your-hls-url.m3u8'
  };
  // Define Mux Data settings
  var muxDataSettings = {
    debug: false,
    data: {
      env_key: 'your-mux-data-env-key',
      viewer_user_id: 'viewer-user-id',
      video_title: 'video-title'
      // player_name, player_version, player_init_time will automatically be set by player at run time
    }
  };
  var settings = {
    licenseKey: 'your-license-key',
    src: src,
    width: 640,
    height: 360,
    contentMetadata: {
      poster: [
        'https://your-poster-url.jpg'
      ]
    },
    // Pass Mux Data settings
    muxDataSettings: muxDataSettings
  };
  var elementID = 'rmpPlayer';
  var rmp = new RadiantMP(elementID);
  rmp.init(settings);
</script>

Source change support

For playlist and related the player will automatically emit source change data to Mux Data when the muxDataUseListData setting is set to true (this is default for playlist/related). By default only the video_title property will be updated as content changes in the player. For custom integration of playlist/related with Mux Data or when using the setSrc API here is an example of source change handling with more metadata:

var elementID = 'rmpPlayer';
var rmp = new RadiantMP(elementID);
var rmpContainer = document.getElementById(elementID);
rmpContainer.addEventListener('srcchanging', function () {
  // content starts changing in the player
  // we signal this change to Mux Data
  if (typeof window.mux !== 'undefined') {
    window.mux.emit('#' + elementID + ' .rmp-video', 'videochange', {
      video_id: 'new-video-id',
      video_title: 'new-video-title',
      video_series: 'new-video-series'
    });
  }
});
rmp.init(settings);