当前位置：首页 > JavaScript

js实现字幕

2026-02-01 06:03:33JavaScript

实现字幕的基本方法

使用JavaScript实现字幕功能通常涉及HTML5的<track>元素或动态文本渲染。以下是两种常见实现方式：

HTML5视频字幕

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

动态DOM字幕

js实现字幕

const subtitleElement = document.createElement('div');
subtitleElement.style.position = 'absolute';
subtitleElement.style.bottom = '20px';
subtitleElement.style.width = '100%';
subtitleElement.style.textAlign = 'center';
subtitleElement.style.color = 'white';
document.body.appendChild(subtitleElement);

// 更新字幕内容
function updateSubtitle(text) {
  subtitleElement.textContent = text;
}

WebVTT字幕文件格式

创建字幕需要遵循WebVTT格式：

WEBVTT

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

00:00:05.500 --> 00:00:08.700
这是第二句字幕

动态字幕同步实现

对于需要精确时间控制的场景，可以使用视频时间事件：

js实现字幕

const video = document.querySelector('video');
const subtitles = [
  { start: 1, end: 4, text: "第一句" },
  { start: 5, end: 8, text: "第二句" }
];

video.addEventListener('timeupdate', () => {
  const currentTime = video.currentTime;
  const activeSubtitle = subtitles.find(s => 
    currentTime >= s.start && currentTime < s.end
  );

  updateSubtitle(activeSubtitle ? activeSubtitle.text : '');
});

样式优化技巧

为字幕添加CSS样式提升可读性：

div.subtitle {
  font-family: Arial, sans-serif;
  font-size: 24px;
  text-shadow: 2px 2px 4px rgba(0,0,0,0.8);
  background-color: rgba(0,0,0,0.5);
  padding: 8px;
  border-radius: 4px;
}

高级字幕控制

实现用户可配置的字幕选项：

const subtitleSettings = {
  color: '#FFFFFF',
  size: '24px',
  background: true
};

function applySubtitleSettings() {
  subtitleElement.style.color = subtitleSettings.color;
  subtitleElement.style.fontSize = subtitleSettings.size;
  subtitleElement.style.backgroundColor = subtitleSettings.background 
    ? 'rgba(0,0,0,0.5)' : 'transparent';
}

响应式字幕处理

适应不同屏幕尺寸的响应式调整：

function resizeSubtitle() {
  const baseSize = Math.min(
    window.innerWidth * 0.03, 
    window.innerHeight * 0.05
  );
  subtitleElement.style.fontSize = `${baseSize}px`;
}

window.addEventListener('resize', resizeSubtitle);