RenderingVideo 文档
基础概念
理解 tracks、clips、时长、坐标与素材引用的核心概念
基础概念
1. 顶层模型
当前协议是:
{
"meta": {},
"assets": {},
"tracks": []
}
要点:
meta描述输出画布assets是可选素材池tracks[].clips才是真正的时间线内容
2. 时长模型
v2 不再要求顶层 video.duration。
当前项目里的真实行为:
- 总时长从顶层 clips 推导
- 项目结束时间取所有 clip 实际结束时间的最大值
video和audio如果做了源裁剪,实际可播放时长会变短
3. Track 与 clip
每个 track 本质上就是一个 clip 容器:
{
"id": "main",
"clips": [
{
"type": "text",
"start": 0,
"duration": 3
}
]
}
每个 clip 负责定义:
- 它是什么元素
- 什么时候开始
- 持续多久
- 出现在什么位置
- 以什么样式显示
4. 坐标模型
百分比坐标不是 DOM 那种左上角原点,而是基于中心点。
例如:
x: "50%"表示水平居中y: "50%"表示垂直居中x: "0%"表示最左侧y: "100%"表示底部
5. 素材引用
需要复用媒体资源时,先放进 assets,再用 $ref:
{
"assets": {
"images": [
{
"id": "cover",
"src": "https://example.com/cover.jpg"
}
]
}
}
然后这样引用:
{
"type": "image",
"start": 0,
"duration": 5,
"src": { "$ref": "cover" }
}