本文提供雪碧图介绍、适用场景、费用说明、前提条件、使用步骤等内容。

雪碧图介绍

雪碧图是由多帧截图拼接而成的一张大图，用于播放器进度条拖动时通过缩略图快速预览视频内容，具有以下好处：

• 图片体积小：将许多小图合并到一张大图中，可以使用更高效的压缩算法进行压缩，减小图片文件的大小，从而减少网络传输的数据量。
• 请求次数少：通过图片整合，减少用户对服务器的请求次数，从而提高页面打开速度。

以下为一张雪碧图示例。该雪碧图中共包含 13 张从视频中截取的缩略小图。

基于上述雪碧图的进度条缩略图预览效果如下：

费用说明

雪碧图的费用按截取的小图张数计算，具体价格请见按量计费 - 视频截图。

工作原理

雪碧图一般是在转码阶段生成，过程大致为：

1. 按一定的间隔从片源中截取 N 张缩略小图。
2. 按顺序排列拼接为多张雪碧大图，并记录下雪碧大图 URI。
3. 生成完成后，您可通过点播接口获取到雪碧大图的地址，根据一定的偏移量即可获取对应时刻的缩略小图。

因此，如果您需要实现进度条缩略图预览功能，请确保视频转码过程中包含生成雪碧图这一步骤。

前提条件

• 开通火山引擎视频点播服务。具体步骤，请见快速入门。
• 在视频点播控制台新建空间。具体步骤，请见空间管理。
• 在视频点播控制台新增封面加速域名。具体步骤，请见新增域名。

使用步骤

步骤一：配置截图模板

通过视频点播控制台配置截图模板，具体步骤如下：

1. 登录视频点播控制台，进入某一空间。
2. 单击左侧导航栏媒体处理设置 > 媒体处理模板，进入媒体处理模板页面。
3. 单击截图模板页签，单击添加截图模板按钮，进入创建截图模板页面。
4. 根据页面提示完成参数配置。截图类型选择雪碧图。详细的参数说明请见雪碧图参数。下图示例中，截图数量设置为 10 张，小图排列设置为 2 行 * 2 列，则会生成 3 张雪碧图，包含截图数量为 4、4、2。其中，最后一张雪碧图 2 个空位会由黑色背景填充。
   

步骤二：在工作流中添加截图任务

通过视频点播控制台配置工作流模板，具体步骤如下：

1. 单击左侧导航栏媒体处理设置 > 工作流模板，进入工作流模板页面。
2. 单击新建工作流。
3. 在工作流设置中，勾选截图任务，将媒体处理模板设为步骤一中创建的截图模板。
   

   说明

   您可在一个工作流模板中同时添加转码和截图任务。

4. 根据页面提示完成其它参数配置。详细的参数说明请见新建工作流模板。

步骤三：触发媒体处理任务

通过控制台和 OpenAPI 触发媒体处理任务，生成雪碧图。具体说明如下：

• 控制台方式：
  • 单击左侧导航栏媒资管理 > 视频管理， 进入视频管理页面。
  • 根据业务需求，选择 Vid 模式或者 DirectUrl 模式。
  • 选择列表中指定媒资文件发起处理。具体操作请参见触发媒体处理。
• OpenAPI 方式：调用 StartWorkflow 接口。

步骤四：查看媒体处理结果

触发媒体处理任务后，可通过控制台、 OpenAPI 或回调事件查看工作流执行结果，具体说明如下：

• 控制台方式：单击左侧导航栏任务管理 > 工作流任务，进入工作流任务页面，查看任务状态。
• OpenAPI 方式：调用 GetWorkflowExecutionResult 接口 ，查看工作流执行结果。
• 回调事件方式：通过工作流执行完成事件。

步骤五：获取雪碧图 URL

媒体处理结果为成功时，可通过控制台或 OpenAPI 直接获取雪碧图 URL，也可先通过 OpenAPI 或回调事件获取雪碧图 URI，然后根据规则自行拼接获得雪碧图 URL。

控制台方式

参考以下步骤通过控制台直接获取雪碧图 URL：

1. 登录视频点播控制台，进入某一空间。
2. 单击左侧导航栏媒资管理 > 视频管理， 进入视频管理页面。
3. 选择处理的文件，在操作列表下单击详情按钮，进入视频详情页面。
4. 单击截图结果，可复制链接或者预览图片。
   

OpenAPI 和回调事件方式

• Open API 方式：调用 ListSnapshots 接口，通过 SpriteSnapshots 结构体中的 Urls 和 StoreUris 参数获取雪碧图 URL 或 URI。
• 回调事件方式：通过工作流执行完成事件中的 Sprite 类型的 Snapshots 结果中的 StoreUris 获取雪碧图 URI。

以下为工作流执行完成事件返回的雪碧图信息示例：

"Snapshots": [
    {
      "Type": "Sprite",
      "Params": {
        "Format": "jpeg",
        "StoreUris": [
          "tos-vod-cn-v-03e4***3112705/48f0b9e130374ed6b***4b8be" // 雪碧图的 StoreUri
        ],
        "ImgXLen": 2,
        "ImgYLen": 2,
        "CellWidth": 360,
        "CellHeight": 202,
        "Interval": 4,
        "CaptureNum": 4
      }
    }
]

步骤六：播放端展示雪碧图

如果您使用点播 SDK 播放音视频，参考以下文档在播放端展示雪碧图，实现进度条预览缩略图功能：

• Android SDK 展示雪碧图
• iOS SDK 展示雪碧图
• Web SDK 展示雪碧图