基本介绍

Aliplayer提供了缩略图的功能，让用户在拖动进度条之前知道视频的内容，用户能够得到很好的播放体验，缩略图是显示在Controlbar的上面，并且包含当前的时间，阿里云的媒体处理服务提供接口可以生成缩略图的功能，先看一下基本的效果：

缩略图的格式

WebVTT介绍

缩略图采用了webvtt的文件格式去表示时间和显示图片的对应关系，WebVTT不仅可读性好，而且解析也比较容易，下面是一个27秒包含3个截图的WebVTT文件内容：

WEBVTT00:00.000 --> 00:09.174
vM7nH0Kl-120.jpg?xywh=0,0,120,5300:09.174 --> 00:18.348
vM7nH0Kl-120.jpg?xywh=120,0,120,5300: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	图片的显示高度

独立图片的地址格式

每个地址都是不一样的，参数只需要指定图片的显示宽度和高度，比如：

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

雪碧图的地址格式

每个地址都使用同一个图片的地址，通过参数指定要显示的图片位置和大小，比如下面的雪碧图：

下面的描述对应的是第一张和第二张图的位置和大小

WEBVTT00:00.000 --> 00:09.174
vM7nH0Kl-120.jpg?xywh=0,0,120,5300: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'});

阿里云 Aliplayer高级功能介绍(二)：缩略图 1相关推荐

阿里云 Aliplayer高级功能介绍(二)：缩略图
为什么80%的码农都做不了架构师?>>> 基本介绍 Aliplayer提供了缩略图的功能,让用户在拖动进度条之前知道视频的内容,用户能够得到很好的播放体验,缩略图是显示在Con ...
阿里云 Aliplayer高级功能介绍(三)：多字幕
基本介绍国际化场景下面,播放器支持多字幕,可以有效解决视频的传播障碍难题,该功能适用于视频内容在全球范围内推广,阿里云的媒体处理服务提供接口可以生成多字幕,现在先看一下具体的效果: WebVTT格式 ...
阿里云 Aliplayer高级功能介绍(四)：直播时移
基本介绍时移直播基于常规的HLS视频直播,直播推流被切分成TS分片,通过HLS协议向播放用户分发,用户请求的m3u8播放文件中包含不断刷新的TS分片地址:对于常规的HLS直播而言,TS分片地址及相应 ...
阿里云 Aliplayer高级功能介绍(七)：多分辨率
基本介绍网络环境比较复杂.网速不稳定,Aliplayer提供了多分辨率播放的模式,用户可以手工切换分辨率和播放器选择最优分辨率,基本UI如下: 66ccc596257a5db1d0f106b5745 ...
阿里云Aliplayer高级功能介绍(一)：视频截图
基本介绍 H5 Video是不提供截图的API的, 视频截图需要借助Canvas,通过Canvas提供的drawImage方法,把Video的当前画面渲染到画布上, 最终通过toDataURL方法可以 ...
阿里云Aliplayer高级功能介绍(一)：视频截图 1
基本介绍 H5 Video是不提供截图的API的, 视频截图需要借助Canvas,通过Canvas提供的drawImage方法,把Video的当前画面渲染到画布上, 最终通过toDataURL方法可以 ...
阿里云 Aliplayer高级功能介绍(九)：自动播放体验
基本介绍经常会碰到客户询问,为什么我设置了autoplay为true,但是没有自动播放,每次都要向客户解释这个是浏览器从用户体验角度考虑做的限制,客户会继续询问那我要怎么做? 针对这个问题Alipl ...
阿里云 Aliplayer高级功能介绍(五)：多语言
基本介绍 Aliplayer默认支持中文和英文,并且依赖于浏览器的语言设置自动启用中文或英文资源, 除了支持这两种资源外,还提供自定义语言的形式,支持其他国际语言,另外Aliplayer还支持点播服务 ...
阿里云 Aliplayer高级功能介绍(九)：自动播放体验 1
基本介绍经常会碰到客户询问,为什么我设置了autoplay为true,但是没有自动播放,每次都要向客户解释这个是浏览器从用户体验角度考虑做的限制,客户会继续询问那我要怎么做? 针对这个问题Alipl ...

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