基本介紹
國際化場景下面，播放器支援多字幕，可以有效解決視訊的傳播障礙難題，該功能适用于視訊内容在全球範圍内推廣，阿裡雲的媒體處理服務提供接口可以生成多字幕，現在先看一下具體的效果：
https://www.atatech.org/articles/128457#1 WebVTT格式介紹
多字幕現在支援HLS的格式，後期會去實作Dash格式的支援。
https://www.atatech.org/articles/128457#2 字幕檔案
字幕的内容使用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，時:分:秒.毫秒， 開始時間 --> 結束時間，-->的兩邊各有一個空格，這兩個時間必需寫在同一行，并且時間都是相對于視訊開始的時間間隔。
- 時間之後是字幕文本，時間和字幕文本之間不能有空行，字幕文本可以是一行或多行，字幕文本中不能有空行。
https://www.atatech.org/articles/128457#3 字幕樣式
字幕除了本身字幕裡面可以定義字幕的顯示樣式， 如果每個字幕的樣式都是一樣的， 那可以通過H5 Video的CSS樣式統一定義，浏覽器提供了::cue僞元素， 通過比對::cue僞元素設定字幕的樣式。
video::cue {
background-image: linear-gradient(to bottom, dimgray, lightgray);
color: papayawhip;
}
video::cue(b) {
color: peachpuff;
}
更多的樣式屬性可以參考
:: cue CSS僞元素https://www.atatech.org/articles/128457#4 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>
https://www.atatech.org/articles/128457#5 Aliplayer實作字幕
Aliplayer和阿裡雲視訊雲的點播服務或媒體處理服務結合起來更友善的實作字幕，如果使用者使用了阿裡雲服務，那麼內建播放器後不用做什麼事情，隻要使用VideoId的播放方式播放視訊，沒有額外的事情要做。
https://www.atatech.org/articles/128457#6 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,
https://www.atatech.org/articles/128457#7 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， 比如：
https://www.atatech.org/articles/128457#8 Aliplayer的字幕服務
Aliplayer除了提供預設UI操作外， 還提供了CCService滿足使用者的一些自定義需求，比如需要根據浏覽器的語言預設播放那個語言等等，通過player._ccService屬性通路字幕服務，字幕服務提供了如下的API：
| 參數 | ||
|---|---|---|
| switch | language | 切換字幕 |
| open | 關閉字幕 | |
| close | ||
| getCurrentSubtitle | 擷取目前字幕的language的值 |
https://www.atatech.org/articles/128457#9 多音軌
除了支援多字幕，Aliplayer也支援多音軌，下面是效果：
https://www.atatech.org/articles/128457#10 使用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("播放器建立成功");
});