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>

CSS:

#subtitles .subtitle {
  display: none; /* 默认不显示字幕 */
}

jQuery:

$(document).ready(function() {
  var $video = $('#video');
  var $subtitles = $('#subtitles .subtitle');
 
  $video.on('timeupdate', function() {
    var currentTime = Math.floor($video[0].currentTime); // 当前视频播放时间（秒）
    $subtitles.each(function() {
      var $subtitle = $(this);
      var startTime = $subtitle.data('start');
      var endTime = $subtitle.data('end');
 
      if (currentTime >= startTime && currentTime < endTime) {
        $subtitles.hide(); // 隐藏所有字幕
        $subtitle.show();  // 显示当前应该显示的字幕
      }
    });
  });
 
  $video[0].play(); // 自动播放视频
});

在这个示例中，每个.subtitle都有data-start和data-end属性，分别表示该句字幕开始和结束的时间（秒）。当视频的timeupdate事件触发时，会遍历所有字幕，并根据视频当前的播放时间来判断哪句字幕应该显示。如果当前时间在一句字幕的开始和结束时间内，那么它会显示并且其他字幕会隐藏。这样就实现了基于视频播放时间的字幕控制。