Video.js: can't reorder components in 5.0

Created on 5 Oct 2015 · 12Comments · Source: videojs/video.js

this https://github.com/videojs/video.js/issues/1070 no longer seems to work in the newest version. I've attempted to do it in a variety of ways and it always ends up breaking the player. Is this still supported and if so what is the correct usage?

question

Source

lupos

Most helpful comment

currentTimeDisplay and durationDisplay are already in the dom, just hidden via CSS. Just change those to display: block. Example

mmcc on 10 Dec 2015

👍2

All 12 comments

The child lists have changed to arrays to make reordering consistent between browsers.

videojs.getComponent('ControlBar').prototype.options_ = {
      loadEvent: 'play',
      children: [
        'playToggle',
        'muteToggle',
        'volumeControl',
        'fullscreenToggle'
      ]
}

heff on 5 Oct 2015

Forgot to change the example. :) It's updated now.

heff on 5 Oct 2015

thanks for the quick reply. perhaps I'm a little thick or just tired but could you possibly give me and example options:{} that changes the order of the control bar? whenever I try and pass it in I end up not having a bigPlayButton because I don't specifically define that.

lupos on 5 Oct 2015

nm! sorted it out finally. Not sure what I was doing wrong before but I finally got the right combo. Thanks for your help.

lupos on 5 Oct 2015

The example is just the code example above. If you're having issues with it, could you share a jsbin example of what you're doing?

heff on 2 Dec 2015

@heff Figured it out. The only way I could get it to work was by supplying object-styled members to the array (using the CDN -- haven't moved over to a full prod. attempt, yet):

children:   
   [ 
      {name:'fullscreenToggle'},
      {name:'playToggle'},
      {name:'volumeControl'},
      {name:'muteToggle'}
]

tneaves on 2 Dec 2015

Interesting. That seems like a bug.

On Wed, Dec 2, 2015 at 12:07 PM, tneaves [email protected] wrote:

@heff https://github.com/heff Figured it out. The only way I could get
it to work was by supplying object-styled members to the array:
children: [
{name:'fullscreenToggle'},
{name:'playToggle'},
{name:'volumeControl'},
{name:'muteToggle'}
]

—
Reply to this email directly or view it on GitHub
https://github.com/videojs/video.js/issues/2673#issuecomment-161417805.

heff on 2 Dec 2015

It seems like this issue isn't resolved. Certain members won't display, either, like CurrentTimeDisplay or DurationDisplay

tneaves on 2 Dec 2015

currentTimeDisplay and durationDisplay are already in the dom, just hidden via CSS. Just change those to display: block. Example

mmcc on 10 Dec 2015

👍2

@mmcc does it work?

        controlBar: {
            volumePanel: {inline: false},
            // fullscreenToggle: false,
            children: [
                "playToggle",
                "progressControl",
                "volumeMenuButton",
                "currentTimeDisplay",
                "timeDivider",
                "durationDisplay",
            ]
        }

weituotian on 14 Jan 2019

@weituotian I'm not sure which part you're asking about, but if it's specifying the control bar's children, yes, confirmed it does work in VJS 7+.

mmcc on 14 Jan 2019

as described above, we could set the order of the control bars, but,if you would set the order of currentTimeDisplay and durationDisplay,you could set the css style also,because the display attribute of them were set to none default.

thanks for @mmcc