THEOplayer 2.X | Demo | Timejump buttons

This page demonstrates how you can create and insert rewind and fast-forward buttons with the THEOplayer API. These buttons use the Font Awesome icon set. We have two objectives in this demo:

Inserting a rewind and fast-forward button
Attaching custom logic to this button

The button is added to the control bar. When one of the two buttons is clicked, a jump in the timeline occurs.

The result:

The JavaScript code:

// information on setting up THEOplayer and the player object can be found at https://docs.portal.theoplayer.com/docs/docs/getting-started/web/web

// 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 */
  },
  handleClick: () => {
    //elementContainer.classList.toggle('hidden');
    player.currentTime -= 10;
  },
  buildCSSClass: function () {
    return 'fa fa-step-backward custom-info-icon'; // 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 */
  },
  handleClick: () => {
    //elementContainer.classList.toggle('hidden');
    player.currentTime += 10;
  },
  buildCSSClass: function () {
    return 'fa fa-step-forward custom-info-icon'; // insert all class names here
  }
});

THEOplayer.videojs.registerComponent('ForwardButton', ForwardButton);
player.ui.getChild('controlBar').addChild('ForwardButton', {});

THEOplayer 2.X Demo: Fast-forward and rewind buttons