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的选择或者像那样的想法

移动项目控制栏videojs

1 个答案: