javascript - 视频加载条在阵列上工作

Question

我有一系列视频，每个视频都有自己的拇指来激活它们，所有这些都在一个数组中。我还有一个视频进度条，显示他们玩了多远（状态，我猜），我已经设法在每个拇指上放了一个。我的问题是如何做到这一点，以便每个拇指只获得其视频的进度条，并且所有六个不会同时消失。

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