move item control bar videojs

Question

I'm using the video.js 4.12 library and I want replace control bar items. For example, move one of my custom buttons to the 2nd slot of the control bar.

How do I change the order of items on the taskbar? I had no luck on Google.

Answer 1

Videojs place good class on elements. By this way you can identify control bar's elements.

To handle the item's order I used Jquery :

var createPrevButton = function() {
        var props = {
            className: 'vjs-control player-prev-button', //We use this class in Jquery
            innerHTML: '<div class="vjs-control-content"></div>',
            role: 'button',
            'aria-live': 'polite',
            tabIndex: 0
        };

        return videojs.Component.prototype.createEl(null, props);
    };

var myPlayer = me.player = videojs(me.idVideo, {
        plugins : { chapters : {} },
        children: {
            controlBar: {
                children: [
                    {
                        name: 'playToggle'
                    },
                    {
                        name: 'currentTimeDisplay'
                    },
                    {
                        name: 'timeDivider'
                    },
                    {
                        name: 'durationDisplay'
                    }
                    /*
                    ...........
                    */
                ]
            }
        }
    });


$(".player-prev-button").insertAfter(".vjs-play-control");
$(".player-next-button").insertAfter(".player-prev-button");

After the instanciation of my player just handle item by Jquery. I think it's better than use CSS. But the best way should be by videojs's option or somethink like that