阿里云 Aliplayer高级功能介绍(二)：缩略图

2021-10-26 00:02:38

基本介绍

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'

   });

码农公寓