什么是视频截雪碧图_对象存储(OSS)-阿里云帮助中心

视频截雪碧图（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 说明最大支持的分辨率为16384px x 16384px。
m	string	否	雪碧图子图截帧模式，默认为inter，取值： inter：固定时间间隔模式，截帧间隔由 inter 参数决定，截帧数量由 num 参数决定。 key：关键帧模式，只截取源视频中的 IDR 帧，截帧数量由 num 参数决定，此时 inter 参数无效。 avg：平均模式，根据 num 参数按平均时间间隔截帧，此时 inter 参数无效。 dhash：dhash 模式，以固定时间间隔截帧并筛选视频时序内容变化超过阈值的最显著变化帧，截帧间隔由 inter 参数决定，截帧数量由 num 参数决定，阈值由 thr 参数决定。
thr	int	否	雪碧图子图 dhash 模式截帧阈值，阈值越大截帧数量越少，取值范围为[0,100]，默认值为 0。说明仅在使用 dhash 模式时有效。 dhash 模式对阈值较为敏感，推荐该参数设置不大于 25，并根据具体场景调整。
num	int	否	雪碧图子图截帧数量，默认为0，表示不限制截帧数量。默认值对于不同截帧模式的物理意义如下：固定时间间隔模式：截帧到视频结束。关键帧模式：截帧到视频结束。平均模式：不允许设置为0。 dhash 模式：截取所有视频帧内容变化超过 thr 参数的帧。重要受视频长度与截帧参数影响，实际截帧数量可能会小于设定的参数值。
inter	int	否	雪碧图子图截帧间隔，单位为毫秒，默认为0，表示截取所有视频帧。说明当该参数小于源视频帧间隔（帧率倒数）时，会按源视频帧间隔进行截帧。
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	否	缩放方式。取值： 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/saveas和notify参数。更多信息，请参见另存为和消息通知。

使用REST API

重要

在填写视频截雪碧图输出文件存储路径时，若未指定后缀名（例如“.jpg”），系统将自动添加序号（例如“_0_1.jpg”）。如果已指定后缀名，则系统仅会保留最后一张截图，因此不建议使用此方式。如需自定义序号，可以通过媒体处理相关变量进行设置。

以每2秒截1帧的形式对整段视频生成雪碧图

以每2秒截1帧的形式对整段视频生成雪碧图，每张雪碧图子图排布为3x3，子图分辨率为200x150。

雪碧图信息

源文件
- 视频名称：example.mkv
消息通知
- 消息通知MNS主题：example-mns-topic
输出配置
- 截帧信息
  - 雪碧图格式：jpg
  - 雪碧图子图截帧时间间隔：2s
  - 雪碧图子图排布格式：3x3
  - 雪碧图子图分辨率：200x150
  - 雪碧图子图缩放方式：缩放并裁剪
  - 雪碧图子图间隔：0
  - 雪碧图子图与雪碧图边缘间隔：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: OSS4-HMAC-SHA256 Credential=LTAI********************/20250417/cn-hangzhou/oss/aliyun_v4_request,Signature=a7c3554c729d71929e0b84489addee6b2e8d5cb48595adfc51868c299c0c218e
 
x-oss-async-process=video/sprite,f_jpg,sw_200,sh_150,inter_2000,tw_3,th_3,pad_0,margin_0|sys/saveas,b_b3V0YnVja2V0,o_b3V0b2JqcHJlZml4LXtpbmRleH0ue2F1dG9leHR9Cg/notify,topic_ZXhhbXBsZS1tbnMtdG9waWMK

根据数量均匀截帧对视频生成雪碧图

生成一张10行10列的雪碧图，子图内容均匀覆盖整段视频，简化前端代码逻辑。

雪碧图信息

源文件
- 视频名称：example.mkv
消息通知
- 消息通知MNS主题：example-mns-topic
输出配置
- 截帧信息
  - 雪碧图格式：jpg
  - 雪碧图子图截帧模式：avg
  - 雪碧图子图排布格式：10x10
  - 雪碧图子图分辨率：源视频1/10
  - 雪碧图子图缩放方式：等比缩放
  - 雪碧图子图间隔：4
  - 雪碧图子图与雪碧图边缘间隔：5
- 文件存储路径
  - 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: OSS4-HMAC-SHA256 Credential=LTAI********************/20250417/cn-hangzhou/oss/aliyun_v4_request,Signature=a7c3554c729d71929e0b84489addee6b2e8d5cb48595adfc51868c299c0c218e
 
