This article details how to integrate CDN Mesh Delivery into Shaka Player. We have built an optimized wrapper for Shaka Player from v2.3.+.
Support for SegmentBase manifests can be done on demand.
Not into tutorials? |
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/2.4.6/shaka-player.compiled.js"></script>
<!-- Streamroot plugin -->
<script src="//cdn.streamroot.io/shakaplayer-dna-wrapper/1/stable/shakaplayer-dna-wrapper.js"></script>
Using npm
Install runtime and dev dependencies:
npm install @streamroot/shakaplayer-dna-wrapperIn your application, import/require the package you want to use, similar to this example:
import ShakaPlayerDnaWrapper from '@streamroot/shakaplayer-dna-wrapper';
Step 2: Set up Shaka Player and Streamroot
In the HTML <body> or with npm
<video id="demoplayer"></video>
<script>
var videoElement = document.getElementById('demoplayer');
var shakaplayer = new shaka.Player(videoElement);
var playerConfig = {};
var dnaConfig = {};
var wrapper = new ShakaPlayerDnaWrapper(shakaplayer, "YOUR_STREAMROOT_KEY", dnaConfig);
shakaplayer.configure(playerConfig);
shakaplayer.load("YOUR_PLAYLIST_URL");
</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 DASH playlist. |
Step 3: Visualize Streamroot
| In order to verify if Streamroot was correctly configured, please install our Mesh Delivery 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 = {
streaming: {
bufferingGoal: 30,
},
manifest: {
dash: {
defaultPresentationDelay: 30,
},
},
}For Live stream only, defaultPresentationDelay should be set as shown above or directly in your manifest in suggestedPresentationDelay.