什么是视频截雪碧图_对象存储(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。
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	否	缩放方式。取值： 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”）。如果已指定后缀名，则系统仅会保留最后一张截图，因此不建议使用此方式。如需自定义序号，可以通过媒体处理相关变量进行设置。

以每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

仅支持使用Java、Python、Go 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实例。
        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)
}