This article provides a step-by-step guide on implementing Streamroot DNA™ with the Bitmovin Player.

Note
We have built an optimized plugin for Bitmovin Player from v7.7. However, we highly recommend using 7.8 to activate the new ABR logic.

Not into tutorials?

Step 1: Install Bitmovin and Streamroot build

From our CDN

Include these sources in the HTML <head>:

<!-- Bitmovin Player build -->
<script src="//bitmovin-a.akamaihd.net/bitmovin-player/stable/7.8/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: {},
    dnaBitmovinConfig: {
        liveDelay: 30,
    },
    adaptation: {
      desktop: {
        logic: "v3",
      },
    },
  };

  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: {},
  dnaBitmovinConfig: {
    liveDelay: 30,
  },
  adaptation: {
    desktop: {
      logic: "v3",
    },
  },
};

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 when loading your bundle.

On Safari, by default, the stream will be played through Safari Native Player (see Bitmovin article). In order for Streamroot DNA to be activated, you will need to configure the player to use Bitmovin HLS playback. Just add a preferredTech in the Bitmovin configuration object.

var conf = {
  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'
  },
  playback: {
    preferredTech: [
       {player: 'html5', streaming: 'hls'}
   ]
 }
};

Parameter name	Mandatory	Description
dnaConfig	No	The object in which you can pass Streamroot options (property, contentIdGenerator, id, etc.).
liveDelay	No	The Streamroot option to set a custom live delay. If nothing is set, the default value will be 30s.
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 was correctly configurated, please install our DNA Graphs.

Bitmovin Player