18

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

2 Answers 2

45

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

player-with-time-control

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>
3
  • 1
    For me, instead of changing .vjs-time-control, I changed .vjs-current-time, which solved my problem Feb 24, 2019 at 11:11
  • It displays vjs-time-control however, there is no time on it: "/"
    – efirat
    Mar 3, 2020 at 22:04
  • I can not believe it that we have to hack the DOM elements visibility to do this :/
    – fguillen
    Sep 19 at 8:20
6

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.stack.imgur.com/7Vvxm.png

1

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.