像写HTML一样编写视频：FFCreator网页端预览的改造

FFCreator是腾讯新闻前端团队开源的一个视频生成库。基于Node.js，利用WebGL来渲染图像，ffmpeg烧制，有简单的JavaScript的API可以帮助程序员快速的生成视频。

如果你还不知道FFCreator，可以先移步这里了解： github.com/tnfe/FFCrea…

或者掘金上也能找到介绍的文章： FFCreator -- 用 node.js 来制作数据可视化视频吧

FFCreator目前还有些局限，比如：

• 没有所见即所得的编辑功能，排版难度高；
• 以及任何对排版与样式的改动都需要写代码，也不利于分层与封装。

所以我们fork了FFCreator，并在此基础上进行了非常大的改动（这也是不能再提PR合并到源仓库的原因），在新的前端FFCreator的基础上，可以直接用XML和JSON的格式来书写【视频描述】，并直接可在网页端预览播放。

感兴趣的小伙伴可以访问这个DEMO玩玩： miravideo.github.io/mira-player…

也可以在掘金的代码沙盒里玩玩看：

采用JSON格式，树形结构描述的视频如下：

const video_data = {
  "type": "canvas",
  "width": 1280,
  "height": 720,
  "children": [
    {
      "type": "video",
      "src": "/src/video1.mp4",
      "width": "100vw",
      "ss": 10,
      "to": 20,
    },
    {
      "type": "video",
      "src": "/src/video2.mp4",
      "height": "100vh",
    },
  ],
};

我们可以简单的把树形结构的节点想象为HTML里的DOM节点。 每个节点都有type和children属性，以及节点类型所对应的属性。 为了便于理解和编写测试，我们也引入了MiraML（XML格式）作为补充，上面的JSON等同于以下：

<miraml>
  <canvas width="1280" height="720">
    <video src="/src/video1.mp4" width="100vw" ss="10" to="20"></video>
    <video src="/src/video2.mp4" height="100vh"></video>
  </canvas>
</miraml>

引入树形结构的目的是：

1. 父子节点关系，可用于处理时间依赖
2. 与DOM节点逻辑类似，便于理解

开源地址： github.com/miravideo/F…

如果遇到问题也可以扫码入群：