视频加载栏在阵列上工作

Question

我有一系列视频，每个视频都有自己的拇指，可以激活它们，所有视频都在阵列中。我还有一个视频进度条，显示他们玩了多远（状态，我猜），我设法每个拇指放一个。我的问题是我该怎么做才能让每个拇指只获得一个视频的进度条，而且所有六个都不会立刻熄灭。

Answer 1

一种简单的方法是使用顺序编号的id设置每个进度条，并将当前播放视频的索引存储在变量中，以便您可以使用该值来使用jQuery定位相应的progress元素： / p>

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