Timeline support guide for the Web SDK for the editing and preview component-Intelligent Media Services(IMS)-阿里云帮助中心

Configure different types of tracks and clips in the Web SDK editing and preview component Timeline to perform mixed editing of videos, audio, images, captions, and effects.

Backend Timeline support

For more information, see Timeline configuration.

Frontend Timeline support

The following tables describe frontend Timeline support for the standard editing Web SDK and the preview component Web SDK, version 5.2.2 and later.

Track

Name	Type	Support	Description
VideoTracks	VideoTrack[]	Yes	A list of video tracks. The stacking order of the tracks corresponds to the order of the array elements. For example, the first element in the array is the bottom layer, the second element is layered on top of it, and so on.
AudioTracks	AudioTrack[]	Yes	A list of audio tracks.
ImageTracks (The image track feature has been merged into VideoTracks for compatibility. The image track will no longer be updated or maintained.)	ImageTrack[]	Yes	A list of image tracks. Image tracks must be layered on top of video tracks. If an image is used as a media asset to be mixed with video, such as in a scenario where images are used to produce a video, use VideoTracks. The stacking order of the tracks corresponds to the order of the array elements. For example, the first element in the array is the bottom layer, the second element is layered on top of it, and so on.
SubtitleTracks	SubtitleTrack[]	No. Merge into VideoTracks with Type="Subtitle".	A list of subtitle tracks.
EffectTracks	EffectTrack[]	No. We recommend merging it into VideoTracks. Type="Effects"	A list of effect tracks.

VideoTrackClip

Name	Type	Support	Required	Description
MediaId	String	Yes	No	The media asset ID of the video track clip from the IMS content library or VOD. Note Specify either MediaId or MediaURL.
MediaURL	String	Yes (differentiated by the third parameter `mediaOrigin` in `getMediaInfo` or `getDynamicSrc`, where `mediaOrigin=mediaURL` indicates this type)	No	The OSS address of the video track clip. Format: https://your-bucket.oss-cn-shanghai.aliyuncs.com/your-object.mp4 Note Specify either MediaId or MediaURL. MediaURL only supports public OSS endpoints. It does not support OSS accelerated endpoints, CDN URLs, or other HTTP URLs. Example: Video/image mixing
Type	String	Yes	No	The type of the media asset clip. The default value is Video. Valid values: Video Image
X	Float	Yes	No	The horizontal distance from the top-left corner of the image or video to the top-left corner of the output video. Note Both percentage and pixel values are supported. A value from 0 to 0.9999 represents a percentage of the output video's width. An integer greater than or equal to 2 represents an absolute pixel value.
Y	Float	Yes	No	The vertical distance from the top-left corner of the image or video to the top-left corner of the output video. Note Both percentage and pixel values are supported. A value from 0 to 0.9999 represents a percentage of the output video's height. An integer greater than or equal to 2 represents an absolute pixel value.
Width	Float	Yes	No	A value from 0 to 0.9999 represents a percentage of the output video's width. An integer greater than or equal to 2 represents an absolute pixel value.
Height	Float	Yes	No	A value from 0 to 0.9999 represents a percentage of the output video's height. An integer greater than or equal to 2 represents an absolute pixel value.
AdaptMode	String	Yes	No	The automatic rotation mode for the video size. The default value is Fill. This mode takes effect only when both Width and Height are set for the video track. In this case, Width and Height define the target area, and the video scales automatically within this area. Contain: The content is scaled to fit within the target area while preserving its aspect ratio. Cover: The content is scaled to fill the entire target area while preserving its aspect ratio. If the object's aspect ratio does not match the content box, the object is clipped to fit. Fill: The default behavior. The content is stretched to fill the target content box. The entire object completely fills the box. If the object's aspect ratio does not match the content box, the object is stretched to fit.
In	Float	Yes	No	The in point of the media asset clip relative to the media asset. Use this for audio and video assets. Unit: seconds. The value is accurate to four decimal places. If In is not specified, the default value is 0.
Out	Float	Yes	No	The out point of the media asset clip relative to the media asset. Use this for audio and video assets. Unit: seconds. The value is accurate to four decimal places. If Out is not specified, the default value is the duration of the media asset.
MaxOut	Float	Yes	No	The maximum out point of the media asset clip relative to the media asset. If this value is set, the clip's out point is set to the smaller of the media asset duration and this value. Use this for audio and video assets. Unit: seconds. The value is accurate to four decimal places. If you specify a value for Out, the MaxOut value is ignored.
Duration	Float	Yes	No	The duration of the media asset clip. This is typically used for image assets. Unit: seconds. The value is accurate to four decimal places.
DyncFrames	Int	Yes	No	The number of frames in an animated image. Use this when the media asset is an animated image. Example: Add watermarks, stickers, or GIF stickers.
TimelineIn	Float	Yes	Yes	The in point of the media asset clip relative to the timeline. Unit: seconds. The value is accurate to four decimal places. If TimelineIn is not specified, it is automatically calculated based on the sequential order of the media asset clips.
TimelineOut	Float	Yes	Yes	The out point of the media asset clip relative to the timeline. Unit: seconds. The value is accurate to four decimal places. If TimelineOut is not specified, it is automatically calculated based on the sequential order of the media asset clips.
Speed	Float	Yes	No	The playback speed of the video asset. The value ranges from 0.1 to 100. For example, a value of 2 plays the video at 2x speed, halves the clip's duration, and incorporates it into the final video. Example: Video/image mixing
Opacity	Float	Yes	No	The opacity of the video. The value ranges from 0 to 1. A value of 0 means fully transparent. A value of 1 means fully opaque.
MaskVideoUrl	String	Yes	No	The URL of the mask video. This is typically a video with an alpha channel used to add a transparency effect to the original video. Note Only public OSS endpoints are supported.
ClipId	String	Yes	No	Track alignment parameter. If a media asset on another audio or video track has the same ReferenceClipId, its timeline in and out points align with this clip. For more information, see Automatic duration alignment between media assets.
ReferenceClipId	String	Yes	No	Track alignment parameter. If a media asset on another audio or video track has the same ClipId, the timeline in and out points of this clip align with that media asset. For more information, see Automatic duration alignment between media assets.
Effects	Effect[]	Yes	No	A list of effects for the media asset clip.

