Demo THEOplayer
Fast-forward and rewind buttons
This page demonstrates how you can manipulate the default THEOplayer UI, using CSS, JavaScript and THEOplayer API.
This 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', {});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.
