likes
comments
collection
share

初探 HTML video 视频字幕

作者站长头像
站长
· 阅读数 34

什么是外挂字幕？

我们在观看 电视、电影 时能够看到在播放区域下方，会展示与视频中人物说话所对应的字幕。字幕给观影者看不懂的内容提供了翻译。比如英文电影里能够展示中文字幕。

早期很多视频都是采用「内嵌字幕」：视频文件和字幕文件集成在一起。而「外挂字幕」则是视频文件与字幕文件分离，在播放时倒入字幕文件进行展示。

外挂字幕的好处是同一个视频，能够支持导入和呈现多种国家的语言，并支持随时切换字幕。

HTML Video 标签使用外挂字幕

在前端，我们使用 HTML <Video /> 标签实现视频播放，若要使用外挂字幕，只需借助 <track> 标签来为视频指定字幕。

HTML <track> 元素会被当作媒体元素 <audio> 和 <video> 的子元素来使用，它允许指定时序文本字幕文件（或者基于时间的数据），并在合适的时间自动展示字幕。

它对字幕格式文件有要求：需要是 WebVTT 格式（.vtt 后缀文件）。

如下是一个 视频播放展示字幕 的简单示例：

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

注意：上述示例代码需要运行在一个服务器上，或者使用 VSCode 通过启动本地服务打开。如果是以 file://Users... 形式打开，你将会看到类似错误：'file:' URLs are treated as unique security origins.。

其中，<source> src 用于指定视频源，<track> src 用于指定外挂字幕文件，.vtt 字幕文件内容参考如下：

WEBVTT

00:00:00.000 --> 00:00:05.000
This is the first subtitle.

00:00:05.000 --> 00:00:10.000
This is the second subtitle.

它会在视频播放 0 - 5s 内展示第一段字幕，5 - 10s 展示第二段字幕，效果图如下：

初探 HTML video 视频字幕

<track> 标签呈现字幕文件除了 src 属性外，还有几个重要的属性：

  1. kind 属性，定义了文字以哪种形式展示，默认是以 subtitles 字幕形式使用，允许的其他关键字有：captions、descriptions、chapters、metadata。
  2. default 属性，定义了默认要启用哪一个字幕文件；一般一个视频会提供多种语言的字幕文件。
  3. label 属性，字幕文件呈现给用户可读的标题；
  4. srclang 属性，字幕文件所属语种。

了解 Web 视频文本轨道（WebVTT）

在上面，我们为 <track> src 指向的字幕资源格式为 .vtt 字幕文件。

.vtt 格式文件属于 Web Video Text Tracks Format（WebVTT），是一种基于文本 UTF-8 编码的格式，为 Web 媒体元素提供字幕数据文件。WebVTT 的 MIME 格式是 text/vtt。

1、如何编写 WebVTT 格式内容

一个 WebVTT 文件（.vtt）以 WEBVTT 作为开头，包含一个或者多个的 时间提示性内容（cue），如下所示：

WEBVTT

00:01.000 --> 00:04.000
Never drink liquid <b>nitrogen</b>.

00:05.000 --> 00:09.000
- It will perforate your stomach.
- You could die.

每个 cue 的作用如下：

  1. 第一行决定字幕以时间开始展示 --> 到什么时间结束展示；
  2. 可以有一个或多个行，每个行都是展示的字幕的一部分。

2、如何为 WebVTT 中的字幕添加样式

CSS 提供了查找与 ::cue 伪元素 匹配的元素来为 WebVTT 添加样式。如下：

video::cue {
  background-image: linear-gradient(to bottom, dimgray, lightgray);
  color: papayawhip;
}

video::cue(b) {
  color: peachpuff;
}

在这里，所有字幕风格都使用一个灰色的线性渐变作为它们的背景，字体颜色为 "papayawhip"。此外，使用 <b> 元素加粗的字幕使用 "peachpuff" 颜色。

允许为 WebVTT 字幕设置的 CSS 样式属性参考：

color
opacity
visibility
text-decoration及相关属性
text-shadow
background及相关属性
outline及相关属性
font及相关属性，包括line-height
white-space
text-combine-upright
ruby-position

另外，在 WebVTT 文件中，每个 cue 同时支持设置在视频中的具体位置，如将第一个字幕居中展示在顶部，第二个字幕居中展示在底部，示例如下：

WEBVTT

00:01.000 --> 00:04.000 line:0% position:50% align:center
Never drink liquid <b>nitrogen</b>.

