Tracks 轨道系统
时间线轨道配置详解
Tracks 轨道系统
Tracks 数组定义了视频的时间线轨道,每个轨道包含多个 Clip。
字段定义
interface Track {
id?: string; // 轨道唯一标识
type: TrackType; // 轨道类型
clips: Clip[]; // 轨道上的元素列表
muted?: boolean; // 是否静音(仅音频轨道)
}
type TrackType = 'visual' | 'audio' | 'subtitle' | 'overlay';轨道类型
| 类型 | 描述 |
|---|---|
| visual | 主要视觉内容(视频、图片、文字、图形) |
| audio | 音频内容(音效、配音) |
| subtitle | 字幕、标题内容 |
| overlay | 叠加层内容(装饰元素、水印) |
示例
{
"tracks": [
{
"id": "background",
"type": "visual",
"clips": [
{
"type": "video",
"src": "bg.mp4",
"start": 0,
"duration": 20,
"zIndex": 0
}
]
},
{
"id": "main-content",
"type": "visual",
"clips": [
{
"type": "text",
"text": "Welcome",
"start": 1,
"duration": 5,
"zIndex": 10
},
{
"type": "image",
"src": "product.png",
"start": 6,
"duration": 8,
"zIndex": 5
}
]
},
{
"id": "subtitles",
"type": "subtitle",
"clips": [
{
"type": "text",
"text": "这是字幕内容",
"start": 1,
"duration": 5,
"zIndex": 100
}
]
},
{
"id": "sound-effects",
"type": "audio",
"clips": [
{
"type": "audio",
"src": "ding.mp3",
"start": 6,
"duration": 1,
"volume": 0.8
}
]
},
{
"id": "watermark",
"type": "overlay",
"clips": [
{
"type": "image",
"src": "logo.png",
"start": 0,
"duration": 20,
"zIndex": 200,
"style": {
"opacity": 0.5
}
}
]
}
]
}字段说明
| 字段 | 类型 | 必填 | 默认值 | 描述 |
|---|---|---|---|---|
| id | string | 否 | - | 轨道唯一标识符 |
| type | TrackType | 是 | - | 轨道类型 |
| clips | Clip[] | 是 | [] | 元素列表 |
| muted | boolean | 否 | false | 是否静音(仅音频) |
轨道组织最佳实践
- 按类型分组:将相同类型的内容放在同一轨道
- 按功能分组:背景、主体、字幕分别放在不同轨道
- zIndex 规划:
- 背景: 0-5
- 主体内容: 10-50
- 字幕: 100-150
- 水印/叠加: 200+
- 轨道命名:使用有意义的 ID 便于管理
- 音频分离:BGM 和音效分开管理
渲染顺序
- 按
zIndex排序所有活跃的 Clip - 从低到高依次渲染
- 音频轨道独立处理