THEOplayer 2.X Demo: Creating a Chromeless UI

This page demonstrates how to make a UI from the ground up. This can be useful when you have an existing theme and want to migrate it to THEOplayer.

To achieve this, we used:

  • theoplayer.chromeless.js: this version of the THEOplayer library is a stripped down version of theoplayer.js, with no relation to the default UI.
  • the 2.X API: this allows us to control all the elements related to video playback.
  • HTML and CSS to style and make-up the UI.

The player below is a very simple example, only containing a play and pause button, and a timeline. You can make your UI as extensive as you want. Interesting fact: the default player UI is made entirely through the exposed 2.X API; we don't rely on any internal functions.

Chromeless Player UI:

Play
 
:
 

 

HTML code:

<div id="video-container" class="ui">
    <div class="controls">
        <div class="toggle">Play</div>
        <div class="timeline">
            <div class="currentTime"></div>
            <div class="duration"></div>
        </div>
    </div>
</div>

 

JavaScript code:

var toggleElement = document.querySelector('.ui .controls .toggle');
// listen to clicks to toggle play/pause
toggleElement.addEventListener('click', function() {
    if (player.paused) {
        player.play();
        toggleElement.innerHTML = "Pause";
    } else {
        player.pause();
        toggleElement.innerHTML = "Play";
    }
});

var currentTimeElement = document.querySelector('.ui .controls .currentTime');
// update current time every timeupdate event
player.addEventListener('timeupdate', function() {
   currentTimeElement.innerHTML = Math.floor(player.currentTime); 
});

var durationElement = document.querySelector('.ui .controls .duration');
// update duration on loaddedata event
player.addEventListener('loadeddata', function() {
   durationElement.innerHTML = Math.floor(player.duration); 
});

 

CSS code:

.ui {
    background: #000000;
    width: 100%;
    height: 277px;
}

.ui .controls {
    position: absolute;
    bottom: 0px;
    width: 100%;
    z-index: 100;
    background: rgba(255, 255, 255, 0.8);
}

.ui .controls div {
    float: left;
}

.ui .controls .toggle {
    cursor: pointer;
       margin: 0px 10px;
}