x-oss-async-process=video/sprite,f_jpg,m_avg,psw_10,psh_10,scaletype_fit,tw_10,th_10,pad_4,margin_5|sys/saveas,b_b3V0YnVja2V0,o_b3V0b2JqcHJlZml4LXtpbmRleH0ue2F1dG9leHR9Cg/notify,topic_ZXhhbXBsZS1tbnMtdG9waWMK

使用SDK

仅支持使用Java、Python、Go SDK通过异步处理的方式完成视频截雪碧图，具体请参见安装SDK。

Java

要求使用3.17.4及以上版本的Java SDK。

import com.aliyun.oss.ClientBuilderConfiguration;
import com.aliyun.oss.OSS;
import com.aliyun.oss.OSSClientBuilder;
import com.aliyun.oss.common.auth.CredentialsProviderFactory;
import com.aliyun.oss.common.auth.EnvironmentVariableCredentialsProvider;
import com.aliyun.oss.common.comm.SignVersion;
import com.aliyun.oss.model.AsyncProcessObjectRequest;
import com.aliyun.oss.model.AsyncProcessObjectResult;
import com.aliyuncs.exceptions.ClientException;

import java.util.Base64;

public class Demo {
    public static void main(String[] args) throws ClientException {
        // yourEndpoint填写Bucket所在地域对应的Endpoint。
        String endpoint = "https://oss-cn-hangzhou.aliyuncs.com";
        // 填写Endpoint对应的Region信息，例如cn-hangzhou。
        String region = "cn-hangzhou";
        // 从环境变量中获取访问凭证。运行本代码示例之前，请确保已设置环境变量OSS_ACCESS_KEY_ID和OSS_ACCESS_KEY_SECRET。
        EnvironmentVariableCredentialsProvider credentialsProvider = CredentialsProviderFactory.newEnvironmentVariableCredentialsProvider();
        // 指定Bucket名称。
        String bucketName = "examplebucket";
        // 指定雪碧图的文件名称。
        String targetKey = "example.jpg";
        // 指定原视频文件名称。
        String sourceKey = "src.mp4";

        // 创建OSSClient实例。
        // 当OSSClient实例不再使用时，调用shutdown方法以释放资源。
        ClientBuilderConfiguration clientBuilderConfiguration = new ClientBuilderConfiguration();
        clientBuilderConfiguration.setSignatureVersion(SignVersion.V4);
        OSS ossClient = OSSClientBuilder.create()
                .endpoint(endpoint)
                .credentialsProvider(credentialsProvider)
                .clientConfiguration(clientBuilderConfiguration)
                .region(region)
                .build();

        try {
            // 构建视频转雪碧图参数。
            String style = String.format("video/sprite,f_jpg,sw_100,sh_100,inter_10000,tw_10,th_10,pad_0,margin_0");
            // 构建异步处理指令。
            String bucketEncoded = Base64.getUrlEncoder().withoutPadding().encodeToString(bucketName.getBytes());
            String targetEncoded = Base64.getUrlEncoder().withoutPadding().encodeToString(targetKey.getBytes());
            String process = String.format("%s|sys/saveas,b_%s,o_%s/notify,topic_QXVkaW9Db252ZXJ0", style, bucketEncoded, targetEncoded);
            // 创建AsyncProcessObjectRequest对象。
            AsyncProcessObjectRequest request = new AsyncProcessObjectRequest(bucketName, sourceKey, process);
            // 执行异步处理任务。
            AsyncProcessObjectResult response = ossClient.asyncProcessObject(request);
            System.out.println("EventId: " + response.getEventId());
            System.out.println("RequestId: " + response.getRequestId());
            System.out.println("TaskId: " + response.getTaskId());

        } finally {
            // 关闭OSSClient。
            ossClient.shutdown();
        }
    }
}

Python

要求使用Python SDK 2.18.4及以上版本。

# -*- coding: utf-8 -*-
import base64
import oss2
from oss2.credentials import EnvironmentVariableCredentialsProvider

