Note
This support website will be decommissioned on 16th December 2022.
For up-to-date information, please refer to documentation on Lumen.com.
This support website will be decommissioned on 16th December 2022.
For up-to-date information, please refer to documentation on Lumen.com.
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.