Articles in this section

See more

THEOplayer

Supported Versions

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

 

Step 1: Install THEOplayer and Streamroot build

From our CDN

Include this 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> or with npm

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'
            }
        });
        var wrapper = new TheoPlayerDnaWrapper(player, 'YOUR_STREAMROOT_KEY', dnaConfig);

        player.source = {
            sources: [{
                src: 'YOUR_PLAYLIST_URL',
                type: 'application/x-mpegURL'
            }]
        };

    </script>

 

 

Parameter name Mandatory Description
dnaConfig No

The object in which you can pass Streamroot options (property, contentIdGenerator, id ...).
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 playlist.

 

Step 3: Visualize Streamroot

In order to verify if Streamroot is correctly configurated, please install our DNA Graphs.

Related articles