AudioTrackClip

Name	Type	Support	Required	Description
MediaId	String	Yes	No	The media asset ID of the audio track clip from the IMS content library or VOD. Note Specify either MediaId or MediaURL.
MediaURL	String	Yes (differentiated by the third parameter `mediaOrigin` in `getMediaInfo` or `getDynamicSrc`, where `mediaOrigin=mediaURL` indicates this type)	No	The OSS address of the audio track clip. Format: https://your-bucket.oss-cn-shanghai.aliyuncs.com/your-object.mp4 Note Specify either MediaId or MediaURL. MediaURL only supports public OSS endpoints. It does not support OSS accelerated endpoints, CDN URLs, or other HTTP URLs. Example: Video/image mixing.
In	Float	Yes	No	The in point of the media asset clip relative to the media asset. Unit: seconds. The value is accurate to four decimal places. If In is not specified, the default value is 0.
Out	Float	Yes	No	The out point of the media asset clip relative to the media asset. Unit: seconds. The value is accurate to four decimal places. If Out is not specified, the default value is the duration of the media asset.
TimelineIn	Float	Yes	Yes	The in point of the media asset clip relative to the timeline. Unit: seconds. The value is accurate to four decimal places. If TimelineIn is not specified, it is automatically calculated based on the sequential order of the media asset clips.
TimelineOut	Float	Yes	Yes	The out point of the media asset clip relative to the timeline. Unit: seconds. The value is accurate to four decimal places. If TimelineOut is not specified, it is automatically calculated based on the sequential order of the media asset clips.
Speed	Float	Yes	No	The playback speed of the audio asset. The value ranges from 0.1 to 100. For example, a value of 2 plays the audio at 2x speed, halves the clip's duration, and incorporates it into the final video. Example: Video/image mixing
Effects	Effect[]	Yes	No	A list of effects for the media asset clip.
LoopMode	Boolean	Yes	No	The loop playback effect for the media asset clip on the timeline. True: Enables loop playback. False (default): Disables loop playback. Example: Video/image mixing
ClipId	String	Yes	No	Track alignment parameter. If a media asset on another audio or video track has the same ReferenceClipId, its timeline in and out points align with this clip. For more information, see Automatic duration alignment between media assets.
ReferenceClipId	String	Yes	No	Track alignment parameter. If a media asset on another audio or video track has the same ClipId, the timeline in and out points of this clip align with that media asset. For more information, see Automatic duration alignment between media assets.

ImageTrackClip

