全部產品
Search
文件中心

Intelligent Media Management:視頻截雪碧圖

更新時間:Feb 27, 2026

本文介紹了通過Intelligent Media Management(IMM)媒體轉碼介面實現視頻截取雪碧圖的功能。

功能簡介

視頻截雪碧圖是一種將視頻中的多個主要畫面格以縮圖形式合并為一張映像的技術。通過產生雪碧圖,使用者能夠在一張圖中迅速瀏覽視頻的不同情境,從而更有效地選擇觀看內容。

image

使用情境

  • 視頻預覽與內容導航:使用雪碧圖能夠為使用者提供視頻內容的快速預覽,使他們能夠清晰地瀏覽視頻中的主要畫面格,從而方便地選擇感興趣的部分。

  • 視頻播放清單:在播放清單中,可以通過使用雪碧圖展示每個視頻的縮圖,從而使整個列表的介面更加簡潔、美觀,並提升使用者體驗。

  • 社交媒體分享:在社交媒體上分享視頻時,雪碧圖可以作為封面映像,協助使用者快速瞭解視頻內容,從而提高點擊率和觀看量。

  • 直播和活動回放:在活動直播或錄製內容的回放中,雪碧圖能夠協助觀眾快速定位感興趣的高光時刻,從而提升觀看的便捷性。

支援音視頻格式列表

分類

格式

音頻

AAC、MP3、WAV、FLAC、WMA、AC3、OPUS等所有主流格式。

視頻

MP4、MPEG-TS、MKV、MOV、AVI、FLV、M3U8、WebM、WMV、RM、VOB等所有主流格式。

如何使用

前提條件

步驟一:上傳檔案

請使用OSS管理主控台將媒體檔案上傳至IMM專案所在地區的Bucket。

image

步驟二:使用IMM視頻截雪碧圖

調用CreateMediaConvertTask - 建立媒體轉碼任務介面建立視頻截雪碧圖任務。

參數樣本

實現視頻截雪碧圖的過程通常包括以下幾個步驟:

  1. 視訊框架提取:從視頻中提取出選定的主要畫面格。

  2. 影像處理:對提取的幀進行尺寸調整和格式轉換,以保持一致性並適合輸出需求。

  3. 雪碧圖產生:將處理後的幀按網格排列併合並為一張單獨的映像,形成雪碧圖。

以下樣本使用IMM專案test-project,檔案oss://test-bucket/video-demo/釀酒.mov來進行視頻截雪碧圖處理。

更多有關ApsaraVideo for Media Processing各功能介紹和使用,請參見媒體轉碼

說明
  • 您可以通過OpenAPI 門戶使用媒體轉碼介面對視頻檔案進行處理,可參考SDK代碼。

  • 視頻截雪碧圖請勿設定Target.URI和Target.Container參數。

  • 視頻截取的雪碧圖將輸出多張雪碧圖,具體數量取決於子圖的數量以及雪碧圖的行列配置。

  • 推薦配置雪碧圖輸出URI為“oss://bucket/objectPrefix-{index}.{autoext}”格式。若未設定index變數,可能會導致雪碧圖之間相互覆蓋。相關變數請參見TargetURI模板

以每2秒截1幀的形式對整段視頻產生雪碧圖

以每2秒截1幀的形式對整段視頻產生雪碧圖,每張雪碧圖子圖排布為3x3,子圖解析度為200x150。

image

轉碼資訊

  • 雪碧圖格式:jpg

  • 截幀時間間隔:2秒

  • 雪碧圖子圖排布:3x3

  • 單張子圖寬度解析度:200x150

  • 子圖之間間隔(Pad):0

  • 子圖和雪碧圖邊緣間隔(Margin):0

  • 子圖縮放方式:縮放並裁剪,縮放方式請參見縮放方式

  • 輸出檔案儲存路徑:oss://test-bucket/video-demo/sprites-%d.jpg

  • 截幀完成訊息通知:發送MNS訊息到MNS主題“test-mns-topic”

SDK樣本請參見OpenAPI門戶,已為您自動填滿樣本的參數,請您按需修改後再進行調試。

請求參數如下

{
  "ProjectName": "test-project",
  "Notification": {
    "MNS": {
      "TopicName": "test-mns-topic"
    }
  },
  "Sources": [
    {
      "URI": "oss://test-bucket/video-demo/釀酒.mov"
    }
  ],
  "Targets": [
    {
      "Image": {
        "Sprites": [
          {
            "Format": "jpg",
            "Interval": 2,
            "Margin": 0,
            "Pad": 0,
            "ScaleHeight": 150,
            "ScaleType": "crop",
            "ScaleWidth": 200,
            "TileHeight": 3,
            "TileWidth": 3,
            "URI": "oss://test-bucket/video-demo/sprites-{index}.{autoext}"
          }
        ]
      }
    }
  ]
}

以每2秒截1幀的形式對視頻的5s~30s部分產生雪碧圖

以每2秒截1幀的形式對視頻的5s~30s部分產生雪碧圖,每張雪碧圖子圖排布為3x5,子圖寬高為源視頻的1/10。

image

