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

时间:2017-08-17 05:10:57

标签: javascript css video.js

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

目前,它显示播放/暂停,音量,进度条和全屏。

我如何才能更改订单?

我的代码如下:

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;
   ......

1 个答案:

答案 0 :(得分: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

的想法