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

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

基本介绍

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

cfab58cc212636872f287758e39a2a77d1cddf38

缩略图的格式

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

雪碧图的地址格式

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

50ddbc7a4c4239251583c16b5c6949bd1a5428d5

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

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

目录
相关文章
|
5月前
技术经验分享:AVFoundation播放视频时显示字幕,切换音轨
技术经验分享:AVFoundation播放视频时显示字幕,切换音轨
42 0
|
12月前
|
开发工具
Queen智能美化特效SDK需要高级美颜、常见美型、美体这样是属于按版本买,还是按客户端计费?
Queen智能美化特效SDK需要高级美颜、常见美型、美体这样是属于按版本买,还是按客户端计费?
64 1
|
6月前
|
存储
uniapp录音功能和音频播放功能制作
uniapp录音功能和音频播放功能制作
392 0
阿里云 Aliplayer高级功能介绍
Aliplayer除了一些基本功能,还有一些高级的功能,可能需要云端配合才可以使用,或者播放器本身需要做更多的配置,希望写一些文件介绍如何使用和介绍一下简单的实现原来,让用户了解这些功能,更好的使用播放器,文章不仅介绍内置的功能,还会包含通过插件写的其他功能。
37938 0
|
缓存 JavaScript 前端开发
阿里云 Aliplayer高级功能介绍(六):进度条标记
基本介绍 Aliplayer在进度条上提示时间和缩略图功能外,还可以进行视频内容的提示打点,当然不止是进度条上显示打点的内容,还提供一组接口,方便用户进行打点时间和内容的获取, 基本UI如下图所示: 接口和属性介绍 播放器提供了progressMarkers属性,是一个数组类型,每一条记录包含o.
13529 0
|
数据安全/隐私保护
阿里云移动端播放器高级功能---视频下载
基本介绍 优酷、爱奇艺、腾讯等主流的视频类App都有视频离线下载的功能,主要目的是在wifi下将视频离线在本地,然后在无网或者4G的情况下去观看离线视频。那么阿里云播放器也提供了视频下载的功能。这个功能主要针对的是点播视频,也就是vid播放的视频的下载。
6222 0
|
Web App开发 UED iOS开发
阿里云 Aliplayer高级功能介绍(九):自动播放体验
经常会碰到客户询问,为什么我设置了autoplay为true,但是没有自动播放,每次都要向客户解释这个是浏览器从用户体验角度考虑做的限制,客户会继续询问那我要怎么做? 针对这个问题Aliplayer也专们做过优化,提供一些方式让客户能更好的处理这种情况。
9225 0
阿里云移动端播放器高级功能---UI播放器
用户想要实现一个视频播放除了要集成我们播放器SDK之外,还需要做一些UI交互的东西。要实现一个完整的视频播放还是需要做很多工作的。那么我们提供了一套完整的UI播放器,用户可以非常快速的集成进去来实现完整的播放器功能。
5754 0