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. |