ビデオcurrentTimeに関連したテキストの行を見つけ、javascriptを使用して強調表示しますか？

Question

私が目指しているのは、テキストをいくつか持ち、埋め込みビデオのcurrentTimeが開始タグと終了タグの間にある場合、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> 

、私はテキストを隠し、字幕として表示するために管理しているチュートリアルを使用して、しかし、私が本当にやりたいことは、フルテキストを表示し、ちょうど現在の一部をハイライトです。以下のようなものを使ってください。

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

すべてのデータを取得するのにdocument.getElementById（転写物）が機能するかどうかはわかりません。 ご協力いただければ幸いです。 ありがとう！

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

You can test it here ///私たちは、無効な属性を使用していることから、同様に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 = ""; 
    } 
} 

You can test that version here、それはあなたがより簡単に、単純にCで.currentクラスを変更することにより、そのスパンのスタイルを設定することができます、と私はまた、このように、スタイリングのためのクラスを使用したいですSS。また、ビデオが進むにつれて、前回選択された要素のスタイリングがクリアされ、その後の「現在の線」エフェクトが得られます。