Skip to main content
Version: 11.8.0

How to insert a button on Web

This article provides information on how developers can add custom buttons to THEOplayer's default UI.

THEOplayer's default UI is based on Video.js, so you insert a button with HTML, CSS and JavaScript.

Code example​

This code example adds 2 time-jump buttons to the control bar. A button to go back 10 seconds in time should be positioned to the left of the play-button, and a button to go forward 10 seconds in time should be positioned to the right of the play-button.

The buttons use the Font Awesome icon set. This means that we first need to include the Font Awesome CSS stylesheet.

<link rel="stylesheet" type="text/css" href="http://cdn.theoplayer.com/demos/font-awesome/css/font-awesome.min.css" />

The code below inserts two buttons in the control bar, lets viewers jump in time when it is clicked, and adds a tooltip to the button.

// setting up the rewind button by setting up a video-js component
var Button = THEOplayer.videojs.getComponent('Button');
var RewindButton = THEOplayer.videojs.extend(Button, {
  constructor: function () {
    Button.apply(this, arguments);
    /* initialize your button */
    // this.el() = created DOM-element

    // add tooltip
    var tooltipSpan = document.createElement('span');
    tooltipSpan.className = 'theo-button-tooltip vjs-hidden';
    tooltipSpan.innerText = 'Go back 10 seconds';
    function toggleTooltip() {
      tooltipSpan.classList.toggle('vjs-hidden');
    }
    this.el().addEventListener('mouseover', toggleTooltip);
    this.el().addEventListener('mouseout', toggleTooltip);
    this.el().appendChild(tooltipSpan);
  },
  handleClick: () => {
    player.currentTime -= 10;
  },
  buildCSSClass: function () {
    return 'fa fa-step-backward vjs-button'; // insert all class names here
  },
});
THEOplayer.videojs.registerComponent('RewindButton', RewindButton);
player.ui.getChild('controlBar').addChild('RewindButton', {});

// setting up the forward button by setting up a video-js component
var Button = THEOplayer.videojs.getComponent('Button');
var ForwardButton = THEOplayer.videojs.extend(Button, {
  constructor: function () {
    Button.apply(this, arguments);
    /* initialize your button */
    // this.el() = created DOM-element

    // add tooltip
    var tooltipSpan = document.createElement('span');
    tooltipSpan.className = 'theo-button-tooltip vjs-hidden';
    tooltipSpan.innerText = 'Go forward 10 seconds';
    function toggleTooltip() {
      tooltipSpan.classList.toggle('vjs-hidden');
    }
    this.el().addEventListener('mouseover', toggleTooltip);
    this.el().addEventListener('mouseout', toggleTooltip);
    this.el().appendChild(tooltipSpan);
  },
  handleClick: () => {
    player.currentTime += 10;
  },
  buildCSSClass: function () {
    return 'fa fa-step-forward vjs-button'; // insert all class names here
  },
});
THEOplayer.videojs.registerComponent('ForwardButton', ForwardButton);
player.ui.getChild('controlBar').addChild('ForwardButton', {});

You could add vjs-control to the return-string of buildCSSClass to make the button more similar to the default buttons.

Finally, you can adjust the position of the custom buttons with the order attribute, and force the cursor to use a pointer.

.fa-step-backward {
  order: -101; /* to the left of the play/pause-button */
  cursor: pointer;
}
.fa-step-forward {
  order: -100; /* to the right of the play/pause-button */
  cursor: pointer;
}

Sample resources​

The pages or projects below demonstrate implementations of similar use cases.