阿里云 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'
   });