基于网络的视频编辑数据模型

Question

我正在开发一个网络视频编辑器 用户可以通过时间轴界面编辑视频，该界面类似于下图中的红色矩形部分。

为实现这一点，我认为服务器端应该有一个树形结构的数据模型来维护用于编辑操作的所有数据，如下图所示。

以接口图中的时间轴为例，有一个TimeLine对象具有一个VideoGroup子对象和一个AudioGroup子对象。 VideoGroup对象具有2个Track对象的集合，即Video 1和Video 2。 The AudioGroup对象有1个名为Audio 1的Track对象。 Video 1，VideoGroup对象的第一个Track对象有4个Media对象的集合，第二个Track对象Video 2有6.而Audio 1只有一个Track对象AudioGroup对象的任何内容都没有。

对于我的应用程序，在后端，数据模型用于应用程序执行实际的编辑操作。在前端，它应以图形方式显示在网页上，如界面图片中所示。为了实现这个目标，我想知道由于服务器端已经存在数据模型，我是否需要在客户端创建对应的JavaScript数据模型？如果没有，前端网页需要在每次用户完成修改它的编辑操作时从后端重新加载数据模型，以便向最终用户显示其更新版本。走那条路可以吗？

Answer 1

鸟瞰，高层答案：

听起来像是在构建单页应用程序。首先，您的应用将通过代表数据结构的各种模型/类的API加载所需的视频/音频/数据。在浏览器中，您将把这些数据加载到前端框架（Angular，React，Ember或您喜欢的任何内容）。

这些模型很可能会反映出您拥有服务器端的数据结构，但可能会有一些变体来处理特定的前端问题。

前端框架将呈现您的时间轴并处理用户所做的各种操作。

通过保存操作/或定期，您将发送（PUT）更新 通过API返回服务器，将用户更改记录到时间线。