This article describes in detail how to use CDN Mesh Delivery with Kaltura Player.
We have built optimized plugins for Kalura Player from 0.50.9.
Note
This plugin only works with the Kaltura Player V7 using the Dynamic Embed method.
This plugin only works with the Kaltura Player V7 using the Dynamic Embed method.
Not into tutorials? |
Step 1: Install Kaltura Player and Streamroot build
Include these sources in the HTML <head>:
<!-- Kaltura Player build -->
<script src="YOUR_PLAYER_URL"></script>
<!-- Streamroot plugin -->
<script src="//cdn.streamroot.io/playkit-dna-plugin/1/stable/playkit-dna-plugin.js"></script>
| Parameter name | Mandatory | Description |
|---|---|---|
| YOUR_PLAYER_URL | Yes | The Cloud-hosted Player Library Url you get from your KMC dashboard. |
Step 2: Set up Kaltura and Streamroot
Include these sources in the HTML <body>:
<div id="kaltura_player_xxxxxxxxxx" style="width: 560px;height: 395px"></div>
<script type="text/javascript">
try {
var kalturaPlayer = KalturaPlayer.setup({
targetId: "kaltura_player_xxxxxxxxxx",
provider: {
partnerId: xxxxxxx,
uiConfId: xxxxxxx
},
plugins: {
streamroot: {
key: "YOUR_STREAMROOT_KEY",
dnaConfig: {}
}
},
});
kalturaPlayer.loadMedia({
entryId: "YOUR_MEDIA_ENTRY_ID"
});
} catch (e) {
console.error(e.message);
}
</script>
| Parameter name | Mandatory | Description |
|---|---|---|
| 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. |
| dnaConfig | No | The object in which you can pass Streamroot options (property, contentIdGenerator, id, etc.). |
| YOUR_MEDIA_ENTRY_ID | Yes | The media ID you get from Katura KMC. |
Step 3: Visualize Streamroot
| In order to verify if Streamroot was correctly configured, please install our Mesh Delivery Graphs. |
Recommended hls.js and Shaka Player options
hls.js and Shaka Player have a wide variety of configuration parameters that can be instantiated for fine-tuning.
To get the best performance with live content, we recommend setting the following values:
playback: {
options: {
html5: {
hls: {
maxBufferSize: 0,
maxBufferLength: 30,
liveSyncDuration: 30,
liveMaxLatencyDuration: Infinity
},
dash: {
streaming: {
bufferingGoal: 30
},
manifest: {
dash: {
defaultPresentationDelay: 30
}
}
}
}
}
}For HLS VOD streams, liveSyncDuration and liveMaxLatencyDuration are not needed.
For DASH Live stream, defaultPresentationDelay should be set as shown above or directly in your manifest in suggestedPresentationDelay.