js实现字幕

使用HTML5的<track>标签和JavaScript

HTML5提供了<track>标签，可以用于为视频添加字幕。通过JavaScript可以动态控制字幕的显示。

<video id="video" controls>
  <source src="video.mp4" type="video/mp4">
  <track id="subtitle" src="subtitles.vtt" kind="subtitles" srclang="en" label="English">
</video>

const video = document.getElementById('video');
const track = document.getElementById('subtitle');
track.mode = 'showing'; // 显示字幕

动态创建字幕元素

通过CSS和JavaScript动态创建字幕元素，可以更灵活地控制字幕样式和位置。

<div id="video-container">
  <video id="video" src="video.mp4" controls></video>
  <div id="subtitle"></div>
</div>

const video = document.getElementById('video');
const subtitle = document.getElementById('subtitle');

video.addEventListener('timeupdate', () => {
  const currentTime = video.currentTime;
  // 根据时间显示不同的字幕
  if (currentTime >= 0 && currentTime < 5) {
    subtitle.textContent = "这是第一段字幕";
  } else if (currentTime >= 5 && currentTime < 10) {
    subtitle.textContent = "这是第二段字幕";
  }
});

使用WebVTT格式字幕

WebVTT是一种标准的字幕格式，可以被现代浏览器直接支持。

WEBVTT

00:00:01.000 --> 00:00:05.000
这是第一段字幕

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

// 动态加载字幕文件
fetch('subtitles.vtt')
  .then(response => response.text())
  .then(text => {
    const track = document.createElement('track');
    track.kind = 'subtitles';
    track.label = 'English';
    track.srclang = 'en';
    track.src = URL.createObjectURL(new Blob([text], { type: 'text/vtt' }));
    video.appendChild(track);
    track.mode = 'showing';
  });

使用第三方库

一些第三方库如Video.js提供了更丰富的字幕功能。

<link href="https://vjs.zencdn.net/7.15.4/video-js.css" rel="stylesheet">
<script src="https://vjs.zencdn.net/7.15.4/video.js"></script>

<video id="video" class="video-js" controls>
  <source src="video.mp4" type="video/mp4">
  <track src="subtitles.vtt" kind="subtitles" srclang="en" label="English">
</video>

const player = videojs('video');
player.ready(() => {
  const track = player.addRemoteTextTrack({
    src: 'subtitles.vtt',
    kind: 'subtitles',
    label: 'English',
    srclang: 'en'
  }, false);
  player.textTracks()[0].mode = 'showing';
});

自定义字幕样式

通过CSS可以自定义字幕的外观，包括字体、颜色、背景等。

#subtitle {
  position: absolute;
  bottom: 20%;
  left: 50%;
  transform: translateX(-50%);
  color: white;
  font-size: 24px;
  text-shadow: 2px 2px 4px black;
  background-color: rgba(0, 0, 0, 0.5);
  padding: 5px 10px;
  border-radius: 5px;
}

实时字幕生成

结合Web Speech API可以实现实时字幕生成。

const recognition = new webkitSpeechRecognition();
recognition.continuous = true;
recognition.interimResults = true;

recognition.onresult = (event) => {
  const subtitle = document.getElementById('subtitle');
  let interimTranscript = '';
  for (let i = event.resultIndex; i < event.results.length; i++) {
    const transcript = event.results[i][0].transcript;
    if (event.results[i].isFinal) {
      subtitle.textContent = transcript;
    } else {
      interimTranscript += transcript;
    }
  }
};

recognition.start();