Name	Type	Supported	Required	Description
MediaId	String	Yes	No	The MediaId of the image track asset from the media asset library, or the VOD image media asset ID. Note Specify either MediaId or MediaURL.
MediaURL	String	Yes (differentiated by the third parameter `mediaOrigin` in `getMediaInfo` or `getDynamicSrc`, where `mediaOrigin=mediaURL` indicates this type)	No	The OSS address of the image track clip. Format: https://your-bucket.oss-cn-shanghai.aliyuncs.com/your-object.mp4. Note Specify either MediaId or MediaURL. MediaURL only supports public OSS endpoints. It does not support OSS accelerated endpoints, CDN URLs, or other HTTP URLs. Example: Video/image mixing.
X	Float	Yes	No	The horizontal distance from the top-left corner of the image to the top-left corner of the output video. Note Both percentage and pixel values are supported. A value from 0 to 0.9999 represents a percentage of the output video's width. An integer greater than or equal to 2 represents an absolute pixel value.
Y	Float	Yes	No	The vertical distance from the top-left corner of the image to the top-left corner of the output video. Note Both percentage and pixel values are supported. A value from 0 to 0.9999 represents a percentage of the output video's height. An integer greater than or equal to 2 represents an absolute pixel value.
Width	Float	Yes	No	The width of the image in the output video. Note Both percentage and pixel values are supported. A value from 0 to 0.9999 represents a percentage of the output video's width. An integer greater than or equal to 2 represents an absolute pixel value.
Height	Float	Yes	No	The height of the image in the output video. Note Both percentage and pixel values are supported. A value from 0 to 0.9999 represents a percentage of the output video's height. An integer greater than or equal to 2 represents an absolute pixel value.
TimelineIn	Float	Yes	Yes	The start time when the image appears on the timeline. Unit: seconds. The value is accurate to four decimal places. If TimelineIn is not specified, the default value is 0.
TimelineOut	Float	Yes	Yes	The end time when the image appears on the timeline. Unit: seconds. The value is accurate to four decimal places. If TimelineOut is not specified, the default value is the maximum duration of the video track.
DyncFrames	Int	Yes	No	The number of frames in an animated image. This is required when the media asset is an animated image. Example: Add watermarks, stickers, or GIF stickers.
Effects	Effect[]	Yes	No	A list of effects for the media asset.

SubtitleTrackClip

