Create dynamic images from video-ApsaraVideo VOD(VOD)-阿里云帮助中心

Introduction

A dynamic image creates a motion effect by rapidly displaying a series of static images. The most common formats on the web are GIF and, to a lesser extent, WebP. Creating a frame animation involves extracting a specific segment from a video and generating a dynamic image file.

ApsaraVideo VOD supports GIF and WebP formats for frame animations. The following table compares the two formats.

Format	Features
GIF	Offers high compatibility and is often used for web page decoration.
WebP	Its file size is much smaller than GIF, but it is not supported by some browsers, including Internet Explorer, iOS Safari 3.2 to 13.7, and KaiOS Browser.

Use cases

Social media sharing: Create GIFs from video highlights for quick sharing, or use a frame animation as an eye-catching summary to attract users to watch the full video.
Marketing promotion: Use dynamic images from video highlights in advertisements to spark user interest, improve click-through rates, and increase conversion. On e-commerce sites, dynamic images can showcase product features or demonstrate functionality.
News reporting and entertainment: In news reporting, editors often capture key moments from news events as dynamic images to present important information concisely. Movie trailers or show highlights can be released as dynamic images for quick browsing.
Educational demonstrations: In online courses, teachers can use dynamic images to explain complex concepts or steps, helping students understand and remember information more effectively.

Billing

Frame animation is billed as media transcoding, with charges based on resolution and duration. For more information, see Media transcoding billing.

Usage notes

A frame animation may fail to generate if the media file contains only audio and no video stream, the source file is damaged, or the container metadata is invalid.
The process of creating a frame animation is asynchronous. You can check the job status by using the DynamicImageComplete callback.
The time required to create a frame animation depends on the file size, file duration, and the duration of the animation.

Prerequisites

ApsaraVideo VOD is activated. For more information, see Activate ApsaraVideo VOD.
The RAM user or RAM role that you use has corresponding permissions to access ApsaraVideo VOD. We recommend that you use a RAM user or RAM role to perform operations to improve the security of your account and resources. For more information, see Create and grant permissions to a RAM user.

Step 1: Create a frame animation template

Frame animation templates simplify job submission by letting you pre-configure parameters and reference a template ID instead of passing them for each job.

Console

Log on to the ApsaraVideo VOD console.
In the left-side navigation pane, choose Configuration Management > Media Processing > Frame Animation Templates.

Click Create Frame Animation Template. On the Add Frame Animation Template page, configure the parameters for the template.

Parameter	Description
Template name	The name of the frame animation template. The name must be 4 to 64 characters in length and can contain uppercase letters, lowercase letters, digits, hyphens (-), and underscores (_).
Output format	The format of the output dynamic image. Valid values: gif and webp.
Frame rate	The frame rate of the dynamic image. An integer in the range (0, 60].
Size (width × height)	The width and height of the dynamic image, in pixels. Note If you do not specify a width and height, the dynamic image will have the same dimensions as the source video. If you specify only the width or height, ApsaraVideo VOD automatically scales the other dimension to maintain the video's original aspect ratio.
Trim mode	The method used to define the time range of the video to capture. Supported options: By Duration or Trim from Beginning and End.
Start time	The start time for capturing the animation. The value must be between 0.000 and 86399.999, inclusive. Unit: seconds.
Duration	The duration of the animation to capture, starting from the Start Time. The value must be between 0.000 and 86399.999, inclusive. Unit: seconds. Note This parameter is required when By Duration is set to By Duration.
Trim from end	The duration to trim from the end of the video. The value must be between 0.000 and 86399.999, inclusive. Unit: seconds. Note This parameter is required when Trim from Beginning and End is set to Trim from Beginning and End.
Set as default cover	If you enable this feature, the generated frame animation is automatically set as the video's cover image.

Click Save to complete the template configuration.

After the template is created, it appears in the Frame animation templates list. The list displays information such as Template name, ID, Output format, frame rate, size (width × height), trim mode, and Set as default cover. In the Actions column, you can Edit or Delete the template. Click Add frame animation template to create a new one.

API

Call the AddVodTemplate operation, set the TemplateType parameter to DynamicImage, and customize other parameters to create a frame animation template.

After the template is created, the system returns a template ID in the VodTemplateId field.

Step 2: (Optional) Configure event notifications

Before starting a frame animation job, configure an event notification for DynamicImageComplete to receive the job status and the URL of the generated frame animation after the task is complete.

For more information, see Configure callbacks.

Step 3: Start a frame animation job

Console

Create a workflow that includes a Frame Animation Template node.

You must use a workflow to start a frame animation job in the ApsaraVideo VOD console. Create a workflow that includes a frame animation task by adding a Frame Animation Template node and setting the frame animation template to the one you created in Step 1. For more information about how to create a workflow, see Manage workflows.
Start the frame animation job.
- Scenario 1: Create a frame animation while uploading a video
  1. In the ApsaraVideo VOD console, choose Media Files > Audio/Video in the left-side navigation pane.
  2. Click Upload Media.
  3. Configure the upload method and storage location, add your video, select Use Workflow, and then select the workflow that contains the frame animation job.
  4. Click Upload.
- Scenario 2: Create a frame animation after a video is uploaded
  1. In the ApsaraVideo VOD console, choose Media Files > Audio/Video in the left-side navigation pane.
  2. On the Audio/Video page, find the target video and click Processing in the Actions column.
  3. Set Processing Type to Use Workflow and select the workflow that contains the frame animation job from the Workflow drop-down list.
  4. Click OK.

API

Scenario 1: Create a frame animation while uploading a video
1. Create a workflow that contains a Frame Animation Template node.
  
  Add a Frame Animation Template node to the workflow and set the frame animation template to the one you created in Step 1. For more information about how to create a workflow, see Manage workflows.
2. When you call a media upload API operation, set the WorkflowId parameter to the ID of the workflow you just created. Configure other parameters as needed to complete the upload. The relevant API operations include:
  - CreateUploadVideo
  - UploadMediaByURL
Scenario 2: Create a frame animation after a video is uploaded

Call the SubmitDynamicImageJob operation. Set the DynamicImageTemplateId parameter to the ID of the template you created in Step 1, and configure other parameters as needed to start a frame animation job for a specific video.

Step 4: Get frame animation information

(Recommended) If you have configured event notifications, you will receive a DynamicImageComplete callback with the animation information.
After the frame animation job is complete, you can call the ListDynamicImage operation to retrieve the details of the generated animation.

Note

If you have set the frame animation as the cover, you can call the GetVideoInfo operation to get the URL of the cover animation.

SDK reference

For SDK examples related to frame animation templates, see Snapshot jobs and template management.
For SDK examples related to frame animation jobs, see Frame animation management.