（掏出同声传译耳机）同学们，上节课我们给视频加了爆米花特效，现在要给电影配上野生弹幕啦！准备好用代码当字幕组了吗？

8.3 字幕与轨道(track)

8.3.1 视频的隐形弹幕

<track>标签就像给视频贴小抄，支持的字幕类型比弹幕模式还丰富：

<video controls>
  <source src="ted-talk.mp4">
  <!-- 五种字幕模式任选 -->
  <track label="中文字幕" kind="subtitles" srclang="zh" src="subs-zh.vtt">
  <track label="English CC" kind="captions" srclang="en" src="subs-en.vtt">
  <track label="章节导航" kind="chapters" srclang="en" src="chapters.vtt">
</video>

（试试给爱豆的舞台直拍加歌词字幕，瞬间变身站姐！）

8.3.2 WebVTT文件：字幕的乐高积木

字幕文件格式就像给视频写剧本：

WEBVTT

1
00:00:02.500 --> 00:00:05.000
<v 魔法师>你们看到的这个盒子
其实是<div magic>HTML5视频播放器</div>

2
00:00:05.001 --> 00:00:07.800
可以添加<style> ::cue { color: yellow }</style> 
让字幕变身荧光弹幕

（支持CSS样式注入，比B站弹幕还花哨！）

8.3.3 实战：双语字幕切换器

<div class="subtitle-switcher">
  <video controls>
    <source src="lecture.mp4">
    <track label="中文" default kind="subtitles" srclang="zh" src="subs-zh.vtt">
    <track label="English" kind="subtitles" srclang="en" src="subs-en.vtt">
  </video>
  
  <div class="sub-btns">
    <button onclick="toggleSub('zh')">中文字幕</button>
    <button onclick="toggleSub('en')">英文字幕</button>
    <button onclick="toggleSub('off')">关闭字幕</button>
  </div>
</div>

<script>
function toggleSub(lang) {
  const tracks = document.querySelectorAll('track');
  tracks.forEach(track => track.track.mode = track.srclang === lang ? 'showing' : 'hidden');
  if(lang === 'off') tracks.forEach(t => t.track.mode = 'disabled');
}
</script>

8.3.4 字幕生存法则

1. 文件编码：必须使用UTF-8，否则中文会变成火星文。
2. 时间轴对齐：时间码错位就像电影和字幕在玩你追我赶。
3. 跨域限制：字幕文件要和视频同源，否则浏览器会亮红灯。
4. 样式定制：用CSS给字幕穿皮肤：css代码

::cue {
  background: rgba(0,0,0,0.7);
  font-family: "微软雅黑";
  text-shadow: 2px 2px 3px black;
}

1. 浏览器支持：Safari对样式支持像挑食的小朋友

（敲黑板）注意：字幕文件丢失时，浏览器会安静得像没交作业的你！

8.3.5 高级玩法：弹幕雨

<!-- 用WebVTT实现滚动弹幕 -->
<style>
::cue(b) { animation: danmu 5s linear; }
@keyframes danmu { from { left: 100%; } to { left: -100%; } }
</style>

<video controls>
  <track src="danmu.vtt" kind="metadata">
</video>

WEBVTT

NOTE 这就是传说中的代码弹幕

00:00:01.000 --> 00:00:05.000 line:10%
<b>前方高能预警！</b>

00:00:03.000 --> 00:00:07.000 line:30%
<v 程序员>这个特效是用CSS写的！</v>

（神秘预告：下节课我们要给网页装GPS导航！猜猜哪个API能定位你的心？）