当前位置：首页 > JavaScript

js实现字幕

2026-04-05 22:31:31JavaScript

实现字幕的基本方法

使用HTML5的<video>标签结合JavaScript可以轻松实现字幕功能。字幕通常以WebVTT格式（.vtt文件）加载，通过<track>元素与视频关联。

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

动态加载字幕

通过JavaScript可以动态切换不同语言的字幕：

js实现字幕

const video = document.querySelector('video');
const track = document.createElement('track');
track.kind = 'subtitles';
track.label = '中文';
track.srclang = 'zh';
track.src = 'chinese.vtt';
video.appendChild(track);

// 切换字幕
function changeSubtitle(lang) {
  const tracks = video.textTracks;
  for (let i = 0; i < tracks.length; i++) {
    tracks[i].mode = tracks[i].language === lang ? 'showing' : 'hidden';
  }
}

WebVTT格式示例

字幕文件（.vtt）的基本格式：

WEBVTT

00:00:01.000 --> 00:00:04.000
这是第一句字幕

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

自定义字幕样式

通过CSS可以自定义字幕的外观：

js实现字幕

video::cue {
  color: white;
  background: rgba(0, 0, 0, 0.5);
  font-size: 16px;
  font-family: Arial, sans-serif;
}

实时字幕生成

使用Web Speech API可以实现实时语音识别并生成字幕：

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

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

recognition.start();

字幕同步控制

精确控制字幕显示时间：

const cues = [
  { start: 0, end: 5, text: "欢迎观看" },
  { start: 5, end: 10, text: "这是一个演示" }
];

const track = new VTTCue(0, 0, '');
video.textTracks[0].addCue(track);

video.ontimeupdate = () => {
  const currentTime = video.currentTime;
  const activeCue = cues.find(c => currentTime >= c.start && currentTime < c.end);
  document.getElementById('subtitle').textContent = activeCue ? activeCue.text : '';
};