阿里云 Aliplayer高级功能介绍(三)：多字幕

基本介绍

国际化场景下面，播放器支持多字幕，能够有效解决视频的传播障碍难题，该功能适用于视频内容在全球范围内推广，阿里云的媒体处理服务提供接口能够生成多字幕，如今先看一下具体的效果：

WebVTT格式介绍

多字幕如今支持HLS的格式，后期会去实现Dash格式的支持。

字幕文件

字幕的内容使用WebVTT的格式，更多的关于WebVTT能够参考WebVTT 格式以下：

WEBVTT

00:00:09.960 --> 00:00:12.600
Argentina was among the
founding members of

00:00:12.640 --> 00:00:14.440
the International Olympic
Committee,

00:00:14.480 --> 00:00:16.640
and sent a team to Paris
in 1900,

• 第一行必需是WEBVTT，代表这是个WebVTT文件文件。
• 接着是一空行，后面就是每一项的一个cue，包含时间范围和要显示的字幕，时间格式是HH:MM:SS.sss，时:分:秒.毫秒， 开始时间 --> 结束时间，-->的两边各有一个空格，这两个时间必需写在同一行，而且时间都是相对于视频开始的时间间隔。
• 时间以后是字幕文本，时间和字幕文本之间不能有空行，字幕文本能够是一行或多行，字幕文本中不能有空行。

字幕样式

字幕除了自己字幕里面能够定义字幕的显示样式， 若是每一个字幕的样式都是同样的， 那能够经过H5 Video的CSS样式统必定义，浏览器提供了::cue伪元素， 经过匹配::cue伪元素设置字幕的样式。

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

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

更多的样式属性能够参考:: cue CSS伪元素

H5 Video如何显示字幕

H5 Video采用track组件显示字幕， 主要包含下面属性：

名称	说明
default	定义了该track应该启用
kind	定义了 text track 应该如何使用，可选值包含subtitles、captions、descriptions、chapters、metadata，默认为subtitles
label	显示标题，用户可读的
src	track的地址
srclang	track文本数据的语言，它必须是合法的 BCP 47 语言标签

H5 Video显示字幕的HTML代码，是很简单的：

<video controls autoplay src="video.mp4">
 <track default src="track.vtt" lable="中文">
</video>

Aliplayer实现字幕

Aliplayer和阿里云视频云的点播服务或媒体处理服务结合起来更方便的实现字幕，若是用户使用了阿里云服务，那么集成播放器后不用作什么事情，只要使用VideoId的播放方式播放视频，没有额外的事情要作。

HLS字幕文件的结构

经过媒体处理服务的Open API能够打包用户的字幕文件到HLS视频里面， 具体能够参考如何进行HLS的打包 HLS打完包之后的基本结构：

打完包之后字幕文件将作为HLS Master List里面的一部分，type的值为“SUBTITLES”， 具体看：

#EXTM3U
#EXT-X-VERSION:4
#EXT-X-MEDIA:TYPE=SUBTITLES,NAME="ENGLISH",LANGUAGE="eng",URI="english.m3u8"
#EXT-X-MEDIA:TYPE=SUBTITLES,NAME="日本語",LANGUAGE="jpn",URI="jpn.m3u8"
#EXT-X-MEDIA:TYPE=SUBTITLES,NAME="中文",LANGUAGE="zho",URI="zho.m3u8"

上面的每一种语言的字幕的URI对应的是一个m3u8文件，这个m3u8文件包含的内容是WebVTT的list，好比english.m3u8包含的内容：

#EXTM3U
#EXT-X-VERSION:4
#EXT-X-TARGETDURATION:300
#EXT-X-MEDIA-SEQUENCE:1
#EXT-X-PLAYLIST-TYPE:VOD
#EXTINF:300.000,
00001.vtt
#EXTINF:37.840,
00002.vtt
#EXT-X-ENDLIST

是否是和咱们的HLS的切片列表很像的，基本同样， EXTINF下面的vtt地址对应的vtt文件里包含的是具体的字幕内容， 好比00001.vtt包含的内容：

WEBVTT  

00:00:09.960 --> 00:00:12.600
Argentina was among the
founding members of

00:00:12.640 --> 00:00:14.440
the International Olympic
Committee,

00:00:14.480 --> 00:00:16.640
and sent a team to Paris
in 1900,

Aliplayer建立Track

以前说H5 Video有Track组件能够用于播放字幕， 所以在从HLS里解析出WebVTT列表之后，经过addTextTrack方法添加到音频元素的文本轨道列表中， 添加完之后，能够经过音频元素的textTracks属性，获得所有的文本轨道。

video.addTextTrack(kind,label,language);
let tracks = video.textTracks;//获取所有的轨迹

你们可能也发现了，这里添加的TextTrack并无属性能够指定WebVTT的地址，不像HTML的Track组件，地址直接赋值给src属性就OK了， 所以咱们还须要解析WebVTT的内容，而后转为cue对象，添加到当前的语言的TextTrack里面。

const textTrackCue = new TextTrackCue(cue.startTime, cue.endTime, cue.text);
  textTrackCue.id = cue.id;
  currentTrack.addCue(textTrackCue);

如今咱们把轨道和字幕内容到添加到媒体组件了， Aliplayer在播放视频的时候会获取TextTracks里的值创建可视化的UI， 好比：

Aliplayer的字幕服务

Aliplayer除了提供默认UI操做外， 还提供了CCService知足用户的一些自定义需求，好比须要根据浏览器的语言默认播放那个语言等等，经过player._ccService属性访问字幕服务，字幕服务提供了以下的API：

名称	参数	说明
switch	language	切换字幕
open		关闭字幕
close		关闭字幕
getCurrentSubtitle		获取当前字幕的language的值

多音轨

除了支持多字幕，Aliplayer也支持多音轨，下面是效果：

使用Aliplayer

使用Aliplayer播放字幕，能够直接经过source属性指定hls文件地址播放，也能够经过vid+playauth的方式播放点播服务的视频：

var player = new Aliplayer({
    id: "player-con",
    source: "https://vod.olympicchannel.com/NBCR_Production_-_OCS/231/1016/GEPH-ONTHERECS02E012C-_E17101101_master.m3u8",
    width: "100%",
    height: "500px",
    autoplay: true,
    isLive: false
  }, function (player) {
    console.log("播放器建立成功");
  });