开发者社区> 隽阜> 正文
阿里云
为了无法计算的价值
打开APP
阿里云APP内打开

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

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
介绍一下阿里云的企业财务管理功能
阿里云多账号的财务管理。
149 0
Java中的引用类型(强引用、软引用、弱引用、虚引用)介绍,示例WeakHashMap的使用【享学Java】(中)
Java中的引用类型(强引用、软引用、弱引用、虚引用)介绍,示例WeakHashMap的使用【享学Java】(中)
21 0
Java中的引用类型(强引用、软引用、弱引用、虚引用)介绍,示例WeakHashMap的使用【享学Java】(下)
Java中的引用类型(强引用、软引用、弱引用、虚引用)介绍,示例WeakHashMap的使用【享学Java】(下)
26 0
云上创新,共启未来!阿里云创新中心启动“云创未来”行动,同步发布“云创俱乐部”
希望与各方一起“云上创新 共启未来”,携手翻开数字经济发展的新篇章,共建创新生态、共享创新价值。
262 0
阿里云物联网平台高级功能之固件升级
OTA(Over-the-Air Technology)即空中下载技术。阿里云物联网平台支持通过OTA方式进行设备固件升级。本文以MQTT协议下的固件升级为例,介绍OTA固件升级流程、数据流转使用的Topic和数据格式。本文使用MQTT.fx客户端模拟设备,进行固件升级流程的操作演示。
1756 0
阿里云物联网平台高级功能之远程配置
使用远程配置功能,可在不用重启设备或中断设备运行情况下,在线远程更新设备的系统参数、网络参数等配置信息。本文使用MQTT.fx客户端模拟设备,进行远程配置两种场景的演示。
714 0
企业数据库上云新选择!阿里云发布云数据库SQL Server 2019版本
云数据库SQL Server 2019标准版正式在阿里云上线,带来了更多新的体验。SQL Server 2019版本提供了大数据群集新特性,更高引擎性能及安全、可用性等数据库能力的增强。
857 0
阿里云创峰会聊城站高峰对话二:工农业互联网探索中的产业智能化
8月23日,在阿里云创峰会聊城站第二场高峰论坛环节,各位嘉宾围绕"工农业互联网探索"这一话题,分享了人工智能在工农业不同场景中的应用,以及新一轮产业升级浪潮下相应领域迎来的机会和变化。
953 0
阿里云Aliplayer高级功能介绍(一):视频截图
H5 Video是不提供截图的API的, 视频截图需要借助Canvas,通过Canvas提供的drawImage方法,把Video的当前画面渲染到画布上, 最终通过toDataURL方法可以导出图片的base64编码,基本就完成了图片截图的功能。
3563 0
+关注
39
文章
1
问答
来源圈子
更多
+ 订阅
相关文档: 安全加速 SCDN PCDN CDN
文章排行榜
最热
最新
相关电子书
更多
低代码开发师(初级)实战教程
立即下载
阿里巴巴DevOps 最佳实践手册
立即下载
冬季实战营第三期:MySQL数据库进阶实战
立即下载