我正在開發一個網絡視頻編輯器,用戶可以通過類似於下圖中紅色矩形部分的時間線界面編輯視頻。基於Web的視頻編輯的數據模型
要做到這一點,我認爲應該是在服務器端來維護用於編輯操作的所有數據是樹形結構的數據模型,如下面的圖所示。
以時間軸在界面畫面作爲一個例子,存在具有一個VideoGroup
子對象和一個AudioGroup
子對象一個TimeLine
對象。 VideoGroup
對象具有2個Track對象的集合,即Video 1
和Video 2
。 The AudioGroup
對象有1個名爲Audio 1
的跟蹤對象。 Video 1
,VideoGroup
對象的第一個Track對象具有4個Media對象的集合,第二個Track對象Video 2
有6個。而Audio 1
,AudioGroup
對象中唯一的一個Track對象沒有任何。
當涉及到我的應用程序時,在後端數據模型用於應用程序執行實際的編輯操作。在前端,它應該以圖形方式顯示在網頁上,如界面圖中所示。爲了實現這個目標,我想知道,因爲服務器端已經有了一個數據模型,我需要在客戶端創建一個對應的JavaScript數據模型嗎?如果沒有,每當用戶完成修改它的編輯操作時,前端網頁需要從後端重新加載數據模型,以便向最終用戶顯示其更新版本。這樣可以嗎?
如果我理解你的答案,建議我使用JavaScript在前端構建一個對應的數據模型。但由於我的項目的時間限制,我寧願不構建它,因爲我認爲從服務器端實現加載模型更容易,而不是在客戶端和服務器端構建兩個複雜的數據模型,並編寫代碼以同步它們。雖然我不確定我的優選方式是否會爲我的Web應用程序帶來其他重大問題。 – Ivan
我認爲你的應用通過它的本質會有很多用戶交互。無論如何,你可能會想要一個前端框架來構造這些問題。你決定選擇你喜歡的技術堆棧嗎? – sdeburca
就技術堆棧而言,我在服務器端使用ASP.NET和DirectShow.NET API進行視頻編輯。至於前端,我使用HTML Canvas來顯示時間軸界面,並編寫純JavaScript代碼來處理用戶事件並與服務器交換數據。由於我在Web開發方面沒有太多的經驗,現在我無法找到更好的方法。 – Ivan