Documentation

Bitmovin Analytics

Scope of support

As the streaming media industry becomes more mature, video analytics have become a key element to building an online video solution. To provide advanced video analytics with our player we support out-of-the-box integration with Bitmovin Analytics. Our integration has been tested for Bitmovin Analytics v2 (Analytics Web Collector 2). The following features are supported:

  • Metrics for the native HTML5 media element, HLS (hls.js) and DASH (Shaka player): the player will automatically pick the appropriate adapter
  • Source change support (playlist, related & setSrc API method)

Bitmovin Analytics setting

bitmovinAnalyticsConfig: Object

Pass Bitmovin Analytics config metadata to the player to enable Bitmovin Analytics support. A key property for the bitmovinAnalyticsConfig object is required for Bitmovin Analytics support to be enabled in our player. See below for a complete example. The videoId, title and cdnProvider properties are also recommended. Default: {}.

Player code example

HLS streaming (with hls.js)

<!-- Include Bitmovin Analytics v2 library -->
<script src="https://cdn.bitmovin.com/analytics/web/2/bitmovinanalytics.min.js"></script>
<!-- Include Radiant Media Player library -->
<script src="https://cdn.radiantmediatechs.com/rmp/9.3.0/js/rmp.min.js"></script>
<div id="rmp"></div>
<script>
  const src = {
    hls: 'https://your-hls-url.m3u8'
  };
  // Define Bitmovin Analytics settings
  const analyticsConfig = {
    key: 'your-bitmovin-key',
    videoId: 'your-video-id',
    debug: false,
    title: 'your-video-title'
  };
  const settings = {
    licenseKey: 'your-radiant-media-player-key',
    src: src,
    width: 640,
    height: 360,
    contentMetadata: {
      poster: [
        'https://your-poster-url.jpg'
      ]
    },
    // Pass Bitmovin Analytics settings
    bitmovinAnalyticsConfig: analyticsConfig
  };
  const rmp = new RadiantMP('rmp');
  rmp.init(settings);
</script>

DASH streaming (with Shaka player)

<!-- Include Bitmovin Analytics v2 library -->
<script src="https://cdn.bitmovin.com/analytics/web/2/bitmovinanalytics.min.js"></script>
<!-- Include Radiant Media Player library -->
<script src="https://cdn.radiantmediatechs.com/rmp/9.3.0/js/rmp.min.js"></script>
<div id="rmp"></div>
<script>
  const src = {
    dash: 'https://your-hls-url.mpd'
  };
  // Define Bitmovin Analytics settings
  const analyticsConfig = {
    key: 'your-bitmovin-key',
    videoId: 'your-video-id',
    debug: false,
    title: 'your-video-title'
  };
  const settings = {
    licenseKey: 'your-radiant-media-player-key',
    src: src,
    width: 640,
    height: 360,
    contentMetadata: {
      poster: [
        'https://your-poster-url.jpg'
      ]
    },
    // Pass Bitmovin Analytics settings
    bitmovinAnalyticsConfig: analyticsConfig
  };
  const rmp = new RadiantMP('rmp');
  rmp.init(settings);
</script>

Source change support

For playlist and related the player will automatically source change data to Bitmovin Analytics based on each playlist item title and id (if no id is provided one will be generated by the player). Therefore for playlist and related you only need pass a key property to the bitmovinAnalyticsConfig setting.

For custom integration using the setSrc API here is an example of source change handling. Note the use of the getBitmovinAnalytics and setBitmovinAnalytics API methods. 

const src = {
  hls: 'https://your-hls-url.m3u8'
};
const analyticsConfig = {
  key: 'your-bitmovin-key',
  videoId: 'your-video-id',
  title: 'your-video-title'
};
const settings = {
  licenseKey: 'your-radiant-media-player-key',
  src: src,
  width: 640,
  height: 360,
  autoplay: true,
  // Pass Bitmovin Analytics settings
  bitmovinAnalyticsConfig: analyticsConfig
};
const rmp = new RadiantMP('rmp');     
// Example for changing source with a delay
setTimeout(() => {
  rmp.setSrc({
    hls: 'https://your-new-hls-url.m3u8'
  });
}, 10000);
      
const container = document.getElementById('rmp');
rmp.on('srcchanging', () => {
  // Example for checking the current bitmovinAnalyticsConfig setting
  let analytics = rmp.getBitmovinAnalytics();
  console.log(analytics);
  // Set new bitmovinAnalyticsConfig just before the source change moves forward - e.g. srcchanging API event
  rmp.setBitmovinAnalytics({
    key: 'your-bitmovin-key', // Note you need to pass your Bitmovin key each time you call setBitmovinAnalytics API method
    videoId: 'your-new-video-id',
    title: 'your-new-video-title'
  });
  // If needs be we can check the new bitmovinAnalyticsConfig object
  analytics = rmp.getBitmovinAnalytics();
  console.log(analytics);
});

rmp.init(settings);
Except as otherwise noted, the content of this page is licensed under the Creative Commons Attribution 3.0 License.

Radiant Media Player

Support

Company

©2015-2023 Radiant Media Player. All Rights Reserved.