Talk with an expert
Demo THEOplayer

Fullscreen social controlbar

This demo shows how you can add a controlbar with social controls that is only visible when the player is fullscreen.

logo-01

 

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 SocialControlBar = videojs.extend(ControlBar, {
    constructor: function (player, options) {
        options.children = [];
        ControlBar.call(this, player, options);
    },
    buildCSSClass: function() {
        return  ControlBar.prototype.buildCSSClass.call(this) + ' social-controlbar';
    }
});
videojs.registerComponent('SocialControlBar', SocialControlBar);

var socialControlBar = player.ui.addChild('SocialControlBar');

// Create custom icon button
var Button = videojs.getComponent('Button');
var CustomIconButton = videojs.extend(Button, {
    constructor: function(player, options) {
        this.options = options;
        Button.call(this, player, options);
    },
    buildCSSClass: function() {
        return  Button.prototype.buildCSSClass.call(this) + ' custom-icon-button custom-icon-button-' + this.options.icon;
    },
    createEl: function() {
        var el = Button.prototype.createEl.call(this);
        var icon = document.createElement('li');
        icon.classList.add('fa', 'fa-' + this.options.icon);
        el.appendChild(icon);
        return el;
    }
});
videojs.registerComponent('CustomIconButton', CustomIconButton);

// Add social button to the social controlbar
var heartButton = socialControlBar.addChild('CustomIconButton', {
    icon: 'heart'
});

socialControlBar.addChild('CustomControlSpacer');

var replyButton = socialControlBar.addChild('CustomIconButton', {
    icon: 'reply'
});

var commentButton = socialControlBar.addChild('CustomIconButton', {
    icon: 'comment'
});

// Attaching click handlers
heartButton.on('click', consoleLogClick);
replyButton.on('click', consoleLogClick);
commentButton.on('click', consoleLogClick);

function consoleLogClick(e) {
    console.log('clicked on: ' + e.target);
}

 

CSS code

/* Social controlbar styles */
.theoplayer-skin .vjs-control-bar {
    margin-bottom: 3em;
}

.theoplayer-skin .vjs-control-bar.social-controlbar {
    margin-bottom: 0;
    border-top: 1px solid rgba(255, 255, 255, 0.2)
}

.theoplayer-skin .vjs-control-bar.social-controlbar .custom-icon-button-heart {
    margin-left: 0.5em;
}

.theoplayer-skin .vjs-control-bar.social-controlbar .custom-icon-button-comment {
    margin-right: 0.5em;
}

.theoplayer-skin .vjs-control-bar.social-controlbar {
    margin-bottom: 0;
    border-top: 1px solid rgba(255, 255, 255, 0.2)
}

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

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

/* Only show social controlbar on fullscreen */
.theoplayer-skin .vjs-control-bar {
    margin-bottom: 0;
}

.theoplayer-skin.vjs-fullscreen .vjs-control-bar {
    margin-bottom: 3em;
}

.theoplayer-skin .vjs-control-bar.social-controlbar {
    display: none;
}

.theoplayer-skin.vjs-fullscreen .vjs-control-bar.social-controlbar {
    margin-bottom: 0;
    display: flex;
}

 

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