def main():
    # 从环境变量中获取临时访问凭证。运行本代码示例之前，请确保已设置环境变量OSS_ACCESS_KEY_ID和OSS_ACCESS_KEY_SECRET。
    auth = oss2.ProviderAuthV4(EnvironmentVariableCredentialsProvider())
    # 填写Bucket所在地域对应的Endpoint。以华东1（杭州）为例，Endpoint填写为https://oss-cn-hangzhou.aliyuncs.com。
    endpoint = 'https://oss-cn-hangzhou.aliyuncs.com'
    # 填写Endpoint对应的Region信息，例如cn-hangzhou。
    region = 'cn-hangzhou'

    # 填写Bucket名称。
    bucket = oss2.Bucket(auth, endpoint, 'examplebucket', region=region)

    # 指定原视频文件名称。
    source_key = 'src.mp4'

    # 指定雪碧图文件名称。
    target_key = 'example.jpg'

    # 构建视频转雪碧图参数。
    animation_style = 'video/sprite,f_jpg,sw_100,sh_100,inter_10000,tw_10,th_10,pad_0,margin_0'

    # 构建处理指令，包括保存路径和Base64编码的Bucket名和目标文件名。
    bucket_name_encoded = base64.urlsafe_b64encode('examplebucket'.encode()).decode().rstrip('=')
    target_key_encoded = base64.urlsafe_b64encode(target_key.encode()).decode().rstrip('=')
    process = f"{animation_style}|sys/saveas,b_{bucket_name_encoded},o_{target_key_encoded}/notify,topic_QXVkaW9Db252ZXJ0"

    try:
        # 执行异步处理任务。
        result = bucket.async_process_object(source_key, process)
        print(f"EventId: {result.event_id}")
        print(f"RequestId: {result.request_id}")
        print(f"TaskId: {result.task_id}")
    except Exception as e:
        print(f"Error: {e}")


if __name__ == "__main__":
    main()

Go

要求使用Go SDK 3.0.2及以上版本。

package main

import (
    "encoding/base64"
    "fmt"
    "os"
    "github.com/aliyun/aliyun-oss-go-sdk/oss"
    "log"
)

func main() {
    // 从环境变量中获取临时访问凭证。运行本代码示例之前，请确保已设置环境变量OSS_ACCESS_KEY_ID和OSS_ACCESS_KEY_SECRET。
    provider, err := oss.NewEnvironmentVariableCredentialsProvider()
    if err != nil {
    fmt.Println("Error:", err)
    os.Exit(-1)
    }
    // 创建OSSClient实例。
    // yourEndpoint填写Bucket对应的Endpoint，以华东1（杭州）为例，填写为https://oss-cn-hangzhou.aliyuncs.com。其他Region请按实际情况填写。
    // yourRegion指定阿里云通用Region ID，例如cn-hangzhou。
    client, err := oss.New("https://oss-cn-hangzhou.aliyuncs.com", "", "", oss.SetCredentialsProvider(&provider), oss.AuthVersion(oss.AuthV4), oss.Region("cn-hangzhou"))
    if err != nil {
    fmt.Println("Error:", err)
    os.Exit(-1)
    }
    // 指定Bucket名称，例如examplebucket。
    bucketName := "examplebucket"

    bucket, err := client.Bucket(bucketName)
    if err != nil {
    fmt.Println("Error:", err)
    os.Exit(-1)
    }

    // 指定原视频文件名称。
    sourceKey := "src.mp4"
    // 指定输出的雪碧图文件名称。
    targetKey := "example.jpg"

    // 构建视频转雪碧图参数。
    animationStyle := "video/sprite,f_jpg,sw_100,sh_100,inter_10000,tw_10,th_10,pad_0,margin_0"

    // 构建处理指令，包括保存路径和Base64编码的Bucket名和目标文件名。
    bucketNameEncoded := base64.URLEncoding.EncodeToString([]byte(bucketName))
    targetKeyEncoded := base64.URLEncoding.EncodeToString([]byte(targetKey))
    process := fmt.Sprintf("%s|sys/saveas,b_%v,o_%v/notify,topic_QXVkaW9Db252ZXJ0", animationStyle, bucketNameEncoded, targetKeyEncoded)

    // 执行异步处理任务。
    result, err := bucket.AsyncProcessObject(sourceKey, process)
    if err != nil {
    log.Fatalf("Failed to async process object: %s", err)
    }

    fmt.Printf("EventId: %s\n", result.EventId)
    fmt.Printf("RequestId: %s\n", result.RequestId)
    fmt.Printf("TaskId: %s\n", result.TaskId)
}