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

Question

注册：HTML5视频标记：

我可以知道，是否可以将视频上的视频时间显示从 MM：SS 更改为 HH：MM：SS 。例如，截图如下：

Answer 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的内容。

Answer 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;
}