查找与视频currentTime相关的文本行，并使用javascript突出显示它？

我的目标是让一些文本，当嵌入视频的当前时间在开始和结束标记之间时，使用JavaScript更改文本的颜色。我有如下一些文本，使用JavaScript循环阅读并读取开始和结束标记的最佳方式是什么

<div id="transcript">
<h3>Transcript</h3>
<p class="tran">
<span tag="ID_1" start="0" end="6">transcript line #1</span>
<span tag="ID_2" start="6" end="9"> transcript line #2</span>
</p>
</div>

成绩单

记录行#1
记录行#2

通过使用教程，我成功地隐藏了文本并将其显示为标题，但我真正想做的是显示全文并突出显示当前部分。使用下面类似的东西

 for (var i = 0; i < transcriptlength; i++) {
 if (now >= tran.start && now <= tran.end){
 span.style.color = red; // 
 break;
 }}

for（变量i=0；i如果（现在>=tran.start&&now您可以这样做：

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

for (var i = 0, l = lines.length; i < l; i++) {
  if (now >= +lines[i].getAttribute("start") && 
      now <= +lines[i].getAttribute("end")) {
    lines[i].style.color = "red";
    break;
  }
}

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 = "";
  }
}

，它允许您通过简单地更改CSS中的
.current
类来更轻松地设置该范围的样式。此外，随着视频的进行，这将从先前选择的元素中清除样式，获得您想要的“当前行”效果