I am using the video.js player for my website. I want to change the position of control bar elements.

Presently, it shows play/pause, volume, progress bar and full screen.

How can I able to change order?

I have my code below:

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

I am using the video.js player for my website. I want to change the position of control bar elements.

Presently, it shows play/pause, volume, progress bar and full screen.

How can I able to change order?

I have my code below:

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

• javascript
• css
• video.js

• Take a look at these questions, the answers in those might help How to change button order in video.js (5.0.0-rc52)? and move item control bar videojs – FluffyKitten Commented Aug 17, 2017 at 6:34

2 Answers 2

I could able resolve by making changes as below:

    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;

I thought it will help somebody in future.

Taken idea from JS Bin

For the latest version (v7.15.4), some of Sankar's options listed below have changed. After some hunting around I was able to find a list here on the video.js website under the Default Component Tree.

Also when enabling them, make sure that if you have a theme that it doesn't hide some of the options.