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 explains how to integrate CDN Mesh Delivery into THEOplayer.
We have built optimized wrapper for THEOPlayer from v2.37.
Not into tutorials? |
Step 1: Install THEOplayer and Streamroot build
From our CDN
Include these sources in the HTML <head>:
<!-- THEOplayer build and UI --> <script src="/path/to/THEOplayer.js"></script> <link rel="stylesheet" type="text/css" href="/path/to/ui.css"> <!-- Streamroot wrapper --> <script src="//cdn.streamroot.io/theoplayer-dna-wrapper/1/stable/theoplayer-dna-wrapper.js"></script>
Step 2: Set up THEOplayer and Streamroot
In the HTML <body>
HLS
<div class="theoplayer-container video-js theoplayer-skin theo-seekbar-above-controls"></div>
<script>
var dnaConfig = {};
var element = document.querySelector('.theoplayer-container')
var player = new THEOplayer.Player(element, {
libraryLocation: '/path/to/your-theoplayer-folder',
ui : {
width: '800px',
height: '500px'
},
liveOffset: 30
});
var wrapper = new TheoPlayerDnaWrapper(player, 'YOUR_STREAMROOT_KEY', dnaConfig);
player.source = {
sources: [{
src: 'YOUR_PLAYLIST_URL',
type: 'application/x-mpegURL'
}]
};
</script>
DASH
<div class="theoplayer-container video-js theoplayer-skin theo-seekbar-above-controls"></div>
<script>
var dnaConfig = {};
var element = document.querySelector('.theoplayer-container')
var player = new THEOplayer.Player(element, {
libraryLocation: '/path/to/your-theoplayer-folder',
ui : {
width: '800px',
height: '500px'
},
liveOffset: 30
});
var wrapper = new TheoPlayerDnaWrapper(player, 'YOUR_STREAMROOT_KEY', dnaConfig);
player.source = {
sources: [{
src: 'YOUR_PLAYLIST_URL',
type: 'application/dash+xml'
}]
};
</script>
| Parameter name | Mandatory | Description |
|---|---|---|
| dnaConfig | No |
The object in which you can pass Streamroot options (property, contentIdGenerator, id, etc.). |
| liveOffset | No | The recommended value to set a custom live delay for Live streams. |
| 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 HLS or MPEG-DASH playlist. |
Step 3: Visualize Streamroot
| In order to verify if Streamroot was correctly configured, please install our Mesh Delivery Graphs. |