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

Posted 2023-05-07

【中文标题】显示视频的当前时间，而不是 videojs 上的剩余时间

【英文标题】：Show the current time of the video, instead of the remaining time on videojs

【发布时间】：2013-02-25 18:31:59

【问题描述】：

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

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

任何想法如何“修复”它？你可以在their official website看到一个活生生的例子

【参考方案1】：

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

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

所以我们唯一要做的就是隐藏remaining-time并显示time-control，其中包括current-time、time-divider和@ 987654331@.

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

.video-js .vjs-time-control 
    display: block;

.video-js .vjs-remaining-time 
    display: none;

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

---

快速html代码sn-p：

<style type="text/css">
    .video-js .vjs-time-controldisplay:block;
    .video-js .vjs-remaining-timedisplay: none;
</style>

【讨论】：

对我来说，我没有更改.vjs-time-control，而是更改了.vjs-current-time，这解决了我的问题

它显示vjs-time-control，但是没有时间：“/”

【参考方案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-controldisplay:block;
</style>

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

【讨论】：

新版本可以参考这个答案：***.com/questions/45727017/…