javascript - 移动项目控制栏 videojs

Question

我正在使用 video.js 4.12 库，并且我想要替换控制栏项目。例如，将我的自定义按钮之一移至控制栏的第二个插槽。

如何更改任务栏上项目的顺序？我在 Google 上运气不好。

Answer 1

Videojs 对元素设置了良好的类。通过这种方式您可以识别控制栏的元素。

为了处理项目的订单，我使用了 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");

实例化我的播放器后，只需通过 Jquery 处理项目即可。我认为这比使用 CSS 更好。但最好的方法应该是通过 videojs 的选项或类似的方式