Show the current time of the video, instead of the remaining time on videojs

Question

I use VideoJS, a HTML5 video player

By default it displays the remaining time (countdown) instead of the normal current time (like youtube)

Any ideas how to "fix" it? You can see a live example at their official website

Telles

Answer 1

For other people that search for a solution...

All timers exist on the player but by default the current-time, time-divider and the duration info are hidden with display: none;.

So the only thing we have to do is hide the remaining-time and show the time-control which includes the current-time, time-divider and the duration.

The solution in CSS code that should work with your player:

.video-js .vjs-time-control {
    display: block;
}
.video-js .vjs-remaining-time {
    display: none;
}

The documentation does not explain this, or to be precise it fails to explain it when it explains how to customize your player with CSS.

---

Fast html code snippet:

<style type="text/css">
    .video-js .vjs-time-control{display: block;}
    .video-js .vjs-remaining-time{display: none;}
</style>

Exieexigency

For me, instead of changing .vjs-time-control, I changed .vjs-current-time, which solved my problem – Splurge

It displays vjs-time-control however, there is no time on it: "/" – Cailean

I can not believe it that we have to hack the DOM elements visibility to do this :/ – Silkaline

Answer 2

easy way is change default ControlBar.prototype.options

ControlBar.prototype.options_ = {
  children: ['playToggle', 'volumePanel', 'currentTimeDisplay', 'timeDivider', 'durationDisplay', 'progressControl', 'liveDisplay', 'remainingTimeDisplay', 'customControlSpacer', 'playbackRateMenuButton', 'chaptersButton', 'descriptionsButton', 'subsCapsButton', 'audioTrackButton', 'fullscreenToggle']
};

change to

ControlBar.prototype.options_ = {
  loadEvent: 'play',
  children: ['playToggle', 'volumeMenuButton', 'currentTimeDisplay', 'progressControl', 'liveDisplay', 'durationDisplay', 'customControlSpacer', 'playbackRateMenuButton', 'chaptersButton', 'subtitlesButton', 'captionsButton', 'fullscreenToggle']
};

final display time control

<style type="text/css">
    .video-js .vjs-time-control{display:block;}
</style>

result: https://i.sstatic.net/7Vvxm.png

Ulpian

new versions can refer to this answer: #45727517 – Tapp

Answer 3

Relevant as of July 2024.
I found a way to display the current time.
First, download the styles https://vjs.zencdn.net/8.12.0/video-js.css to your local machine.

Around line 1479, you will see:

.vjs-live .vjs-time-control,
.vjs-live .vjs-time-divider,
.video-js .vjs-current-time,
.video-js .vjs-duration {
  display: none;
}

You need to comment out one line:

.vjs-live .vjs-time-control,
.vjs-live .vjs-time-divider,
/*.video-js .vjs-current-time,*/
.video-js .vjs-duration {
  display: none;
}

Replace the library stylesheet link from the Internet with the local stylesheet in your HTML page.

You can remove the remaining time like this:

let videoPlayer = videojs(videoElem, {
    controls: true,
    controlBar: {
        remainingTimeDisplay: false
    }
});

Profit!

Barrelhouse