显示视频的当前时间,而不是videojs上的剩余时间

Question

我使用VideoJS,一个HTML5视频播放器

默认情况下,它显示剩余时间(倒计时)而不是正常当前时间(如youtube)

任何想法如何"修复"它？您可以在他们的官方网站上看到一个实例

Answer 1

对于寻找解决方案的其他人......

所有的计时器存在的球员,但在默认情况下current-time,time-divider与duration信息隐藏与display: block;.

所以,我们要做的唯一事情就是隐藏remaining-time和显示time-control其中包括current-time,time-divider和duration.

CSS代码中的解决方案应该适用于您的播放器:

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

文档没有解释这一点,或者确切地说,当它解释如何使用CSS自定义播放器时,它无法解释它.

快速的HTML代码片段:

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

Answer 2

简单的方法是更改​​默认 ControlBar.prototype.options

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

改成

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

最终显示时间控制

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

结果：https : //i.stack.imgur.com/7Vvxm.png