Name	Type	Supported	Required	Description
Type	String	Only Text is supported.	Yes	The type of the caption media asset. Valid values: Subtitle: External subtitle file Text: Banner text
SubType	String	Yes	No	The subtype of the caption media asset. Valid values: srt: External SRT subtitle External ASS subtitles You can ignore this field when the caption type is banner text.
FileURL	String	No	No	The OSS address of the subtitle file. This is required when the caption type is an external subtitle. Format: https://your-bucket.oss-cn-shanghai.aliyuncs.com/your-object.srt Note FileURL only supports public OSS endpoints. It does not support OSS accelerated endpoints, CDN URLs, or other HTTP URLs. Example: Video/image mixing
X	Float	Yes	No	When the caption type is banner text, this is the horizontal distance from the top-left corner of the text to the top-left corner of the output video. Note Both percentage and pixel values are supported. A value from 0 to 0.9999 represents a percentage of the output video's width. An integer greater than or equal to 2 represents an absolute pixel value.
Y	Float	Yes	No	When the caption type is banner text, this is the vertical distance from the top-left corner of the text to the top-left corner of the output video. Note Both percentage and pixel values are supported. A value from 0 to 0.9999 represents a percentage of the output video's height. An integer greater than or equal to 2 represents an absolute pixel value.
TimelineIn	Float	Yes	Yes	When the caption type is banner text, this is the start time when the text appears on the timeline. Unit: seconds. The value is accurate to four decimal places. If TimelineIn is not specified, it is automatically calculated based on the sequential order of the media assets.
TimelineOut	Float	Yes	Yes	When the caption type is banner text, this is the end time when the text appears on the timeline. Unit: seconds. The value is accurate to four decimal places. If TimelineOut is not specified, it is automatically calculated based on the sequential order of the media assets.
Content	String	Yes	Yes	This is required when the caption type is banner text. It specifies the text content.
Font	String	Yes	No	Supported fonts: `"Alibaba PuHuiTi", // Alibaba PuHuiTi "STFangsong", // Fangsong "KaiTi", // Kaiti "SimSun", // Songti "Source Han Sans CN Normal", // Source Han Sans "Source Han Serif", // Source Han Serif "WenQuanYi Zen Hei Mono", // WenQuanYi Zen Hei Mono "WenQuanYi Zen Hei Sharp", // WenQuanYi Zen Hei Sharp "WenQuanYi Micro Hei", // WenQuanYi Micro Hei "zcool-gdh", // ZCOOL Gaoduan Hei "HappyZcool-2016", // ZCOOL KuaiLe "zcoolwenyiti" // ZCOOL Wenyi`
FontSize	Int	Yes	Yes	When the caption type is banner text, this is the font size of the text.
SizeRequestType	String	Yes	No	When the caption type is banner text, this specifies how the font size is calculated for the actual rendered text size. The default method is Nominal. Nominal: The rendered height of the caption (in pixels) is equal to the FontSize. RealDim: For some fonts, the rendered height of the caption (in pixels) may be smaller than the FontSize.
FontColor	String	Yes	No	When the caption type is banner text, this is the color of the text. The format is a # symbol followed by a hexadecimal value. For example: #ffffff.
FontColorOpacity	String	Yes	No	When the caption type is banner text, this is the opacity of the text. The value ranges from 0 to 1. The default is 1. A value of 1 means fully opaque. A value of 0 means fully transparent.
FontFace	FontFace	Yes	No	When the caption type is banner text, this specifies the font skin of the text.
Spacing	Int	Yes	No	When the caption type is banner text, this is the character spacing. Unit: pixels. The default value is 0.
LineSpacing	Int	Yes	No	When the caption type is banner text, this is the line spacing. Unit: pixels. The default value is 0.
Angle	Float	Yes	No	When the caption type is banner text, this is the counter-clockwise rotation angle of the text. Unit: degrees. The default value is 0.
BorderStyle	Int	Yes	No	Sets the border and shade format for banner text. Valid values are 1 or 3. 1 = border + shade. 3 = opaque background box. The default value is 1.
Outline	Int	Yes	No	When the caption type is banner text, this is the width of the text outline. Unit: pixels. The default value is 0.
OutlineColour	String	Yes	No	When the caption type is banner text, this is the color of the text outline. The format is a # symbol followed by a hexadecimal value. For example: #ffffff.
Shadow	Int	Yes	No	When the caption type is banner text, this is the depth of the text's drop shade. Unit: pixels. The default value is 0.
BackColour	String	Yes	No	When the caption type is banner text, this is the color of the text shade. The format is a # symbol followed by a hexadecimal value. For example: #ffffff.
Alignment	String	Yes	No	When the caption type is banner text, this sets the alignment. The default value is TopLeft. Supported values: TopLeft: Top-left corner of the video TopCenter: Top center of the video TopRight: Top-right corner of the video CenterLeft: Center left of the video CenterCenter: Center of the video CenterRight: Center right of the video BottomLeft: Bottom-left corner of the video BottomCenter: Bottom center of the video BottomRight: Bottom-right corner of the video To position captions accurately with different alignments, set one of the following alignments: Left: Aligns left. X and Y are the coordinates of the top-left vertex of the caption relative to the top-left corner of the video. Center: Aligns center. X and Y are the coordinates of the intersection of the caption's central axis and top edge, relative to the top-left corner of the video. Right: Aligns right. X and Y are the coordinates of the top-right vertex of the caption relative to the top-left corner of the video.
AdaptMode	String	Partially supported (AutoScale is not currently supported)	No	Automatically wraps or scales banner text when it exceeds the video width or the specified TextWidth: AutoWrap: Automatically wraps text. AutoScale: Automatically scales text. AutoWrapAtSpaces: Automatically wraps text only at spaces. This is suitable for scenarios with English-only captions.
TextWidth	Float	Yes	No	The width of the caption text box. This takes effect when AdaptMode is set. The text box width is set to this value for automatic wrapping or scaling. If not specified, the text wraps or scales based on the video width. A value between 0 and 1 (exclusive of 0, inclusive of 1) represents a percentage of the output video's width. A value greater than 1 represents an absolute pixel value.
FontUrl	String	Yes	No	When the caption type is banner text, you can use the path to a font file in your OSS bucket to generate captions. TTF, OTF, and WOFF font file formats are supported. For example: https://your-bucket.oss-cn-shanghai.aliyuncs.com/example-font.ttf
EffectColorStyle	String	Yes	No	When the caption type is banner text, this is the style type for stylized text. For more information about stylized text types and their effects, see Stylized text effect examples.
SubtitleEffects	SubtitleEffect[]	Yes	No	When the caption type is banner text, this specifies multilayer effects for the text. You can set multilayer outlines, multilayer shades, and Gaussian blur effects. Gaussian blur can only be used when the type is shade. Note If SubtitleEffects is set, the Outline and Shadow fields in the subtitle track no longer take effect. When you set multilayer outline or shade effects, the order of the SubtitleEffects array represents the layer order. The first SubtitleEffect in the array is rendered on the bottom layer, and the last SubtitleEffect is rendered on the top layer.
AaiMotionInEffect	String	Yes	No	When the caption type is banner text, this is the type of entrance effect. For more information about caption entrance effect types and their effects, see Caption effect examples.
AaiMotionIn	Float	Yes	No	When the caption type is banner text, this is the duration of the entrance effect. Unit: seconds. The value is accurate to four decimal places. If AaiMotionIn is not specified, the default is 0.5s. If the text duration is less than 0.5s, the duration is the total duration minus the exit effect duration.
AaiMotionOutEffect	String	Yes	No	When the caption type is banner text, this setting specifies the entrance effect. For examples of available effects, see Caption Effect Examples.
AaiMotionOut	Float	Yes	No	For banner text captions, this parameter specifies the duration of the exit effect in seconds, accurate to four decimal places. The default value is 0.5 s if `AaiMotionOut` is not specified. However, if the text duration is less than 0.5 s, the exit effect duration is equal to the total text duration.
AaiMotionLoopEffect	String	Yes	No	When the caption type is banner text, this is the type of loop effect. It cannot be active at the same time as an entrance or exit effect. For more information about loop effect types and their effects, see Caption effect examples.
Ratio	Float	Yes	No	When the caption type is banner text, this is the playback speed of the loop effect. The value is accurate to four decimal places. If not specified, the default is 1. A value greater than 1 speeds up the loop. A value less than 1 slows down the loop.

