视频截雪碧图(CSS Sprite或CSS Sprites)的场景主要应用于网站性能优化和前端开发中。雪碧图通常是指将多个小图标或图像拼接在一起形成一张大图,通过CSS背景定位技术实现单次HTTP请求加载多个图片资源,从而减少网页加载时间和提升用户体验。您可以通过视频截雪碧图功能,提取视频帧并按一定规则拼接为雪碧图。本文介绍视频截雪碧图功能参数及示例。
视频截雪碧图仅支持异步处理(x-oss-async-process处理方式)。
视频截雪碧图可能由于视频时间戳或码流的损坏而失败或数量不正确。
使用视频截雪碧图前,需要先绑定IMM Project。关于控制台和API如何绑定,请参见 快速入门 和 AttachOSSBucket 。
不支持匿名访问。
必须拥有IMM处理所需的相关权限。更多信息,请参见 权限 。
操作名称: video/sprite
video/sprite
具体参数如下表所示。
参数
类型
是否必须
描述
ss
int
否
视频截雪碧图的起始时间,单位为毫秒。取值:
0(默认值):从起始位置开始。
大于0:从第 ss 毫秒开始。
f
string
是
雪碧图输出格式,取值:
jpg
png
jpg最大支持的分辨率为65535px x 65535px,当拼接后的图片分辨率大于此值时请使用png。
num
雪碧图子图的抽帧数量,默认为不限制数量(抽帧到视频结束)。
当视频长度不足时,实际抽帧数量会小于设定的参数值。
inter
雪碧图子图的抽帧间隔,单位为毫秒,默认抽取所有视频帧。
当该参数小于源视频帧间隔(帧率倒数)时,会按源视频帧间隔进行抽帧。
sw
雪碧图子图的宽度,单位为px,取值范围为[32,4096],默认与源视频宽度相同。
sh
雪碧图子图的高度,单位为px,取值范围为[32,4096],默认与源视频高度相同。
psw
雪碧图子图宽度与原始视频宽度的百分比,取值范围为(0,200],默认值为100。
当 sw 与 psw 同时设置时, psw 无效。
psh
雪碧图子图高度与原始视频高度的百分比,取值范围为(0,200],默认值为100。
当 sh 与 psh 同时设置时, psh 无效。
scaletype
缩放方式。取值:
crop:缩放并裁剪。
stretch(默认值):拉伸以填满。
fill:缩放并保留黑边。
fit:缩放并不保留黑边,等比缩放。
tw
雪碧图每行包含的子图数量,默认值为6,取值范围为[1, 100]。
th
雪碧图每列包含的子图数量,默认值为6,取值范围为[1, 100]。
pad
雪碧图子图间的间隔,单位px,默认值为2,取值范围为[0, 100]。
margin
雪碧图边缘间隔,单位px,默认值为2,取值范围为[0, 100]。
视频截雪碧图时也会用到 sys/saveas 和 notify 参数。更多信息,请参见 另存为 和 消息通知 。
sys/saveas
notify
截雪碧图前
视频名称: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 qn6qrrqxo2oawuk53otf****:UNQDb7GapEgJkcde6OhZ9J**** 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
雪碧图格式: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 qn6qrrqxo2oawuk53otf****:UNQDb7GapEgJkcde6OhZ9J**** 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 。