javascript - ビデオ読み込みバーが配列で機能する

Question

私はビデオの配列を持っており、それぞれがそれらをアクティブにする独自の親指を持ち、すべて配列内にあります。また、ビデオがどれだけ再生されたかを示すプログレスバー (ステータスだと思います) もあり、各親指に 1 つずつ付けることができました。私の質問は、各親指がそのビデオの進行状況バーのみを取得し、6 つすべてが一度にオフにならないようにするにはどうすればよいかということです。

Answer 1

簡単な方法は、順番に番号が付けられた ID を使用して各進行状況バーを設定し、現在再生中のビデオのインデックスを変数に格納して、その値を使用して jQuery を使用して適切な進行状況要素をターゲットにできるようにすることです。

HTML:

 <div id="progress_1"><!-- any markup required for my progress bar --></div>
 <div id="progress_2"><!-- any markup required for my progress bar --></div>
 <div id="progress_3"><!-- any markup required for my progress bar --></div>

jQuery

// Update this with the index of the currently 
// playing video when the user clicks a thumb
var currentVideoIndex = 0;

// Use the currentVideoIndex to target the progress bar related to 
// the currently playing video
$('#progress_' + currentVideoIndex).css('width', percent);