文档

视频截雪碧图

更新时间:

视频截雪碧图(CSS Sprite或CSS Sprites)的场景主要应用于网站性能优化和前端开发中。雪碧图通常是指将多个小图标或图像拼接在一起形成一张大图,通过CSS背景定位技术实现单次HTTP请求加载多个图片资源,从而减少网页加载时间和提升用户体验。您可以通过视频截雪碧图功能,提取视频帧并按一定规则拼接为雪碧图。本文介绍视频截雪碧图功能参数及示例。

注意事项

  • 视频截雪碧图仅支持异步处理(x-oss-async-process处理方式)。

  • 视频截雪碧图可能由于视频时间戳或码流的损坏而失败或数量不正确。

  • 使用视频截雪碧图前,需要先绑定IMM Project。关于控制台和API如何绑定,请参见快速入门AttachOSSBucket

  • 不支持匿名访问。

  • 必须拥有IMM处理所需的相关权限。更多信息,请参见权限

参数说明

操作名称:video/sprite

具体参数如下表所示。

参数

类型

是否必须

描述

ss

int

视频截雪碧图的起始时间,单位为毫秒。取值:

  • 0(默认值):从起始位置开始。

  • 大于0:从第ss毫秒开始。

f

string

雪碧图输出格式,取值:

  • jpg

  • png

说明

jpg最大支持的分辨率为65535px x 65535px,当拼接后的图片分辨率大于此值时请使用png。

num

int

雪碧图子图的抽帧数量,默认为不限制数量(抽帧到视频结束)。

重要

当视频长度不足时,实际抽帧数量会小于设定的参数值。

inter

int

雪碧图子图的抽帧间隔,单位为毫秒,默认抽取所有视频帧。

说明

当该参数小于源视频帧间隔(帧率倒数)时,会按源视频帧间隔进行抽帧。

sw

int

雪碧图子图的宽度,单位为px,取值范围为[32,4096],默认与源视频宽度相同。

sh

int

雪碧图子图的高度,单位为px,取值范围为[32,4096],默认与源视频高度相同。

psw

int

雪碧图子图宽度与原始视频宽度的百分比,取值范围为(0,200],默认值为100。

说明

swpsw同时设置时,psw无效。

psh

int

雪碧图子图高度与原始视频高度的百分比,取值范围为(0,200],默认值为100。

说明

shpsh同时设置时,psh无效。

scaletype

string

缩放方式。取值:

  • crop:缩放并裁剪。

  • stretch(默认值):拉伸以填满。

  • fill:缩放并保留黑边。

  • fit:缩放并不保留黑边,等比缩放。

tw

int

雪碧图每行包含的子图数量,默认值为6,取值范围为[1, 100]。

th

int

雪碧图每列包含的子图数量,默认值为6,取值范围为[1, 100]。

pad

int

雪碧图子图间的间隔,单位px,默认值为2,取值范围为[0, 100]。

margin

int

雪碧图边缘间隔,单位px,默认值为2,取值范围为[0, 100]。

说明

视频截雪碧图时也会用到sys/saveasnotify参数。更多信息,请参见另存为消息通知

使用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