javascript - HTML5 : Video tag change video time display from MM:SS to HH:MM:SS

Question

注册:HTML5 视频标签:

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

Answer 1

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

你可以将一些黑客的东西混在一起，如下所示(仅概念!不要用于公共(public)/生产):

// 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的东西.