adding custom controls for seeking to the controlbar

Question

I have a use case where I need to seek forward and backwards in the video using custom buttons. I've attached a screenshot of my player (linked below), including controls at the bottom for (-10 -5 +5 +10). It works so when clicked, the video seeks to the correct position.

Picture of my player: http://tinyurl.com/k93xnya

I cannot, after hours of research, figure out how to do the same on the controlbar? I need them to be controlbar options so they can be used in fullscreen mode.

Any help or guidance would be much appreciated. Thanks

Answer 1

It seems you are using videojs. Adding custom buttons to videojs control bar can be tricky. You can find articles on the subject here, here and here. You probably need to develop your own plugin for better results.

You could also consider building your own set of controls for your HTML5 media player. More on going full screen with HTML5 media element here.

Answer 2

For one of my plugins I use this approach to insert a "previous" and "next" button on each side of the play/pause toggle.

-First we create/add the new controls to the control bar with addChild()

-I then use a function to find the location of the play button since that is my reference point

-Once I know the location of the play button I can insert the "previous" button before it

-Once I know the new location of the play button I can insert the "next" button after (before the next sibling) it.

this.playlist.advancePlaylistButton = this.controlBar.addChild('advancePlaylist');
this.playlist.regressPlaylistButton = this.controlBar.addChild('regressPlaylist');

var playToggleLocation = 0;

var playLocation = function() {
    var controlBarChildren = this.controlBar.el().childNodes;
    var loc = -1;
    for ( var x = 0; x < controlBarChildren.length; x++ ) {
        if ( controlBarChildren[x].className.indexOf('vjs-play-control') != -1) {
            loc = x;
            break;
        }
    }
    return loc;
};


playToggleLocation = playLocation();
this.controlBar.el().insertBefore( this.playlist.regressPlaylistButton.el(), this.controlBar.el().childNodes[playToggleLocation] );

this.controlBar.el().insertBefore( this.playlist.advancePlaylistButton.el(), this.controlBar.el().childNodes[playToggleLocation+1] );