阿里雲 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("播放器建立成功");
  });