Radiant Media Player

Mux Data

Search

Scope of support

To provide advanced video analytics with our player we support out-of-the-box integration with Mux Data platform. Our integration has been tested for Mux Data v4+. The following features are supported:

• Tracking of data for the HTML5 media element
• Tracking of data for hls.js and Shaka player when used with our player
• Custom errors
• Source change support for playlist & related content

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 our player. See below for a complete example. The player_init_time property is 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

HLS streaming (with hls.js)

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

DASH streaming (with Shaka player)

<!-- Include Mux Data library for Shaka player -->
<script src="https://src.litix.io/shakaplayer/4/shakaplayer-mux.js"></script>
<!-- Include Radiant Media Player library -->
<script src="https://cdn.radiantmediatechs.com/rmp/7.0.3/js/rmp.min.js"></script>
<div id="rmp"></div>
<script>
  const src = {
    dash: 'https://your-hls-url.mpd'
  };
  // Define Mux Data settings
  const muxDataSettings = {
    debug: false,
    data: {
      env_key: 'your-mux-data-env-key',
      viewer_user_id: 'viewer-user-id',
      video_title: 'video-title',
      player_name: 'player-name', // if not provided will default to 'radiantmediaplayer'
      player_version: 'player-version' // if not provided will default to Radiant Media Player currently used version
      // player_init_time will automatically be set by player at run time
    }
  };
  const settings = {
    licenseKey: 'your-license-key',
    src: src,
    width: 640,
    height: 360,
    contentMetadata: {
      poster: [
        'https://your-poster-url.jpg'
      ]
    },
    // Pass Mux Data settings
    muxDataSettings: muxDataSettings
  };
  const rmp = new RadiantMP('rmp');
  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:

const elementID = 'rmp';
const rmp = new RadiantMP(elementID);
const rmpContainer = document.getElementById(elementID);
rmpContainer.addEventListener('srcchanging', () => {
  // 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'
    });
  }
});