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

Question

我使用的是VideoJS，一个HTML5视频播放器

默认显示剩余时间（倒计时）而不是正常当前时间（如youtube）

任何想法如何“修复”它？您可以在their official website

查看实时示例

Answer 1

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

播放器上

所有计时器，但默认情况下current-time，time-divider和duration信息隐藏 { {1}}。

所以我们唯一要做的就是隐藏display: block; ，显示remaining-time ，其中包含time-control， current-time和time-divider。

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

duration

文档没有解释这一点，或者说它在解释如何使用CSS自定义播放器时无法解释它。

快速html代码段：

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

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