基本介紹
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'
});