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

Note
For VOD use cases, we have built an optimized plugin for Bitmovin Player from v 7.7.

For Live Streaming, we highly recommend using Bitmovin v 8.1 or above to enjoy the benefit of its new and more performant ABR logic v3 (activable in 7.8) and a fully optimized integration with Streamroot DNA™.

Not into tutorials?

Step 1: Install the Bitmovin and Streamroot builds

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>.

(Note that these code examples are for Bitmovin 8.1+. Please refer to the Bitmovin documentation for code examples of previous versions.)

<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: {},
    live:{
      lowLatency:{
        targetLatency: 30
      }
    }
  };
  window.addEventListener("load", function() {
    player = new bitmovin.player.Player(
      document.getElementById("bitmovin-player"),
      bitmovinConfig
    );
    player
      .load({
        //Only one playlist URL must be set at a time.
        hls: "YOUR_PLAYLIST_URL"
        //dash: 'YOUR_PLAYLIST_URL',
        //smooth: 'YOUR_PLAYLIST_URL'
      })
      .then(function() {
        player.play();
      });
  });
</script>

With NPM

Include the following in your bundle.

import { Player } from 'bitmovin-player';
import { bitmovinDnaExtend } from '@streamroot/bitmovin-dna-plugin';

// Extend player class with DNA
var DNABitmovinPlayer = bitmovinDnaExtend(Player, 'YOUR_STREAMROOT_KEY');

var bitmovinConfig = {
  key: 'YOUR_BITMOVIN_KEY',
  dnaConfig: {},
  live:{
    lowLatency:{
        targetLatency: 30
    }
  }
};

// Instanciate player
var player = new DNABitmovinPlayer(videoElement, bitmovinConfig);

// Load stream
player.load({
  //Only one playlist URL must be set at a time.
  hls: "YOUR_PLAYLIST_URL"
  //dash: 'YOUR_PLAYLIST_URL',
  //smooth: 'YOUR_PLAYLIST_URL'
});

ACTIVATING STREAMROOT ON SAFARI

On Safari, the stream will be played through the Safari Native Player by default (see this article from Bitmovin on the subject). In order for Streamroot DNA to be activated on Safari, you will need to configure the player to use Bitmovin HLS playback. To do so, 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'}
   ]
 }
};

MANDATORY AND OPTIONAL PARAMETERS

The following parameters are either mandatory or recommended.

Parameter name	Mandatory	Description
dnaConfig	No	The object in which you can pass Streamroot options (property, contentIdGenerator, id, etc.).
targetLatency	No	The Bitmovin option to set a custom live delay (from Bitmovin 8.3)
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

To verify that Streamroot was correctly configured, install our DNA Graphs.

Bitmovin Player