视频截雪碧图(CSS Sprite或CSS Sprites)的场景主要应用于网站性能优化和前端开发中。雪碧图通常是指将多个小图标或图像拼接在一起形成一张大图,通过CSS背景定位技术实现单次HTTP请求加载多个图片资源,从而减少网页加载时间和提升用户体验。您可以通过视频截雪碧图功能,提取视频帧并按一定规则拼接为雪碧图。本文介绍视频截雪碧图功能参数及示例。
注意事项
视频截雪碧图仅支持异步处理(x-oss-async-process处理方式)。
视频截雪碧图可能由于视频时间戳或码流的损坏而失败或数量不正确。
使用视频截雪碧图前,需要先绑定IMM Project。关于控制台和API如何绑定,请参见快速入门和AttachOSSBucket。
不支持匿名访问。
必须拥有IMM处理所需的相关权限。更多信息,请参见权限。
参数说明
操作名称:video/sprite
具体参数如下表所示。
参数 | 类型 | 是否必须 | 描述 |
ss | int | 否 | 视频截雪碧图的起始时间,单位为毫秒。取值:
|
f | string | 是 | 雪碧图输出格式,取值:
说明 jpg最大支持的分辨率为65535px x 65535px,当拼接后的图片分辨率大于此值时请使用png。 |
num | int | 否 | 雪碧图子图的抽帧数量,默认为不限制数量(抽帧到视频结束)。 重要 当视频长度不足时,实际抽帧数量会小于设定的参数值。 |
inter | int | 否 | 雪碧图子图的抽帧间隔,单位为毫秒,默认抽取所有视频帧。 说明 当该参数小于源视频帧间隔(帧率倒数)时,会按源视频帧间隔进行抽帧。 |
sw | int | 否 | 雪碧图子图的宽度,单位为px,取值范围为[32,4096],默认与源视频宽度相同。 |
sh | int | 否 | 雪碧图子图的高度,单位为px,取值范围为[32,4096],默认与源视频高度相同。 |
psw | int | 否 | 雪碧图子图宽度与原始视频宽度的百分比,取值范围为(0,200],默认值为100。 说明 当sw与psw同时设置时,psw无效。 |
psh | int | 否 | 雪碧图子图高度与原始视频高度的百分比,取值范围为(0,200],默认值为100。 说明 当sh与psh同时设置时,psh无效。 |
scaletype | string | 否 | 缩放方式。取值:
|
tw | int | 否 | 雪碧图每行包含的子图数量,默认值为6,取值范围为[1, 100]。 |
th | int | 否 | 雪碧图每列包含的子图数量,默认值为6,取值范围为[1, 100]。 |
pad | int | 否 | 雪碧图子图间的间隔,单位px,默认值为2,取值范围为[0, 100]。 |
margin | int | 否 | 雪碧图边缘间隔,单位px,默认值为2,取值范围为[0, 100]。 |
使用REST API
以每10秒截1帧的形式对视频进行截雪碧图
截帧信息
截雪碧图前
视频名称:example.mkv
处理方式
截帧完成消息通知:发送MNS消息
截雪碧图后
雪碧图信息
雪碧图格式:jpg
抽帧间隔:10s
子图分辨率:100x100
雪碧图配置:每行10张,每列10张,pad、margin均为0
文件存储路径
jpg文件:oss://outbucket/outobjprefix-%d.jpg
处理示例
// 对文件example.mkv进行视频截雪碧图。
POST /exmaple.mkv?x-oss-async-process HTTP/1.1
Host: video-demo.oss-cn-hangzhou.aliyuncs.com
Date: Fri, 28 Oct 2022 06:40:10 GMT
Authorization: OSS qn6q**************:77Dv****************
x-oss-async-process=video/sprite,f_jpg,sw_100,sh_100,inter_10000,tw_10,th_10,pad_0,margin_0|sys/saveas,b_b3V0YnVja2V0,o_b3V0b2JqcHJlZml4LXtpbmRleH0ue2F1dG9leHR9Cg/notify,topic_QXVkaW9Db252ZXJ0
从视频的第3秒连续抽帧100帧生成单张雪碧图
截帧信息
截雪碧图前
视频名称:example.mkv
处理方式
截帧完成消息通知:发送MNS消息
截雪碧图后
雪碧图信息
雪碧图格式:png
抽帧间隔:0s
子图分辨率:宽高都为源视频的1/20
雪碧图配置:每行10张,每列10张
文件存储路径
png文件:oss://outbucket/outobjprefix.png
处理示例
// 对文件example.mkv进行视频截雪碧图。
POST /exmaple.mkv?x-oss-async-process HTTP/1.1
Host: video-demo.oss-cn-hangzhou.aliyuncs.com
Date: Fri, 28 Oct 2022 06:40:10 GMT
Authorization: OSS qn6q**************:77Dv****************
x-oss-async-process=video/sprite,ss_3000,f_png,psw_5,psh_5,num_100,tw_20,th_5|sys/saveas,b_b3V0YnVja2V0,o_b3V0b2JqcHJlZml4LnthdXRvZXh0fQo/notify,topic_QXVkaW9Db252ZXJ0
使用SDK
视频截雪碧图仅支持异步处理,SDK使用方法请参见使用SDK。