如何使用js根据视频播放时间显示字幕

要在JavaScript中根据播放时间显示字幕，你可以创建一个函数来更新字幕的显示，并在播放器的时间更新事件中调用这个函数。以下是一个简单的示例，假设你有一个包含视频和字幕的HTML结构，以及一个用于更新字幕的函数：

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:

function updateSubtitles(videoElement, subtitlesElement) {
  const currentTime = videoElement.currentTime;
  const subtitles = subtitlesElement.querySelectorAll('.subtitle');
 
  // 隐藏所有字幕
  for (const subtitle of subtitles) {
    subtitle.style.display = 'none';
  }
 
  // 显示当前时间对应的字幕
  for (const subtitle of subtitles) {
    const start = parseFloat(subtitle.getAttribute('data-start'));
    const end = parseFloat(subtitle.getAttribute('data-end'));
    if (currentTime >= start && currentTime < end) {
      subtitle.style.display = 'block';
    }
  }
}
 
const video = document.getElementById('video');
const subtitles = document.getElementById('subtitles');
 
// 更新字幕当视频播放时间更新
video.addEventListener('timeupdate', function() {
  updateSubtitles(video, subtitles);
});

在这个示例中，我们定义了一个updateSubtitles函数，它接受视频元素和字幕容器元素作为参数。函数遍历所有字幕元素，将它们的display样式设置为none，然后遍历所有字幕，根据它们的开始和结束时间以及视频的当前时间来显示相应的字幕。然后，我们在视频的timeupdate事件中注册这个函数，以便在视频播放时间更新时更新字幕。