html5视频事件监听器没有获取当前时间

Question

关于我之前的问题 - Find line of text in relation to a video currentTime and highlight it using javascript? - 我一直在尝试设置视频事件监听器以使用 video.currentTime 设置 now 变量的值。这是我目前拥有的代码（没有返回错误但实际上没有工作）。

function transcript(){
var now;
var lines = document.getElementById("transcript").getElementsByTagName("span"); 

function timeupdate(){
     var video = document.getElementsByTagName('video')[0];
     video.addEventListener('currentTime', tran, false);
 now = video.currentTime;
}

function tran(){
for (var i = 0, l = lines.length; i < l; i++) {
if (now >= +lines[i].getAttribute("data-start") && 
now <= +lines[i].getAttribute("data-end")) {
lines[i].className = "current";
} else {
lines[i].className = "";
}
}}   
}

我知道 tran 函数可以工作，但不起作用的是更改 now 变量。我还尝试打印视频的当前时间，但这也没有奏效，所以我想我没有正确执行 eventListener？ 谢谢

Answer 1

now 是在调用 timeupdate 时计算的，而不是在调用 tran 时计算的。因此，如果您调用 tran，则 now 将是调用 timeupdate 的时间。

要获得准确的 now 变量，请在 tran 函数中获取当前时间：

function tran(){
var video = document.getElementsByTagName('video')[0];
now = video.currentTime;
for (var i = 0, l = lines.length; i < l; i++) {
if (now >= +lines[i].getAttribute("data-start") && 
now <= +lines[i].getAttribute("data-end")) {
lines[i].className = "current";
} else {
lines[i].className = "";
}
}}