Web Players

See more

THEOplayer

This article explains how to integrate Streamroot DNA™ 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 DNA Graphs.

Related articles