轉碼資訊

  • 雪碧圖格式:jpg

  • 截幀開始時間:第5秒

  • 截幀時間長度:25秒

  • 截幀時間間隔:2秒

  • 雪碧圖子圖排布:3x5

  • 單張子圖解析度:源視頻的1/10

  • 子圖之間間隔(Pad):4

  • 子圖和雪碧圖邊緣間隔(Margin):5

  • 子圖縮放方式:縮放並不保留黑邊,縮放方式請參見縮放方式

  • 輸出檔案儲存路徑:oss://test-bucket/video-demo/sprites-%d.jpg

  • 截幀完成訊息通知:發送MNS訊息到MNS主題“test-mns-topic”

SDK樣本請參見OpenAPI門戶,已為您自動填滿樣本的參數,請您按需修改後再進行調試。

請求參數如下

{
  "ProjectName": "test-project",
  "Notification": {
    "MNS": {
      "TopicName": "test-mns-topic"
    }
  },
  "Sources": [
    {
      "Duration": 25,
      "StartTime": 5,
      "URI": "oss://test-bucket/video-demo/釀酒.mov"
    }
  ],
  "Targets": [
    {
      "Image": {
        "Sprites": [
          {
            "Format": "jpg",
            "Interval": 2,
            "Margin": 5,
            "Pad": 4,
            "ScaleHeight": 0.1,
            "ScaleType": "fit",
            "ScaleWidth": 0.1,
            "TileHeight": 5,
            "TileWidth": 3,
            "URI": "oss://test-bucket/video-demo/sprites-{index}.{autoext}"
          }
        ]
      }
    }
  ]
}

根據數量均勻截幀對視頻產生雪碧圖

結合DetectMediaMeta - 擷取媒體檔案元資訊介面,根據數量均勻截幀產生雪碧圖。

步驟1:擷取視頻時間長度

調用DetectMediaMeta - 擷取媒體檔案元資訊介面擷取視頻時間長度。SDK樣本請參見OpenAPI門戶,已為您自動填滿樣本的參數,請您按需修改後再進行調試。

請求參數如下

{
  "ProjectName": "test-project",
  "SourceURI": "oss://test-bucket/video-demo/釀酒.mov"
}

返回參數如下,擷取到Duration即視頻時間長度

{
  "Addresses": [],
  "AudioStreams": [],
  "Bitrate": 45521134,
  "Duration": 31.64,
  "FormatLongName": "QuickTime / MOV",
  "FormatName": "mov,mp4,m4a,3gp,3g2,mj2",
  "ProduceTime": "2014-12-19T14:20:38Z",
  "RequestId": "94A9AF46-B403-51D5-988F-D9B4939DEF39",
  "Size": 180036088,
  "StreamCount": 2,
  "Subtitles": [],
  "VideoHeight": 1080,
  "VideoStreams": [
    {
      "AverageFrameRate": "25/1",
      "BitDepth": 8,
      "Bitrate": 45517646,
      "CodecLongName": "H.264 / AVC / MPEG-4 AVC / MPEG-4 part 10",
      "CodecName": "h264",
      "CodecTag": "0x31637661",
      "CodecTagString": "avc1",
      "ColorPrimaries": "bt709",
      "ColorRange": "tv",
      "ColorSpace": "bt709",
      "ColorTransfer": "bt709",
      "Duration": 31.64,
      "FrameCount": 791,
      "FrameRate": "25/1",
      "HasBFrames": 1,
      "Height": 1080,
      "Language": "eng",
      "Level": 50,
      "PixelFormat": "yuv420p",
      "Profile": "Main",
      "TimeBase": "1/2500",
      "Width": 1920
    }
  ],
  "VideoWidth": 1920
}

步驟2:根據視頻時間長度均勻截幀產生截雪碧圖

視頻時間長度為31.64s,均勻截取9張子圖,截幀時間間隔為 31.64 / (9 - 1) = 3.955s,雪碧圖子圖排布為3x3,子圖寬高為源視頻的1/10。

轉碼資訊

  • 雪碧圖格式:jpg

  • 截幀時間間隔:3.955秒

  • 雪碧圖子圖排布:3x3

  • 單張子圖解析度:源視頻的1/10

  • 子圖之間間隔(Pad):4

  • 子圖和雪碧圖邊緣間隔(Margin):5

  • 子圖縮放方式:縮放並裁剪,縮放方式請參見縮放方式

  • 輸出檔案儲存路徑:oss://test-bucket/video-demo/sprites-%d.jpg

  • 截幀完成訊息通知:發送MNS訊息到MNS主題“test-mns-topic”

SDK樣本請參見OpenAPI門戶,已為您自動填滿樣本的參數,請您按需修改後再進行調試。

請求參數如下

{
  "ProjectName": "test-project",
  "Notification": {
    "MNS": {
      "TopicName": "test-mns-topic"
    }
  },
  "Sources": [
    {
      "URI": "oss://test-bucket/video-demo/釀酒.mov"
    }
  ],
  "Targets": [
    {
      "Image": {
        "Sprites": [
          {
            "Format": "jpg",
            "Interval": 3.955,
            "Margin": 5,
            "Pad": 4,
            "ScaleHeight": 0.1,
            "ScaleType": "fit",
            "ScaleWidth": 0.1,
            "TileHeight": 3,
            "TileWidth": 3,
            "URI": "oss://test-bucket/video-demo/sprites-{index}.{autoext}"
          }
        ]
      }
    }
  ]
}