jquery根据视频播放时间显示字幕

要在jQuery中根据视频的播放时间显示字幕，你可以监听视频的timeupdate事件，该事件在视频的播放位置发生改变时触发。以下是一个简单的示例，假设你有一个视频元素和相应的字幕列表：

HTML:

<video id="video" controls>
  <source src="movie.mp4" type="video/mp4">
  Your browser does not support the video tag.
</video>
 
<div id="subtitles">
  <div class="subtitle" data-start="10" data-end="20">这是第一个字幕</div>
  <div class="subtitle" data-start="20" data-end="30">这是第二个字幕</div>
  <!-- 更多字幕 -->
</div>复制

JavaScript (使用jQuery):

$(document).ready(function() {
  var $video = $('#video');
  var $subtitles = $('#subtitles .subtitle');
 
  $video.on('timeupdate', function() {
    var currentTime = $video[0].currentTime; // 当前播放时间
    $subtitles.each(function() {
      var $subtitle = $(this);
      if (currentTime >= $subtitle.data('start') && currentTime < $subtitle.data('end')) {
        // 显示字幕
        $subtitle.css('display', 'block');
      } else {
        // 隐藏字幕
        $subtitle.css('display', 'none');
      }
    });
  });
  
  // 初始隐藏所有字幕
  $subtitles.hide();
});复制

确保你的视频和字幕时间戳正确，并根据需要调整字幕的显示方式。这个示例中使用了.data()函数来存储字幕的开始和结束时间，并在timeupdate事件处理函数中根据视频的当前时间来显示和隐藏字幕。