Async library loading

This demo shows how you can load the THEOplayer library asynchronously.

This demo can be implemented as follows:

JavaScript code

<script>
// Add theoplayerready eventlistener to window
window.addEventListener('theoplayerready', function() {
    // THEOplayer library is available
    var containerElement = document.querySelector('.player');
    var player = new THEOplayer.Player(containerElement, {
                        libraryLocation : 'https://cdn.theoplayer.com/dash/theoplayer/'
                    }
                );
    player.source = {
        sources: '//cdn.theoplayer.com/video/elephants-dream/playlist.m3u8'
    };
});
</script>
<script async src="https://cdn.theoplayer.com/dash/theoplayer/THEOplayer.js"></script>
                

Tip to avoid player size flicker


// You can add the vjs-16-9 class to the player element, to give the player an initial size
<div class="player video-js vjs-16-9 theoplayer theoplayer-skin"></div>
                

 

Get Started