Menu

Lumen help

Integrating Mesh Delivery with THEOplayer

Introduction

Mesh Delivery for Streaming can be integrated into your website with THEOplayer in just a few simple steps.

 

We have built optimized wrapper for THEOPlayer from v2.37.

 

The complete list of integrations we support and guides for setting them up can be found here. If you would like to integrate Mesh Delivery for streaming with a video player not on the list, write to us at cdnsupport@lumen.com and we will help you out.

Not into tutorials?  

Code Example
Demo

Step 1: Install THEOplayer and Mesh Delivery builds

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

<!-- Mesh Delivery wrapper -->
<script src="//cdn.streamroot.io/theoplayer-dna-wrapper/1/stable/theoplayer-dna-wrapper.js?srKey=YOUR_STREAMROOT_KEY"></script>

To get the highest flexibility of deployment, we recommend setting the StreamrootKey in the Query Parameter "srKey".

 

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.

Step 2: Set up THEOplayer and Mesh Delivery

In the HTML <body>

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

Parameters


The following parameters are either mandatory or recommended.

 

Parameter name

Mandatory

Description
dnaConfig No The object in which you can pass Mesh Delivery options (property, contentIdGenerator, id, etc.).
liveOffset
 No The recommended value to set a custom live delay for Live streams.
YOUR_PLAYLIST_URL Yes Your HLS, DASH or Smooth playlist.
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.

Step 3: Visualize Mesh Delivery

To verify that Mesh Delivery was correctly configured, please install our Mesh Delivery graphs.

Vizualization graph for Mesh Delivery

And in just a few easy steps you should have a working integration of Mesh Delivery! We encourage you to explore our documentation to understand the various features we offer so you can make the most out of our product.