Javascript 基于web的视频编辑数据模型

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

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

以界面图片中的时间线为例，有一个

时间线

对象，它有一个

视频组

子对象和一个

音频组

子对象。

VideoGroup

对象有两个轨迹对象的集合，即

video1

和

video2

AudioGroup

对象有一个名为

Audio 1

的曲目对象<代码>视频1，视频组对象的第一个曲目对象有4个媒体对象的集合，第二个曲目对象视频2有6个。当

Audio 1

时，

AudioGroup

对象的唯一一个曲目对象没有任何曲目

---

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

鸟瞰图，高层次回答：

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

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

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

通过保存操作或定期发送（放置）更新

---

通过API返回服务器，记录用户对时间线的更改。

如果我正确理解您的答案，您建议我使用JavaScript在前端构建相应的数据模型。但是由于我的项目的时间限制，我不喜欢构建它，因为我认为从服务器端实现加载模型比在客户端和服务器端构建两个复杂的数据模型并编写代码来同步它们更容易。虽然我不确定我的首选方式是否会给我的web应用程序带来其他大问题，但我认为你的应用程序本质上会有很多用户交互。无论如何，您可能需要一个前端框架来构建这些关注点。您是否已决定使用首选的技术堆栈？在技术堆栈方面，我在服务器端使用ASP.NET和DirectShow.NET API进行视频编辑。至于前端，我使用HTMLCanvas来显示时间轴界面，并编写纯JavaScript代码来处理用户事件并与服务器交换数据。由于我在网络开发方面没有太多经验，我现在想不出更好的方法。如果时间对你来说是个大问题，我理解你可能不想在你的堆栈中添加新技术。用vanilla js编写应用程序当然是可能的。我仍然认为您最好构建一个API来保存用户在浏览器中所做的更改。否则，重新加载页面会给您带来各种各样的问题，给用户带来糟糕的时间线体验。您能告诉我您是如何在前端实现显示UI的吗？任何库，你用来呈现视频和时间线在用户界面？你能让我知道，如果你已经完成了这个项目？你能给我提供一个Github链接吗？”因为我正在做一个类似的项目，所以研究一下你是怎么做的肯定会有帮助。谢谢