Geek Answers Handbook

Show the current video time, not the remaining time on videojs

I am using VideoJS , HTML5 video player

By default, it displays the remaining time (countdown) instead of the usual current time (for example, youtube)

Any ideas on how to “fix” this? You can see a live example on their official website.

+6
source share
3 answers

For other people who are looking for a solution ...

All timers exist on the player, but by default current-time , time-divider and duration information is hidden with display: block; .

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

CSS solution 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 cannot explain it when it explains how to customize the player using CSS.

Quick html code snippet:

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

solvable.

PS: (This answer is from 2013. GramThano answer is later)

/js/video.js

Find

 options: { loadEvent: "play", components: { playToggle: {}, fullscreenToggle: {}, currentTimeDisplay: {}, timeDivider: {}, durationDisplay: {}, remainingTimeDisplay: {}, progressControl: {}, volumeControl: {}, muteToggle: {} }

And replace

 options: { loadEvent: "play", components: { playToggle: {}, fullscreenToggle: {}, currentTimeDisplay: {}, timeDivider: {}, durationDisplay: {}, //remainingTimeDisplay: {}, REMOVED progressControl: {}, volumeControl: {}, muteToggle: {} }

/css/video-js.min.css

Find

 .vjs-default-skin .vjs-current-time { left:30px; top:7px }

And replace

 .vjs-default-skin .vjs-current-time { right:120px; top:7px }
+1
source

an easy way is to change the 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

0
source

More articles:


All Articles