Video.js: videoJs Component Options not work!

[weituotian]

Description

i want to disable the muteToggle but the option not work!
not work!
not work!
not work!

Steps to reproduce

data-setup='{ "controlBar": { "muteToggle": false } }'

Results

Expected

to disable the muteToggle, RemainingTimeDisplay

[mister-ben]

That control is a volumeMenuButton, so data-setup='{ "controlBar": { "volumeMenuButton": false } }'

[weituotian]

and i want to replace the RemainingTimeDisplay to CurrentTimeDisplay
it is not work too!not work!not work!not work!not work!

var player = videojs("myvideo", option, function () { console.log("ready"); }); player.controlBar.removeChild("RemainingTimeDisplay")//it work!; player.controlBar.addChild('CurrentTimeDisplay');//not work!

So how to deal with this problem?i need help?

And how to find the correct way to configure it,
i try to read document many times but it does not helpful to me.
What the document describe is not correct, having no effect?

[mister-ben]

The current time display is present in the control bar by default - but it's also hidden by the default style. Try this:

.video-js .vjs-current-time,
.vjs-no-flex .vjs-current-time {
  display: block;
}

Does this diagram help understand the component used?
https://github.com/videojs/video.js/blob/master/docs/guides/components.md#default-component-tree

[weituotian]

ehhhh,
when i trying to practice the new document
the new problem is:

    var option3 = {
        children: [
            'BigPlayButton',
            'controlBar'
        ]
    };
    var player = videojs("myvideo", option3, function () {
        console.log("ready");
    });

when i click the bigPlayButton

it not work! because

[weituotian]

@mister-ben
Is the problem to hard to solve?

[weituotian]

@mister-ben
Is the problem to hard to solve?

[mister-ben]

Setting an array elements for children will overwrite the default children. In this case you now have no MediaLoader component. Without that there's no playback, so you don't want to do that.

You can remove the volume control and remaining time with setup options:

"controlBar": {
  "volumeMenuButton": false,
  "remainingTimeDisplay": false
}

You can show the current time with CSS:

.video-js .vjs-current-time,
.vjs-no-flex .vjs-current-time {
  display: block;
}

[NabiKAZ]

@mister-ben
Can use remainingTimeDisplay and fullscreenToggle in setup,... Why can not use another option in [here] be like currentTimeDisplay, durationDisplay,... ? and why must use css and theme for show some options?