双语字幕与外挂字幕设置：SRT/VTT/BCC 全格式指南

看外语课想英文原文+中文翻译同时显示；给学员分发视频想自带字幕不用他们再找——这两件小事，很多网页播放器要么做不到，要么做得别扭。ZWPlayer 把字幕做成「两轨平行」的模型：主轨、副轨各自独立选择，同显即为双语。本文从配置到观众端操作讲一遍，顺带把格式支持与常见问题说清。

字幕模型：主轨 + 副轨

ZWPlayer 内部维护两条字幕轨：轨 1（主） 与 轨 2（副）。每条轨可独立挂任意一路字幕，两轨同时显示就是双语字幕——通常主轨放原文、副轨放译文，原文在上、译文在下，字号与样式分别可调。

双语字幕同显 图 1:主轨英文原文与副轨中文译文同时显示

这个模型的好处是组合自由：英+中、日+中、中+手语说明、原文+注释，都是同一套机制；只挂一条轨时它就是普通单字幕。

开发者侧：三种挂载方式

方式一：配置属性一次挂多轨（推荐）

new ZWPlayer({
  playerElm: 'player',
  url: 'https://example.com/lesson.mp4',
  subtitles: [
    { url: 'https://example.com/en.srt', title: 'English' },
    { url: 'https://example.com/zh.srt', title: '中文' },
  ],
});

subtitles 数组按顺序自动挂到轨 1、轨 2——两条就是现成的双语字幕，一条就是单字幕。title 会显示在字幕菜单里。

方式二：运行时 API 逐轨挂载

player.addSubtitle('https://example.com/zh.srt', '2', '中文');  // url, 轨位, 标题

适合交互式场景：观众在界面里自选语言包，再动态挂到副轨。

方式三：观众自己拖字幕文件

观众点控制条字幕按钮 →「添加字幕文件」，或直接把本地 SRT 拖到播放器上——字幕进的是副轨，不动你预挂的内容。对「自带熟肉」的观众群体，这个入口用得很多。

格式支持清单

格式 说明
SRT 最通用的字幕格式，几乎所有工具都认
VTT Web 标准（WebVTT），HLS 原生字幕格式
BCC B 站字幕 JSON 格式，搬运/存档场景常见
JSON ZWPlayer 自有结构，可携带更多排版信息
流内字幕 HLS/DASH 内嵌字幕轨经预下载后与外挂轨同权混用（见《HLS/DASH 内嵌字幕预下载》）

编码提醒：字幕文件请统一存成 UTF-8。GBK 编码的 SRT 会显示乱码——这不是播放器兼容性问题，是文件本身需要转存。

观众端操作：字幕菜单

控制条字幕按钮打开菜单：显示/隐藏字幕、双语字幕开关、每条轨的主/副选择、添加字幕文件、字幕搜索、字幕设置。

字幕菜单 图 2:字幕菜单——每条字幕轨可分别指派为主轨或副轨

流媒体的内嵌字幕轨同样出现在这里（按语言逐条列出），与外挂轨并排选择：

HLS 字幕菜单 图 3:HLS 流内五条语言字幕轨与菜单功能同列

样式微调

字幕设置面板提供字号、颜色、描边、背景、位置（上/下）等调节，主副轨分别生效——典型用法：原文小一号置顶，译文正常字号置底。所有设置即时预览。

字幕样式设置 图 4:字幕样式设置面板——字号、颜色、描边、背景、位置,双语各调各的

常见问题

双语字幕两行重叠？ 检查两条轨是否都设了「下」位置且行高不足，把其中一条调到「上」位置或减小字号。

挂了字幕不显示？ 依次检查：字幕 URL 是否可访问（控制台网络面板）、文件编码是否 UTF-8、时间轴是否与视频时长相符（差几个量级多半是挂错了视频版本）。

流内字幕能和外挂字幕组双语吗？ 可以。预下载抓回的流内字幕与外挂轨同权，主轨选流内原文、副轨选外挂译文即可。

字幕时间差半秒怎么调？ 播放器内置字幕微调（快捷键逐 0.1s 平移，支持整体偏移写回），不必回炉重做字幕文件。

相关文章