RenderingVideo 文档

基础概念

理解 tracks、clips、时长、坐标与素材引用的核心概念

基础概念

1. 顶层模型

当前协议是:

{
  "meta": {},
  "assets": {},
  "tracks": []
}

要点:

  • meta 描述输出画布
  • assets 是可选素材池
  • tracks[].clips 才是真正的时间线内容

2. 时长模型

v2 不再要求顶层 video.duration

当前项目里的真实行为:

  • 总时长从顶层 clips 推导
  • 项目结束时间取所有 clip 实际结束时间的最大值
  • videoaudio 如果做了源裁剪,实际可播放时长会变短

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" }
}

6. 下一步看什么