如何更改videojs控制栏元素顺序的位置

Question

我正在为我的网站使用 video.js 播放器。我想改变控制栏元素的位置。

目前显示play/pause、音量、进度条和全屏。

我怎样才能更改订单？

我的代码如下：

var videojs = videojs('video-player', {
    techOrder:  ["youtube", "html5"],
    preload: 'auto',
    controls: true,
    autoplay: true,
    fluid: true,
    controlBar: {
        CurrentTimeDisplay: true,
        TimeDivider: true,
        DurationDisplay: true
    },
    plugins: {
        videoJsResolutionSwitcher: {
            default: 'high',
            dynamicLabel: true
        }
    }
}).ready(function() {
    var player = this;
   ......

Answer 1

我可以通过如下更改解决：

    var videojs = videojs('video-player', {
    techOrder:  ["youtube", "html5"],
    preload: 'auto',
    controls: video.player.controls,
    autoplay: video.player.autoplay,
    fluid: true,
    controlBar: {
        children: [
            "playToggle",
            "volumeMenuButton",
            "durationDisplay",
            "timeDivider",
            "currentTimeDisplay",
            "progressControl",
            "remainingTimeDisplay",
            "fullscreenToggle"
        ]
    },
    plugins: {
        videoJsResolutionSwitcher: {
            default: 'high',
            dynamicLabel: true
        }
    }
}).ready(function() {
    var player = this;

我认为这会对以后的人有所帮助。

灵感来自 JS Bin

Answer 2

对于最新版本 (v7.15.4)，下面列出的一些 Sankar 选项已更改。经过一番搜索后，我在 video.js 网站的默认组件树下找到了一个列表。

此外，在启用它们时，请确保如果您有主题，它不会隐藏某些选项。

如何更改videojs控制栏元素顺序的位置

How to change the position of videojs Control bar elements order

javascript

css

video.js