視頻截雪碧圖（CSS Sprite或CSS Sprites）的場景主要應用于網站性能優化和前端開發中。雪碧圖通常是指將多個小圖標或圖像拼接在一起形成一張大圖，通過CSS背景定位技術實現單次HTTP請求加載多個圖片資源，從而減少網頁加載時間和提升用戶體驗。您可以通過視頻截雪碧圖功能，提取視頻幀并按一定規則拼接為雪碧圖。本文介紹視頻截雪碧圖功能參數及示例。
注意事項
視頻截雪碧圖僅支持異步處理（x-oss-async-process處理方式）。
視頻截雪碧圖可能由于視頻時間戳或碼流的損壞而失敗或數量不正確。
使用視頻截雪碧圖前，需要先綁定IMM Project。關于控制臺和API如何綁定，請參見快速入門和AttachOSSBucket。
不支持匿名訪問。
必須擁有IMM處理所需的相關權限。更多信息，請參見權限。
參數說明
操作名稱：video/sprite
具體參數如下表所示。
參數 | 類型 | 是否必須 | 描述 |
ss | int | 否 | 視頻截雪碧圖的起始時間，單位為毫秒。取值：
|
f | string | 是 | 雪碧圖輸出格式，取值：
說明 最大支持的分辨率為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 | 否 | 縮放方式。取值：
|
tw | int | 否 | 雪碧圖每行包含的子圖數量，默認值為6，取值范圍為[1, 100]。 |
th | int | 否 | 雪碧圖每列包含的子圖數量，默認值為6，取值范圍為[1, 100]。 |
pad | int | 否 | 雪碧圖子圖間的間隔，單位px，默認值為2，取值范圍為[0, 100]。 |
margin | int | 否 | 雪碧圖邊緣間隔，單位px，默認值為2，取值范圍為[0, 100]。 |
使用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)
}