Lumen help

Integrating Mesh Delivery with THEOplayer

Introduction

Step 1: Install THEOplayer and Mesh Delivery builds

From our CDN

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

Step 3: Visualize Mesh Delivery

Vizualization graph for Mesh Delivery