Javascript 当前时间函数工作

Question

我正在尝试让我的自定义视频控件显示视频的当前时间。但是我无法让它发挥作用。我的代码中缺少什么？

Javascript代码

var time = document.getElementById("current");

time.addEventListener("timeupdate", currentTime, true);

// Current time function 

function currentTime() {

    var currentMinutes = Math.floor(video.currentTime / 60);
    var currentSeconds = Math.floor(video.currentTime - currentMinutes * 60);


    time.innerHTML = currentMinutes + ":" + currentSeconds;     
}

HTML5

<div id="time">
    <span id="current">00:00</span> 
    <span id="duration">00:00</span>
</div>

Answer 1

您需要有一个事件触发器来关闭该事件。由于您使用的是视频，我将使用视频 ontimeupdate 事件。

时间显示似乎有问题。但我在这个 fiddle 中得到了视频事件的东西:https://jsfiddle.net/83peL34r/

Javascript:

var time = document.getElementById("current");
var video = document.getElementById("video");

time.addEventListener("timeupdate", currentTime, true);
video.ontimeupdate = function() {currentTime()};

// Current time function 

function currentTime() {

    var currentMinutes = Math.floor(video.currentTime / 60);
    var currentSeconds = Math.floor(video.currentTime - currentMinutes * 60);


  time.innerHTML = currentMinutes + ":" + currentSeconds;

}

HTML:

<video id="video" width="400" controls>
  <source src="http://www.w3schools.com/html/mov_bbb.mp4" type="video/mp4">
</video>
<div id="time">
  <span id="current">00:00</span> 
  <span id="duration">00:00</span>
</div>

编辑:我做了一些更改，以便让您更进一步。在这个例子中，它获取持续时间并将其放入持续时间部分。如果秒数小于 10，则会在其前面填充 0。

https://jsfiddle.net/83peL34r/1/