Html5：视频标签将视频时间显示从 MM:SS 更改为 HH:MM:SS答案

【问题标题】：Html5: Video tag change video time display from MM:SS to HH:MM:SSHtml5：视频标签将视频时间显示从 MM:SS 更改为 HH:MM:SS
【发布时间】：2017-03-10 20:16:22
【问题描述】：

请问，是否可以将视频上的视频时间显示从 MM:SS 更改为 HH:MM:SS。比如截图如下：

【问题讨论】：

当然。只需实现您自己的控件，包括时间显示
我需要更改视频的显示时间..你能分享官方链接吗？
从here开始。
我没有找到我需要的属性（视频上更改时间显示）
你错了。你必须自己输出时间。只需在您的视频下创建/附加一个块并在那里输出当前时间，该时间可由视频元素的相应属性读取。

标签： javascript jquery html html5-video

【解决方案1】：

剩余时间是用户代理创建影子 DOM 的一部分，因此我们无权访问它来更改其内容。

您可以将一些 hackish 的东西混在一起（仅限概念！不要用于公共/生产）：

// NOTE: This is just a hack for webkit. A lot must be implemented here
// for realworld scenario, but don't use hacks like this for production/public.
// Need to detect webkit browser. If layout changes, each version must be tracked etc.
// Build a custom player instead...
var v = document.querySelector("video");
var time = document.querySelector(".time");

v.onplay = v.oncanplay = function() {
  var dur = this.duration;
  time.innerHTML = "/ " + pad2((dur / 3600) | 0) + 
                    ":" + pad2((dur / 60) | 0) + 
                    ":" + pad2((dur % 60) | 0);
};

function pad2(s) {return s < 10 ? "0" + s : s}

video::-webkit-media-controls-time-remaining-display {
  color: #fff;
  width: 55px;
}

.wrapper {position: relative}

.wrapper > video {
  position: absolute;
  height: 200px;
}

.wrapper > .time {
  position: absolute;
  left: 60px;
  top: 177.5px;
  color: #777;
  font: 12px sans-serif;
  z-index: 1000;
}

<div class=wrapper>
  <video id="v" controls src="https://media.w3.org/2010/05/sintel/trailer.mp4"></video>
  <div class=time>/ 00:00:00</div>
</div>

但更好的方法是创建自定义控件，或使用 videojs 之类的东西。

【讨论】：

【解决方案2】：

function secondsToTime(secs)
{
secs = Math.round(secs);
var hours = Math.floor(secs / (60 * 60));

var divisor_for_minutes = secs % (60 * 60);
var minutes = Math.floor(divisor_for_minutes / 60);

var divisor_for_seconds = divisor_for_minutes % 60;
var seconds = Math.ceil(divisor_for_seconds);

var obj = {
    "h": hours,
    "m": minutes,
    "s": seconds
};
return obj;
}

【讨论】：

我需要更改视频的显示时间。看来，您的代码不在视频转换范围内。