Question

关于我之前的问题 - Find line of text in relation to a video currentTime and highlight it using javascript? - 我一直在尝试设置视频eventlistener以使用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

现在正在调用timeupdate时计算，而不是在调用tran时计算。因此，如果你调用tran，那么现在就是在调用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 = "";
}
}}

html5视频事件监听器没有得到当前时间

1 个答案: