移动项目控制栏videojs

Question

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

如何更改任务栏上项目的顺序？ 我在 Google.

上运气不好

Answer 1

Videojs 将好的 class 放在元素上。通过这种方式，您可以识别控制栏的元素。

为了处理商品的订单，我使用了 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 的选项或类似的想法

移动项目控制栏videojs

move item control bar videojs

javascript

video.js