Найти строку текста по отношению к видео currentTime и выделить его с помощью JavaScript?

Question

То, что я собираюсь сделать, это иметь некоторый текст, и с помощью JavaScript изменить цвет текста, когда currentTime встроенного видео находится между начальным и конечным тегами. У меня есть текст, как показано ниже, как лучше всего использовать 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>

Используя учебники, мне удалось скрыть текст и показать его в виде подписи, но я действительно хочу показать полный текст и просто выделить текущую часть. Используя что-то вроде этого ниже.

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

Я не уверен, что document.getElementById (transcript) будет работать при получении всех данных. Любая помощь приветствуется. Спасибо!

Answer 1

Вы можете сделать то, что вам нужно, как это:

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

Вы можете проверить это здесь ///, но, поскольку мы используем недопустимые атрибуты, можно также использоватьHTML5 действительные data- атрибуты (например, data-start вместо start), и я бы также использовал класс для стиля, например:

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

Вы можете проверить эту версию здесь, это позволяет вам легче стилизовать этот диапазон, просто изменив класс .current в CSS.Кроме того, по мере продвижения видео это будет очищать стиль от ранее выбранного элемента, получая эффект «текущей строки», который вам нужен.