2016-09-01 142 views
0

我正在開發一個網絡視頻編輯器,用戶可以通過類似於下圖中紅色矩形部分的時間線界面編輯視頻。基於Web的視頻編輯的數據模型

enter image description here

要做到這一點,我認爲應該是在服務器端來維護用於編輯操作的所有數據是樹形結構的數據模型,如下面的圖所示。

enter image description here 以時間軸在界面畫面作爲一個例子,存在具有一個VideoGroup子對象和一個AudioGroup子對象一個TimeLine對象。 VideoGroup對象具有2個Track對象的集合,即Video 1Video 2The AudioGroup對象有1個名爲Audio 1的跟蹤對象。 Video 1VideoGroup對象的第一個Track對象具有4個Media對象的集合,第二個Track對象Video 2有6個。而Audio 1AudioGroup對象中唯一的一個Track對象沒有任何。

當涉及到我的應用程序時,在後端數據模型用於應用程序執行實際的編輯操作。在前端,它應該以圖形方式顯示在網頁上,如界面圖中所示。爲了實現這個目標,我想知道,因爲服務器端已經有了一個數據模型,我需要在客戶端創建一個對應的JavaScript數據模型嗎?如果沒有,每當用戶完成修改它的編輯操作時,前端網頁需要從後端重新加載數據模型,以便向最終用戶顯示其更新版本。這樣可以嗎?

回答

0

鳥瞰,高水平的答案:

聽起來像是你建立一個單頁的應用。首先,您的應用程序將通過代表數據結構的各種模型/類的API加載所需的視頻/音頻/數據。在瀏覽器中,您會將這些數據加載到前端框架(Angular,React,Ember或任何您喜歡的)中。

這些模型可能會反映出您有服務器端的數據結構,但可能會有變化來處理特定的前端問題。

前端框架將呈現您的時間線並處理用戶所做的各種操作。

通過保存操作或定期發送(PUT)更新 通過API返回到服務器,記錄用戶對時間線的更改。

+0

如果我理解你的答案,建議我使用JavaScript在前端構建一個對應的數據模型。但由於我的項目的時間限制,我寧願不構建它,因爲我認爲從服務器端實現加載模型更容易,而不是在客戶端和服務器端構建兩個複雜的數據模型,並編寫代碼以同步它們。雖然我不確定我的優選方式是否會爲我的Web應用程序帶來其他重大問題。 – Ivan

+0

我認爲你的應用通過它的本質會有很多用戶交互。無論如何,你可能會想要一個前端框架來構造這些問題。你決定選擇你喜歡的技術堆棧嗎? – sdeburca

+0

就技術堆棧而言,我在服務器端使用ASP.NET和DirectShow.NET API進行視頻編輯。至於前端,我使用HTML Canvas來顯示時間軸界面,並編寫純JavaScript代碼來處理用戶事件並與服務器交換數據。由於我在Web開發方面沒有太多的經驗,現在我無法找到更好的方法。 – Ivan