阿里雲 Aliplayer高級功能介紹(二)：縮略圖

基本介紹

Aliplayer提供了縮略圖的功能，讓用戶在拖動進度條以前知道視頻的內容，用戶可以獲得很好的播放體驗，縮略圖是顯示在Controlbar的上面，而且包含當前的時間，阿里雲的媒體處理服務提供接口能夠生成縮略圖的功能， 先看一下基本的效果：

縮略圖的格式

WebVTT介紹

縮略圖採用了webvtt的文件格式去表示時間和顯示圖片的對應關係，WebVTT不只可讀性好，並且解析也比較容易，下面是一個27秒包含3個截圖的WebVTT文件內容：

WEBVTT

00:00.000 --> 00:09.174
vM7nH0Kl-120.jpg?xywh=0,0,120,53

00:09.174 --> 00:18.348
vM7nH0Kl-120.jpg?xywh=120,0,120,53

00:18.348 --> 00:27.523
vM7nH0Kl-120.jpg?xywh=240,0,120,53

WebVTT是UTF-8編碼格式的文本文件，主要以下：

• 第一行必需是WEBVTT，代表這是個WebVTT文件文件。
• 接着是一空行，後面就是時間範圍和要顯示的縮略圖，時間格式是HH:MM:SS.sss，時:分:秒.毫秒， 開始時間 --> 結束時間，-->的兩邊各有一個空格，這兩個時間必需寫在同一行，而且時間都是相對於視頻開始的時間間隔。
• 時間以後是縮略圖的地址，時間和縮略圖的地址之間不能有空行，縮略圖的描述主要包含圖片的地址，地址後面的xywh參數描述圖片的顯示位置和大小。

圖片地址說明

縮略圖能夠是多張圖片，也能夠是雪碧圖方式拼成的一張大圖，雪碧圖的優勢是能夠減小圖片的請求數和減小圖片顯示的延遲時間等。
圖片地址的基本格式：{imgUrl}?xywh=x,y,w,h, 參數說明：

名稱	說明
x	水平位置，左上角是0，雪碧圖時使用
y	垂直位置，左上角是0，雪碧圖時使用
w	圖片的顯示寬度
h	圖片的顯示高度

獨立圖片的地址格式

每一個地址都是不同的， 參數只須要指定圖片的顯示寬度和高度，好比：

WEBVTT

00:00.000 --> 00:09.174
vM7nH0Kl-120.jpg?wh=120,53

00:09.174 --> 00:18.348
vM7nH0Kl-121.jpg?wh=120,53

雪碧圖的地址格式

每一個地址都使用同一個圖片的地址，經過參數指定要顯示的圖片位置和大小，好比下面的雪碧圖：

下面的描述對應的是第一張和第二張圖的位置和大小

WEBVTT

00:00.000 --> 00:09.174
vM7nH0Kl-120.jpg?xywh=0,0,120,53

00:09.174 --> 00:18.348
vM7nH0Kl-120.jpg?xywh=120,0,120,53

Aliplayer的使用

Aliplayer能夠獨立的使用縮略圖的功能，用戶只須要指定WebVTT的地址，固然也能夠和阿里雲的媒體處理服務(MPS)結合使用，經過媒體處理服務生成縮略圖，當經過videoId方式播放時，播放器會自動獲取縮略圖的地址，解析，而後顯示。

如何生成縮略圖

生成縮略圖能夠調用阿里雲的媒體處理服務的截圖功能，生成縮略圖，僅支持HLS的視頻格式，具體的接口地址：如何設置截圖

VideoId方式播放

媒體處理服務生成縮略圖之後能夠經過VideoId的方式播放，播放器會自動從雲端獲取縮略圖地址、獲取內容、解析、顯示，代碼以下：

let player = new Aliplayer({
      id: 'J_prismPlayer',
      width: '100%',
      height: '100%',
      autoplay: true,
      vid : '1e067a2831b641db90d570b6480fbc40',
      accId: '',
      accSecret: '',
      stsToken: '',
      domainRegion: '',
      authInfo: '',
   });

媒體處理播放方式的詳細文檔參考：MPS播放說明

本身指定WebVTT地址

Aliplayer提供了thumbnailUrl屬性用於指定WebVTT的地址，這種方式對於視頻格式就沒有要求了， 當用戶因爲特殊緣由不能使用videoId的方式播放視頻時，能夠本身獲取WebVTT的縮略圖地址，經過thumbnailUrl屬性指定，代碼以下：

let player = new Aliplayer({
      id: 'J_prismPlayer',
      width: '100%',
      height: '100%',
      autoplay: true,
      soruce:'https://player.alicdn.com/resource/player/qupai.mp4',
      thumbnailUrl:'http://100.69.163.12/vM7nH0Kl-120.vtt'
   });