Shaka Player v1

  1. Streamroot Documentation
  2. Web
  3. Web-Players

This article details how to integrate Streamroot DNA™ into Shaka Player. We have built an optimized wrapper for Shaka Player from v1.5.+.

⚠️ Important
This plugin is currently in beta.

 

Step 1: Install Shaka Player and Streamroot build

From our CDN

Include these sources in the HTML <head>:

<!-- Shaka Player build -->
<script src="//cdnjs.cloudflare.com/ajax/libs/shaka-player/1.6.5/shaka-player.compiled.js"></script>

<!-- Streamroot builds -->
<script src="//cdn.streamroot.io/xhr-dna-plugin/0/beta/xhr-dna-plugin.js"></script>
<script src="//cdn.streamroot.io/legacy-shaka-dna-interactor/0/beta/legacy-shaka-dna-interactor.js"></script>

 

Step 2: Set up Shaka Player and Streamroot

In the HTML <body>

<video id="demoplayer"></video>
<script>
  var videoElement = document.getElementById("demoplayer");
  var shakaplayer = new shaka.player.Player(videoElement);

  var dnaConfig = {};
  var interactor = new LegacyShakaInteractor(shakaplayer, "YOUR_STREAMROOT_KEY", dnaConfig);

  var estimator = new shaka.util.EWMABandwidthEstimator();
  var contentUrl = "YOUR_PLAYLIST_URL";
  var source = new shaka.player.DashVideoSource(contentUrl, null, estimator);
  
  var playerConfig = {};
  shakaplayer.configure(playerConfig);
  
  shakaplayer.load(source);
}
</script>

 

Parameter name Mandatory Description
dnaConfig No

The object in which you can pass Streamroot options (property, contentIdGenerator, id, etc.).
playerConfig No The object in which you can change Shaka Player options. More information can be found here.
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_PLAYLIST_URL Yes Your MPEG-DASH playlist.

 

Step 3: Visualize Streamroot

In order to verify if Streamroot was correctly configured, please install our DNA Graphs.

 

Recommended Shaka Player options

Shaka Player as a wide variety of configuration parameters that can be instantiated in playerConfig object for fine-tuning. You can learn more about them in their API Documentation.

To get the best performance, we recommend setting the following values:

var playerConfig = {
    streamBufferSize: 30,
},

For Live stream, we recommend to directly set in your manifest suggestedPresentationDelay to 30s.

Related articles