Demo THEOplayer
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 THEOplayer 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 3.X API; we don't rely on any internal functions.
Chromeless Player UI: Play
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;
}
Still wasting time debugging video playback problems?
Welcome to cutting-edge video, delivered efficiently and on any platform. We think you're going to like it.
