视频截雪碧图

更新时间:2025-03-11 09:54:02

本文介绍了通过智能媒体管理(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来进行视频截雪碧图处理。

更多有关媒体处理各功能介绍和使用,请参见概述

说明
  • 您可以通过OpenAPI 门户使用媒体转码接口对视频文件进行处理,可参考SDK代码。

  • 视频截雪碧图请勿设置Target.URITarget.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}"
          }
        ]
      }
    }
  ]
}
  • 本页导读 (1)
  • 功能简介
  • 使用场景
  • 支持音视频格式列表
  • 如何使用
  • 前提条件
  • 步骤一:上传文件
  • 步骤二:使用IMM视频截雪碧图
  • 参数示例
  • 以每2秒截1帧的形式对整段视频生成雪碧图
  • 以每2秒截1帧的形式对视频的5s~30s部分生成雪碧图
  • 根据数量均匀截帧对视频生成雪碧图
AI助理

点击开启售前

在线咨询服务

你好,我是AI助理

可以解答问题、推荐解决方案等