Supported Versions

We have built an optimized plugin for Bitmovin from v7.7.

Step 1: Install Bitmovin and Streamroot build

From our CDN

Include this sources in the HTML <head>.

<!-- Bitmovin Player build -->
<script src="//bitmovin-a.akamaihd.net/bitmovin-player/beta/7.7/bitmovinplayer.js"></script>

<!-- Streamroot plugin -->
<script src="//cdn.streamroot.io/bitmovin-dna-plugin/1/stable/bitmovin-dna-plugin.js#streamrootKey=YOUR_STREAMROOT_KEY"></script>

Using npm

Install runtime and dev dependencies:

npm install @streamroot/bitmovin-dna-plugin

Step 2: Set up Bitmovin and Streamroot

In the HTML <body>

Include the following code in the HTML <body>.

<div id="demoplayer"></div>
<script>
  var bitmovinConfig = {
    key: 'YOUR_BITMOVIN_KEY',
    source: {
      //Only one playlist URL must be set at a time.
      hls: 'YOUR_PLAYLIST_URL',
      dash: 'YOUR_PLAYLIST_URL',
      smooth: 'YOUR_PLAYLIST_URL'
    },
    dnaConfig: {},
  };

  var player = bitmovin.player('demoplayer');
  player.setup(bitmovinConfig);
</script>

With npm

Include the following in your bundle.

// Instantiate player
var bitmovinPlayer = require('bitmovin-player');
var player = bitmovinPlayer('demoplayer');

// Inject Streamroot DNA plugin to player
var BitmovinDnaPlugin = require('@streamroot/bitmovin-dna-plugin');
BitmovinDnaPlugin.inject(player, 'YOUR_STREAMROOT_KEY');

// Bitmovin player configuration
var bitmovinConfig = {
  key: 'YOUR-BITMOVIN-KEY',
  source: {
    //Only one playlist URL must be set at a time.
    hls: 'YOUR_PLAYLIST_URL',
    dash: 'YOUR_PLAYLIST_URL',
    smooth: 'YOUR_PLAYLIST_URL'
  },
  dnaConfig: {},
};

player.setup(bitmovinConfig)
  .then(function() {
    // Player setup success
  }, function() {
    // Player setup failed
  });

Note
If the Streamroot key isn't passed in BitmovinDnaPlugin.inject you will need to include #streamrootKey=YOUR_STREAMROOT_KEY on the <script> tag loading your bundle.

Parameter name	Mandatory	Description
dnaConfig	No	The object in which you can pass Streamroot options (property, contentIdGenerator, id ...).
YOUR_STREAMROOT_KEY	Yes	The unique Streamroot key that we have assigned to you; make sure it is identical to the one provided in the Account section of your dashboard.
YOUR_BITMOVIN_KEY	Yes	The Bitmovin Player license keys.
YOUR_PLAYLIST_URL	Yes	Your HLS, DASH or Smooth playlist.

Step 3: Visualize Streamroot

In order to verify if Streamroot is correctly configurated, please install our DNA Graphs.

Articles in this section