javascript - VideoJs 以分钟和秒而不是微秒显示当前时间

Question

所以我制作了一个脚本来在播放器之外显示当前时间，一切正常。问题是它以微秒为单位渲染，我想将其显示为 H:MM:SS

这是代码，以便您可以理解我在说什么:

HTML

<link href="http://vjs.zencdn.net/4.12/video-js.css" rel="stylesheet">
<script src="http://vjs.zencdn.net/4.12/video.js"></script>

<video id="MY_VIDEO_1" class="video-js vjs-default-skin" autoplay controls preload="auto" width="800" height="450" data-setup="{}">
  <source src="http://vjs.zencdn.net/v/oceans.mp4" type='video/mp4'>
    <source src="http://vjs.zencdn.net/v/oceans.webm" type='video/webm'>
      <p class="vjs-no-js">To view this video please enable JavaScript, and consider upgrading to a web browser that <a href="http://videojs.com/html5-video-support/" target="_blank">supports HTML5 video</a></p>
</video>
Current time: <div id="current_time"></div>

JavaScript

setInterval(function() {
  var myPlayer = videojs('MY_VIDEO_1');
  var whereYouAt = myPlayer.currentTime();
  document.getElementById("current_time").innerHTML = whereYouAt;
}, 400);

还有一个工作示例:http://codepen.io/BeBeINC/pen/VLBPLz

Answer 1

currentTime 返回以秒为单位的时间，保留两位小数。如果您想将其转换为分钟:秒格式，则需要在脚本中执行:

var minutes = Math.floor(whereYouAt / 60);   
var seconds = Math.floor(whereYouAt - minutes * 60)

这将使时间格式为 0:0，这不是很明显。它的格式应为 00:00。因此，我们需要添加一个前导零:

var x = minutes < 10 ? "0" + minutes : minutes;
var y = seconds < 10 ? "0" + seconds : seconds;

然后我们显示x和y。

document.getElementById("current_time").innerHTML = x + ":" + y;

最终脚本:

setInterval(function() {
    var myPlayer = videojs('MY_VIDEO_1');
    var whereYouAt = myPlayer.currentTime();
    var minutes = Math.floor(whereYouAt / 60);   
    var seconds = Math.floor(whereYouAt - minutes * 60)
    var x = minutes < 10 ? "0" + minutes : minutes;
    var y = seconds < 10 ? "0" + seconds : seconds;

    document.getElementById("current_time").innerHTML = x + ":" + y;

}, 400);

这是更新后的codepen