This article details how to integrate CDN Mesh Delivery into Shaka Player. We have built an optimized wrapper for Shaka Player from v1.5.+.
Important
This plugin is currently in beta.
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="https://cdnjs.cloudflare.com/ajax/libs/shaka-player/1.6.5/shaka-player.compiled.js"></script>
<!-- Streamroot builds -->
<script src="https://cdn.streamroot.io/xhr-proxy/1/beta/xhr-proxy.js"></script>
<script src="https://cdn.streamroot.io/shakaplayer1-interactor/1/beta/shakaplayer1-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 player = new shaka.player.Player(videoElement);
// Link Streamroot interactor to the player
// It must ALWAYS be called before the `load` method of the player
StreamrootShakaPlayer1Interactor.create()
.streamrootKey("<YOUR_STREAMROOT_KEY>")
.streamrootConfig({})
.linkPlayer(player);
var contentUrl = "<YOUR_PLAYLIST_URL>";
var playerConfig = { streamBufferSize: 30 };
var estimator = new shaka.util.EWMABandwidthEstimator();
var source = new shaka.player.DashVideoSource(contentUrl, null, estimator);
player.configure(playerConfig);
player.load(source);
</script>
| Parameter name | Mandatory | Description |
|---|---|---|
| streamrootKey | 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. |
| streamrootConfig | No |
The object in which you can pass Streamroot options (property, contentIdGenerator, id, etc.). |
| linkPlayer | Yes | The player used inside of the page, that needs to be linked to Streamroot. |
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 = {
streamBufferSize: 30
},For Live stream, we recommend to directly set in your manifest suggestedPresentationDelay to 30 seconds.