Skip to main content
Version: 8.7.0

How to insert a button

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

THEOplayer's default UI is based on VideoJS. A WebView is used on the legacy Android and iOS SDKs (4.12.x). HTML, CSS and JavaScript is used to insert a button.

When using the legacy Android or iOS SDKs (4.12.x), THEOplayer exposes a system to include JavaScript and CSS files (as described at How to add CSS or JavaScript files to an Android/iOS project). This system allows developers to re-use their code-logic.

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.

Web SDK​

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;
}

Android SDK​

Since JavaScript injection is not available on the native Android SDK, you can add a button in a native way to the platform and use THEOplayer APIs for its function.

iOS SDK​

Since JavaScript injection is not available on the native iOS SDK, you can add a button in a native way to the platform and use THEOplayer APIs for its function.

Legacy Android SDK (4.12.x)​

See our version 4 documentation for more information.

Legacy iOS SDK (4.12.x)​

See our version 4 documentation for more information.

Sample resources​

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

Other resources​

The samples below demonstrate how to implement a custom UI without injecting JavaScript into a WebView on mobile SDKs.