00:05.000 --> 00:09.000 line:100% position:50% align:center
- It will perforate your stomach.
- You could die.

此外，cue 内容同样支持一些文本标签一起使用，具体介绍可查看 WebVTT

自定义 Video 播放器字幕

当在 <video> 标签中加入 <track> 字幕标签后，video 原生 controls 功能栏中会展示 字幕 入口。

然而，视频播放器通常会根据业务需求及 UI 样式采用自定义方式实现，下面我们来看看自定义播放器中如何集成 字幕 功能并实现多字幕切换。

字幕切换列表的配置我们这样设计：由外部传入 <track> 标签所需的信息，如下，

config = {
  ...,
  nativeTextTrack: [
    {
      src: "./vtt/textTrack-1.vtt",
      kind: "subtitles",
      label: "中文字幕",
      srclang: "zh",
      default: true,
    },
    {
      src: "./vtt/textTrack-2.vtt",
      kind: "subtitles",
      label: "英文字幕",
      srclang: "en",
      default: false,
    },
  ],
}

// textTrack 类型接口参考
export interface TextTrack {
  src: string;
  kind: string;
  label: string;
  srclang: string;
  default: boolean;
}

这里我们定义了视频的两种不同语种字幕，下面基于这个字幕配置信息，为 <video> 标签创建 <track> 字幕元素，这个逻辑一般在初始化播放器时来实现。

const { nativeTextTrack } = config; // 外部传入的配置

// 字幕
let textTrackDom = '';
if (Array.isArray(nativeTextTrack) && nativeTextTrack.length > 0) {
  // 应用默认字幕
  if (!nativeTextTrack.some(track => track.default)) {
    nativeTextTrack[0].default = true;
  }
  // 创建 <track> 字幕标签
  nativeTextTrack.forEach(track => {
    if (track.src && track.label && track.srclang) {
      textTrackDom += `<track src="${track.src}" kind="${track.kind || 'subtitles'}" label="${track.label}" srclang="${track.srclang}" ${track.default ? 'default' : ''}>`;
    }
  });
}

// 播放器 video 元素实例，添加 <track> 为子元素
video.appendChild(textTrackDom);

添加后看到的 video 元素内部结构如下：

初探 HTML video 视频字幕

接下来，我们需要在 Controls 区域增加字幕切换入口，并且渲染出切换字幕的选项列表，列表中默认包含一个可供 Off 关闭字幕 的选项。

const { state, config, controls, root, video } = player;

const textTrackArea = createDOM(
  'div',
  `
    <div class="dsplayer-texttrack-name">字幕</div> // 字幕在 Controls 中展示的信息
    <ul class="dsplayer-subtitles-menu"> // 字幕选项列表
      <li class="dsplayer-subtitles-menu__item" lang="off">Off</li>
    </ul>
  `,
  {},
  'dsplayer-control-texttrack',
);
controls.appendChild(textTrackArea); // 添加到 Controls 区域

const textTrackMenu = textTrackArea.querySelector('.dsplayer-subtitles-menu') as HTMLElement;
// 根据 nativeTextTrack 创建选项列表
config.nativeTextTrack.forEach(track => {
  textTrackMenu.appendChild(createDOM('li', track.label, { lang: track.srclang }, 'dsplayer-subtitles-menu__item'));
});

要实现切换字幕（切换为另一种语种字幕），可通过设定 video.track 元素的 mode 属性来控制。mode = showing 代表当前要使用的字幕，mode = hidden 则是将当前字幕隐藏。参考示例代码如下：

// 事件委托
textTrackMenu.addEventListener('click', event => {
  const ele = event.target as HTMLElement;
  if (ele.nodeName === 'LI') {
    const lang = ele.getAttribute('lang');
    for (let i = 0; i < player.video.textTracks.length; i ++) {
      const track = player.video.textTracks[i];
      if (track.language === lang) {
        track.mode = 'showing'; // 应用字幕
      } else {
        track.mode = 'hidden'; // 隐藏字幕
      }
    }
  }
});

文末

有一些情况下提供的字幕文件是 .srt 格式，无法直接被 使用，通常都需要做一次 vtt 字幕格式转换。可以通过 在线工具 来完成。

参考

1. mdn web docs 2. mdn web docs WebVTT 3. 常见的字幕文件格式 4. 玩转HTML5 Video视频WebVTT字幕使用样式与制作 5. 向 HTML 视频中添加字幕 6. xgplayer 外挂字幕

转载自:https://juejin.cn/post/7258466145653407800
评论
请登录