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

tastybytes · Answer 1 · 2014-07-14T20:20:09.897

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] );

score 0 · Accepted Answer · edited May 23 '17 at 12:05

0

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.

edited May 23 '17 at 12:05

Community

1
1

answered Apr 28 '14 at 09:43

Arnaud Leyder

6,674
5
31
43

I took your advice and created a new plugin very similar to the video-speed plugin and its working great. Thanks for the pointer. – Josh Apr 29 '14 at 05:19
Florestan06, any idea why plugins won't show on an iPad? Its showing the custom controls (not native), but its not showing the speed plugin or the new one I just created. – Josh Apr 29 '14 at 05:20
Videojs support on iPad has been known to be partial. I have been using my own HTML5 player for a while because of such things. Also take into account that some features like playbackRate are not fully supported in iOS. Example: http://stackoverflow.com/questions/6436232/html-5-audio-playbackrate-not-working-in-ipad-but-works-on-safari-on-windows – Arnaud Leyder Apr 29 '14 at 08:37
In my recent testing using a different player, playbackRate was working fine on the iPad. But since switching to videojs, I cannot even get those controls to show up, so I can't test it. – Josh Apr 29 '14 at 14:34
Video.js skins are disabled on mobile by default http://stackoverflow.com/questions/16697473/videojs-4-native-controls-now-default-on-mobile – tastybytes May 13 '14 at 21:17

adding custom controls for seeking to the controlbar

2 Answers2