Talk with an expert
Demo THEOplayer

Custom centered controlbar

This demo shows how you can create a custom centered controlbar. After pressing "play" you will see a big play / pause button in the middle of the video.

logo-01

You can add other custom buttons to this controlbar.

 

This demo can be implemented as follows:

JavaScript code

// Create player and setup source
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'
};   

// THEOplayer videojs object
var videojs = THEOplayer.videojs;

// Create center controlbar
var ControlBar = videojs.getComponent('ControlBar');
var CustomCenterControlBar = videojs.extend(ControlBar, {
    constructor: function (player, options) {
        options.children = [];
        ControlBar.call(this, player, options);
        this.addClass('custom-center-controlbar');
    }
});
videojs.registerComponent('CustomCenterControlBar', CustomCenterControlBar);

var customCenterControlBar = player.ui.addChild('CustomCenterControlBar');

// Create custom big play pause button
var PlayToggle = videojs.getComponent('playToggle');
var CustomBigPlayToggle = videojs.extend(PlayToggle, {
    constructor: function(player, options) {
        PlayToggle.call(this, player, options);
        this.addClass('custom-big-play-pause-button');
    }
});
videojs.registerComponent('CustomBigPlayToggle', CustomBigPlayToggle);

// Add custom big play pause toggle to center controlbar
customCenterControlBar.addChild('CustomBigPlayToggle');

 

CSS code

.theoplayer-skin .vjs-control-bar.custom-center-controlbar {
    top: 50%;
    transform: translate(0, -50%);
    font-size: 3em;
    height: 3em;
    justify-content: center;
    visibility: hidden;
}

.theoplayer-skin .vjs-control-bar.custom-center-controlbar .theo-control-bar-shadow {
    display: none;
}

.theoplayer-skin .vjs-control-bar.custom-center-controlbar .theo-button-tooltip {
    top: 3.3em;
    bottom: auto;
}

.theoplayer-skin .vjs-control-bar.custom-center-controlbar .vjs-button {
    visibility: visible;
    margin: 0 0.5em;
}

.theoplayer-skin.vjs-user-inactive.vjs-playing .vjs-control-bar .vjs-button {
    pointer-events: none;
}

 

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.

Request A Demo