EffectTrackItem

Name	Type	Supported	Required	Description
Type	String	Yes	Yes	The type of the effect track clip. Supported values: VFX, Filter.
SubType	String	Yes	Yes	The subtype of the effect track clip. For more information, see: Effect examples, Filter effect examples.
TimelineIn	Float	Yes	Yes	The start time when the effect clip appears on the timeline. Unit: seconds. The value is accurate to four decimal places. If TimelineIn is not specified, the default value is 0.
TimelineOut	Float	Yes	Yes	The end time when the effect clip appears on the timeline. Unit: seconds. The value is accurate to four decimal places. If TimelineOut is not specified, the default value is the end time of the video.
Duration	Float	Yes	No	The duration of the effect clip on the timeline. Unit: seconds. The value is accurate to four decimal places. If Duration is not specified, the default value is the video duration. Note Only one of Duration and TimelineOut takes effect.
X	Float	Yes	No	This field is supported only when SubType is set to mosaic_rect or blur. The horizontal distance from the top-left corner of the effect area to the top-left corner of the output video. Note Both percentage and pixel values are supported. A value from 0 to 0.9999 represents a percentage of the output video's width. An integer greater than or equal to 2 represents an absolute pixel value.
Y	Float	Yes	No	This field is supported only when SubType is set to mosaic_rect or blur. The vertical distance from the effect area to the top-left corner of the output video. Note Both percentage and pixel values are supported. A value from 0 to 0.9999 represents a percentage of the output video's height. An integer greater than or equal to 2 represents an absolute pixel value.
Width	Float	Yes	No	This field is supported only when SubType is set to mosaic_rect or blur. The width of the effect area in the output video. Note Both percentage and pixel values are supported. A value from 0 to 0.9999 represents a percentage of the output video's width. An integer greater than or equal to 2 represents an absolute pixel value.
Height	Float	Yes	No	This field is supported only when SubType is set to mosaic_rect or blur. The height of the effect area in the output video. Note Both percentage and pixel values are supported. A value from 0 to 0.9999 represents a percentage of the output video's height. An integer greater than or equal to 2 represents an absolute pixel value.

VideoClips effect support

Name

Type

Supported

Required

Description

Type

String

Supported types:

Text, Crop, Scale, Transition, Filter, VFX, Volume, AFade

Yes

The effect type. Valid values:

Text (banner text: video track asset)
DeWatermark (blur: video track asset)
Crop (clipping: video track asset)
Pad (padding: video track asset)
Scale (scaling: video track asset)
Transition (transition: video track asset)
VFX (effect: video track asset)
Volume (volume adjustment: audio track asset)
AFade (audio fade in/out: audio track)
AI_ASR (generate captions from audio: video track and audio track assets)

SubType

String

Yes

The effect subtype.

When Type is Transition, this further describes the transition subtype. For more information about valid values, see Transition effect examples.
When Type is VFX, this further describes the effect subtype. For more information about valid values, see Effect examples.
When Type is Filter, this further describes the filter subtype. For more information about valid values, see Filter effect examples.