17

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

默认情况下，它显示剩余时间（倒计时）而不是正常的当前时间（如 youtube）

任何想法如何“修复”它？你可以在他们的官方网站上看到一个活生生的例子

4

2 回答 2

39

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

播放器上存在所有计时器current-time，但默认情况下,time-divider和duration信息隐藏在display: none;.

所以我们唯一要做的就是隐藏并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>
于 2017-06-04T02:30:03.863 回答
6

简单的方法是更改​​默认 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

于 2017-10-16T07:55:15.907 回答