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

GramThanos
  • 3,572
  • 1
  • 22
  • 34
Lucas Bustamante
  • 15,821
  • 7
  • 92
  • 86

2 Answers2

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>
GramThanos
  • 3,572
  • 1
  • 22
  • 34
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
    new versions can refer to this answer: https://stackoverflow.com/questions/45727017/how-to-change-the-position-of-videojs-control-bar-elements-order – zhangciwu Jun 24 '20 at 10:45