js怎样操作WebVTT字幕 3个字幕控制技巧增强视频体验

<video width="640"    style="max-width:90%" controls>
  <source src="your-video.mp4" type="video/mp4">
  <track src="your-subtitles.vtt" kind="subtitles" srclang="zh" label="中文">
</video>

const video = document.querySelector('video');
const track = video.querySelector('track');
const textTracks = video.textTracks; // 获取所有字幕轨道

// 确保字幕轨道可用
if (textTracks.length > 0) {
  const textTrack = textTracks[0]; // 获取第一个字幕轨道
  textTrack.mode = 'showing'; // 设置为显示状态

  textTrack.oncuechange = () => {
    const cue = textTrack.activeCues[0]; // 获取当前显示的字幕

    if (cue) {
      // 对字幕进行操作，例如改变样式
      console.log('当前字幕内容:', cue.text);
      // 可以在这里添加改变字幕样式的代码
    }
  };
}

WEBVTT

STYLE
::cue {
  color: yellow;
  text-shadow: 2px 2px black;
}

00:00:00.000 --> 00:00:05.000
这是第一句字幕。

00:00:05.000 --> 00:00:10.000
这是第二句字幕。

textTrack.oncuechange = () => {
  const cue = textTrack.activeCues[0];

  if (cue) {
    // 创建一个新的div元素
    const div = document.createElement('div');
    div.textContent = cue.text;
    div.style.color = 'red'; // 修改颜色
    div.style.fontSize = '20px'; // 修改字体大小
    div.style.backgroundColor = 'rgba(0, 0, 0, 0.5)'; // 添加背景色

    // 替换原来的字幕文本（这部分需要根据具体的字幕渲染方式来实现，不同的视频播放器实现方式可能不同）
    // 这里只是一个示例，可能需要在特定的视频播放器API中查找替换字幕文本的方法
    // 例如，如果视频播放器使用一个特定的div来显示字幕，你可以找到这个div并替换它的内容
    // document.querySelector('.subtitle-container').innerHTML = div.outerHTML;
    console.log('字幕样式已修改');
  }
};

video.addEventListener('timeupdate', () => {
  const currentTime = video.currentTime;
  // 假设你的字幕数据是一个数组，包含了每个字幕的开始时间和结束时间
  const subtitles = [
    { start: 0, end: 5, text: '这是第一句字幕' },
    { start: 5, end: 10, text: '这是第二句字幕' },
    // ... 更多字幕
  ];

  // 找到当前应该显示的字幕
  const currentSubtitle = subtitles.find(subtitle => currentTime >= subtitle.start && currentTime < subtitle.end);

  if (currentSubtitle) {
    // 显示字幕
    // 同样，这里需要根据视频播放器的字幕渲染方式来显示字幕
    // 例如，可以创建一个div元素，将字幕文本放入其中，然后添加到字幕容器中
    // document.querySelector('.subtitle-container').textContent = currentSubtitle.text;
    console.log('当前字幕：', currentSubtitle.text);
  } else {
    // 清空字幕
    // document.querySelector('.subtitle-container').textContent = '';
    console.log('无字幕');
  }
});

const offset = 0.5; // 字幕偏移0.5秒

const currentSubtitle = subtitles.find(subtitle => currentTime + offset >= subtitle.start && currentTime + offset < subtitle.end);

fetch('your-subtitles.vtt')
  .then(response => response.blob())
  .then(blob => {
    const reader = new FileReader();
    reader.onload = function(event) {
      const text = event.target.result;
      // 解析WebVTT文件
      parseWebVTT(text);
    }
    reader.onerror = function(event) {
      console.error("文件读取出错: ", event);
    }

    // 尝试使用不同的编码格式读取文件
    const decoder = new TextDecoder('utf-8'); // 默认使用UTF-8
    reader.readAsText(blob, decoder);

    // 如果UTF-8解码失败，可以尝试其他编码格式
    // const decoder = new TextDecoder('gbk');
    // reader.readAsText(blob, decoder);
  });

function parseWebVTT(text) {
  // 解析WebVTT文件的逻辑
  // 例如，将WebVTT文本分割成不同的字幕块，提取时间戳和文本内容
  const lines = text.split('\n');
  // ... 解析逻辑
  console.log('WebVTT文件内容：', lines);
}