Adding Custom Video.js Control Bar buttons

Question

I\'ve been working on video.js for like a day so I\'m a real newbie when it comes to this stuff Today I just wanted to add a button that will switch between two videos. I did it

Answer 1

(This answer is relevant to videojs 4.9.1)

To add a custom button to videojs's control bar, you need to create a vjs component and add it to the controlbar's children in the player setup options. Here's a setup where I add 3 custom components to the control bar (playebackSpeedPopoverMenu, selectBitrateControlButton, and verticalVolumeMenuButton):

var setup = {
                  'techOrder' : ['html5', 'flash'],
                  'controls' : true,
                  'preload' : 'auto',
                  'children':{
                      'controlBar': {
                          'children': {
                              'playbackSpeedPopoverMenu': {},
                              'selectBitrateControlButton': {src:videosrc},
                              'verticalVolumeMenuButton': {},
                              'volumeControl': false,
                              'muteToggle':false,
                              'liveDisplay':false,
                          }
                      }
                  };
var player = new vjs.Player(vjs.el("id_of_my_video_element_note_that_theres_no_poundsign"),
                            setup,
                            function() {
                               //this is your ready function
                            }));

The reason the controlbar compnents are declared like 'selectBitrateControlButton': {src:videosrc} is because whatever is included in the object literal will get injected into the components init() function as the options parameter. This works great working with the videojs.dev.js file, not the closure-compiled cdn version (that's a whole 'nother story) These are some examples of defining vjs components that appear on the controlbar:

https://github.com/videojs/video.js/blob/master/src/js/control-bar/play-toggle.js#L8 https://github.com/videojs/video.js/blob/master/src/js/control-bar/fullscreen-toggle.js#L8

I fully recommend getting the latest code from the videojs git repo on git hub, which will make it easier to look up the various sources in your IDE. The ui component framework isn't terribly complicated and can be mastered in a couple days with some patient sourcecode drilling.