我正在开发一个网络视频编辑器 用户可以通过类似于下图中红色矩形部分的时间轴界面来编辑视频。
要实现这一点我认为在服务器端应该有一个树状结构的数据模型来维护所有用于编辑操作的数据，如下图所示。
以界面图中的时间轴为例，有一个TimeLine对象，有一个VideoGroup子对象和一个AudioGroup子对象. VideoGroup 对象有 2 个 Track 对象的集合，即 Video 1 和 Video 2。 AudioGroup 对象有 1 个名为 Audio 1 的 Track 对象。 Video 1，VideoGroup 对象的第一个 Track 对象有 4 个 Media 对象的集合，第二个 Track 对象 Video 2 有 6 个。 Audio 1，AudioGroup 对象的唯一一个 Track 对象没有。
当谈到我的应用程序时，在后端数据模型用于应用程序执行实际的编辑操作。在前端，它应该像界面图片那样以图形方式显示在网页上。为了实现这个目标，我想知道既然服务端已经有了数据模型，那么是否需要在客户端创建一个对应的JavaScript数据模型呢？如果不是，前端网页需要在每次用户完成修改它的编辑操作时从后端重新加载数据模型，以便将其更新版本显示给最终用户。这样走可以吗？
最佳答案
鸟瞰图，高阶答案:
听起来像是在构建单页应用程序。首先，您的应用程序将通过代表数据结构的各种模型/类的 API 加载所需的视频/音频/数据。在浏览器中，您会将此数据加载到前端框架(Angular、React、Ember 或任何您喜欢的框架)中。
这些模型很可能会反射(reflect)您在服务器端拥有的数据结构，但可能会有所不同以处理特定的前端问题。
前端框架将呈现您的时间轴并处理用户进行的各种操作。
通过保存操作/或定期发送 (PUT) 更新 通过您的 API 返回服务器，记录用户对时间线的更改。
关于javascript - 用于基于网络的视频编辑的数据模型，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/39276787/