基本介紹
Aliplayer提供了縮略圖的功能，讓使用者在拖動進度條之前知道視訊的内容，使用者能夠得到很好的播放體驗，縮略圖是顯示在Controlbar的上面，并且包含目前的時間，阿裡雲的媒體處理服務提供接口可以生成縮略圖的功能， 先看一下基本的效果：
https://www.atatech.org/articles/128456#1 縮略圖的格式
https://www.atatech.org/articles/128456#2 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參數描述圖檔的顯示位置和大小。
https://www.atatech.org/articles/128456#3 圖檔位址說明
縮略圖可以是多張圖檔，也可以是雪碧圖方式拼成的一張大圖，雪碧圖的優點是可以減少圖檔的請求數和減少圖檔顯示的延遲時間等。
圖檔位址的基本格式：{imgUrl}?xywh=x,y,w,h, 參數說明：
| 名稱 | 說明 |
|---|---|
| x | 水準位置，左上角是0，雪碧圖時使用 |
| y | 垂直位置，左上角是0，雪碧圖時使用 |
| w | 圖檔的顯示寬度 |
| h | 圖檔的顯示高度 |
https://www.atatech.org/articles/128456#4 獨立圖檔的位址格式
每個位址都是不一樣的， 參數隻需要指定圖檔的顯示寬度和高度，比如：
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
https://www.atatech.org/articles/128456#5 雪碧圖的位址格式
每個位址都使用同一個圖檔的位址，通過參數指定要顯示的圖檔位置和大小，比如下面的雪碧圖：
下面的描述對應的是第一張和第二張圖的位置和大小
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
https://www.atatech.org/articles/128456#6 Aliplayer的使用
Aliplayer可以獨立的使用縮略圖的功能，使用者隻需要指定WebVTT的位址，當然也可以和阿裡雲的媒體處理服務(MPS)結合使用，通過媒體處理服務生成縮略圖，當通過videoId方式播放時，播放器會自動擷取縮略圖的位址，解析，然後顯示。
https://www.atatech.org/articles/128456#7 如何生成縮略圖
生成縮略圖可以調用阿裡雲的媒體處理服務的截圖功能，生成縮略圖，僅支援HLS的視訊格式，具體的接口位址：
如何設定截圖https://www.atatech.org/articles/128456#8 VideoId方式播放
媒體處理服務生成縮略圖以後可以通過VideoId的方式播放，播放器會自動從雲端擷取縮略圖位址、擷取内容、解析、顯示，代碼如下：
let player = new Aliplayer({
id: 'J_prismPlayer',
width: '100%',
height: '100%',
autoplay: true,
vid : '1e067a2831b641db90d570b6480fbc40',
accId: '',
accSecret: '',
stsToken: '',
domainRegion: '',
authInfo: '',
});
媒體處理播放方式的詳細文檔參考：
MPS播放說明https://www.atatech.org/articles/128456#9 自己指定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'
});