How do I show current time, divider and duration using options?

[vinixwu]

Description

I tried several approaches, but it seems the only way to display current time, divider and duration is to override related rules in video-js.css. I can only hide full screen and PIP toggle using setup options or code as the code examples listed in Guides.

I found some code examples on Stack Overflow to show current time, divider and duration using setup options, but they didn't work.

Is there a way to show/hide/enable/disable every item on the control bar using options or code?

Reduced test case

https://jsfiddle.net/24a3ujeb/

Steps to reproduce

1. Setup video.js using options like { controlBar: { currentTimeDisplay: true } }
2. The player didn't show current time.

Errors

No response

What version of Video.js are you using?

8.8.0

Video.js plugins used.

None

What browser(s) including version(s) does this occur with?

Chrome 120.0.6099.129

What OS(es) and version(s) does this occur with?

Windows 11 Pro 23H2

[welcome]

👋 Thanks for opening your first issue here! 👋

If you're reporting a 🐞 bug, please make sure you include steps to reproduce it. We get a lot of issues on this repo, so please be patient and we will get back to you as soon as we can.
To help make it easier for us to investigate your issue, please follow the contributing guidelines.

[bonniesimon]

The following worked for me:

{
  controlBar: {
    children: [
      // ...other options
      "currentTimeDisplay",
      "timeDivider",
      "durationDisplay",
      "pictureInPictureToggle",
      "playbackRateMenuButton",
      "fullscreenToggle",
    ],
  },
}

[sugar258596]

May I ask if you have solved this problem now? I also encountered this problem, but I solved it through a simple method. I don't know if this method will cause a chain reaction, so I want to change the method

[peckeby]

Facing the same issue(((
Neither this works

controlBar: {
           children: [
             'playToggle',
             'currentTimeDisplay',
             'timeDivider',
             'durationDisplay',
             'remainingTimeDisplay',
             fullscreenAllowed ? 'fullscreenToggle' : '',
             'progressControl',
           ],
         },

Nor this

 controlBar: {
            pictureInPictureToggle: false,
            fullscreenToggle: fullscreenAllowed || false,
            volumePanel: false,
            currentTimeDisplay: true,
            remainingTimeDisplay: false,
            subtitlesButton: false,
            subsCapsButton: false,
          },

Only in the first case if I use remainingTimeDisplay instead of durationDisplay remaining time display is showed with "-".