NOVET 線上影音編輯工具
呂驊庭 林彥君 王祥安
台灣科技大學資訊工程系 {M9515022, y.lin, D9215004}@mail.ntust.edu.tw
摘要
影音部落格是部落格目前發展的主要趨勢。但目前大多數的影音部落格僅提供平台讓使 用者上傳分享影音，在影音內容的創作與編輯方面，並沒有具備較完善的功能。我們發 展的影音編輯技術讓使用者能在線上編輯視訊和音訊，創作出具有個人風格的影音內 容。此技術與部落格整合，使用者便可在部落格上分享所創作的作品。Web 的使用方式 會因此變得更加多元化，資訊內容也因為使用者的參與分享變得更為豐富。
關鍵字：影音部落格、影音編輯
Abstract
More and more blogs are providing basic video sharing, but lack advanced video functionality.
We developed and implemented some advanced video editing techniques, such as adding audio contents to a video. Users can thus edit videos and audios via a Web browser. These editing functions can be integrated into a blog to enrich the multimedia contents.
Keywords: Video blog, Video editing
NOVET線上影音編輯工具
1. 緒論
部落格是近年來網際網路上很熱門的一種網站應用。在部落格網站上，使用者可以 創作內容，並與其他人討論及分享。由於它簡單易用，吸引了大量使用者，並產生出大 量的數位內容。目前影音部落格網站快速成長，如 YouTube、I’m TV [3]等。透過多媒 體的呈現，可讓內容更加豐富，更容易表達使用者的想法。然而，目前大部分的影音部 落格網站只能讓使用者上傳分享影音內容，無法進行線上編輯。少部分提供線上編輯服 務的影音網站，在將音訊加入影片方面的功能尚有不足。
線上影音的相關應用大致上分為三類：影音下載、線上影音編輯、線上錄製影音。
影音下載能轉換線上影音的檔案格式並下載。線上影音編輯是針對線上影音的內容編 輯，如截取片段、合併多個片段等。線上錄製影音是以網路攝影機(Webcam)與麥克風透 過瀏覽器錄製影音。
影音下載系統中，Boudier與Shotton的VIDOS [2]能夠讓使用者取得在網路上的任何 空間裡影音檔案，只要該檔案是允許被使用者下載的。使用者可依照自己的需求改變檔 案的格式、畫面速率(frame rate)等規格後再下載至客戶端。線上影音編輯系統中，Schmitz 等人的International Remix [8]可讓一般使用者編輯製作影音內容，雖提供修剪與合併影 片的編輯功能，但是每一影片只可加入一個音訊作為背景音樂。其他類似的網站有 Jumpcut [4]、One True Media [5]等。One True Media除了可以線上編輯影音，還提供付 費使用者下載編輯後的影音內容。陳偉等人建構出的網路視訊部落格系統[10]，是使用 串流媒體技術建構出以視訊服務為主的部落格，其目的是以影音的方式來呈現自我特 色。使用者可直接在線上錄製影音，並將錄製內容發佈及分享在該部落格上。其他類似 的部落格網站有I’m TV [3]。
我們發展高互動性的線上影音(online videos)編輯技術，以增加部落格網站中影音內 容的創作與編輯功能。我們可選取任意長度的音訊加入影片，且加入影片中的任意時間 點。同時也實現了線上錄影錄音的功能，並可將錄製的影音內容作為編輯素材以重複使 用。我們將這些技術與部落格整合成為一個線上影音編輯的平台，名為NTUST Online Video Editing Tools (NOVET)。
本論文第2節會介紹NOVET的實作架構。第3節介紹NOVET上的各項影音編輯功 能。第4節說明NOVET與其他網站比較的結果。第5節為結論。
2. NOVET架構
NOVET 包含了部落格平台和線上影音編輯工具。在部落格平台方面，我們採用開 放源碼的 WordPress MU [7]軟體來架設，並與我們的影音編輯工具整合。Wordpress MU 是使用率較高的部落格軟體，已具備了部落格網站應有的基本功能，可以省去建置部落 格平台的時間。
在影音編輯工具方面，我們以 Adobe Flash 軟體來發展影音編輯的操作介面。主要 原因是 Flash 具有呈現影音多媒體的能力，且可以在大部分的瀏覽器中使用。此外，Flash 具有許多與使用者互動的機制，在瀏覽器上的操作如同操作桌面軟體一般，能有即時的 互動。
NOVET 採用三層式架構實作，分別為用戶端操作介面、網站伺服器、資料庫三個 部分，系統架構如圖 1 所示。用戶端的操作介面讓使用者可透過瀏覽器操作 NOVET 的 影音編輯功能。此外，若用戶端有網路攝影機與麥克風，也可透過操作介面向網站伺服 器提出線上錄製影片或音訊的請求。
網站伺服器負責接收與處理用戶端的各項編輯請求，並執行對應的影音編輯處理。
伺服器端包含了串流媒體伺服器軟體 Flash Media Server [1]和網頁伺服器軟體 Apache Server。Flash Media Server 用來實作線上錄製影音的功能。Apache Server 則負責部落格 功能和各項影音編輯功能，這兩個功能是透過 XML-RPC [9]的方式整合。此外，網站伺 服器也扮演用戶端與資料庫間的橋樑，將使用者上傳或編輯的影音內容儲存至資料庫，
以及取得資料庫中的影音內容傳送至操作介面。
在資料庫方面，我們使用資料庫管理系統MySQL [6]。它負責儲存使用者的帳戶資 料、影音檔案等的相關資訊。
圖 1 NOVET 的架構
3. NOVET的功能
本節介紹NOVET的影音編輯功能，包含加入音訊、錄製、截取、合併等功能。3.1 節介紹加入音訊至影片的新功能，並說明其操作方式。3.2節介紹新的影音錄製功能，並 說明錄製時的使用情形。為了功能的完整性，NOVET上也有截取、合併影片功能，將 於3.3節介紹。3.4節介紹將影音內容發佈至部落格、轉換影音檔案的格式等功能。
3.1 加入音訊
加入音訊的功能讓使用者可以把任意音訊加入影片中，做為旁白或背景音樂。比起 其他在線上加入音訊至影片的功能來說，NOVET的新功能在於可以加入任意一段的音
訊，並可加入於影片中任意的時間點。
加入音訊的操作介面如圖2所示，它的左半邊由上而下有影片播放區、Add Audio at Time時間設定欄位、搜尋滑桿、三角形狀的時間標記。影片播放區是播放使用者所選擇 的影片內容。時間設定欄位是設定加入的音訊在影片中開始播放的時間點。搜尋滑桿是 用來選擇影片播放的時間點。三角形狀的時間標記可左右拖曳，以設定加入音訊的播放 時間點。設定時間的方式有以下兩種。第一種是當影片播放到欲加入音訊的時間點時，
按下時間設定欄位右邊的Get Time按鈕，該時間點就會被設定在時間設定欄位上。第二 種則是拖曳三角形狀的時間標記來設定欲加入音訊的時間點。在使用者拖曳時間標記的 同時，播放區也會呈現該時間點上的影片畫面。
圖2 影音編輯操作介面
操作介面的右半邊共有Select Audio Source、Specify Start and End Times、Method to Process Audio三個設定項目。Select Audio Source項目是選取欲與影片結合的音訊檔案，
它的下方有Select、Extract from Video、Record三個按鈕。Select是讓使用者選取NOVET 資料庫中的音訊檔案。Extract from Video讓使用者可取出影片中的音訊，並將其儲存至 NOVET資料庫。Record是讓使用者透過麥克風線上錄製音訊。在開始錄製音訊前，可先 將上述三角形狀的時間標記拖曳到欲配音的時間點。開始錄製時，影片播放區會播放影 片內容，讓使用者能夠同時觀看影片內容並作適當的配音。
經過選取或錄製音訊的步驟後，音訊的資料會載入操作介面，結果如圖3所示。音 訊名稱會顯示在Select Audio Source右邊，而其播放時間點和總長度會顯示在下面Time 文字的右邊。Time文字的下方是音訊的搜尋滑桿；而按下Hear Your Selection按鈕會開始 播放音訊內容。
Specify Start and End Times項目是設定音訊的開始和結束時間點，共有以下兩種設
定方式。第一種是利用時間標記來設定時間。音訊搜尋滑桿的左右兩側各有一個三角形 圖示，分別代表開始和結束時間點的時間標記。使用者可以分別拖曳這兩個時間標記，
選定欲加入的音訊片段即完成設定。第二種則是當音訊播放到欲開始的時間點時，按下 Get Start Time按鈕，該時間點就會被設定在Start Time欄位上；當音訊繼續播放到欲結束 的時間點時，則按下Get End Time按鈕，該時間點就會被設定在End Time欄位上。
圖3 將音訊的資料載入操作介面
圖3右下方的Method to Process Audio項目是選擇處理音訊的方法，共有Mix with Original、Remove Original、Replace a portion of Original三種選擇。Mix with Original是將 加入的音訊與影片音訊混合，則處理後的影片可聽到加入的音訊與影片音訊重疊。
Remove Original是由加入的音訊直接取代影片音訊，則處理後的影片裡只會聽到加入的 音訊而沒有影片音訊。Replace a portion of Original是以加入的音訊取代影片音訊的部分 片段，則處理後的影片在被取代音訊的部分只會聽到加入的音訊，其他時間仍維持影片 音訊。此外，NOVET會自動比較影片與音訊片段的時間長度。若加入的音訊片段，它 的時間長度比影片長度短，則會讓使用者選擇是否要循環播放音訊；若加入的音訊片段 比影片長度長，NOVET會自動將音訊裁切至與影片等長。
上述的項目都設定完成後，按下操作介面右下角的View Result按鈕可預覽編輯後的 效果；按下Execute按鈕，可將上述的各項編輯參數送到伺服器端處理，產生出新的影片。
3.2 影音錄製
NOVET提供使用者透過Webcam線上錄製影音檔案，錄製完成的檔案會直接存放在 伺服器端的資料庫中，讓使用者能夠繼續在NOVET上編輯該檔案。
錄製影音的操作介面，如圖4所示。圖中左邊的方框用來顯示Webcam所拍攝到的畫 面；右邊的方框用來播放錄製完成的影音內容。若沒有錄音設備，亦可只錄製影像。使
用者按下Record按鈕後就會開始錄製影音，此時Record按鈕會變成Stop按鈕，按下Stop 按鈕就會停止錄製。結束錄製後，點選右邊方框下面的Play按鈕，就會開始播放剛才錄 製的內容，如圖5所示。圖中右下方的Title欄位是讓使用者輸入自訂的檔案名稱。錄製 完成後，輸入檔案名稱再按下Save按鈕，即可將錄製完成的影音檔案儲存至NOVET資 料庫中。
圖4 影音錄製功能的操作介面
圖5 錄製完成後，播放錄製結果的畫面
3.3 截取與合併影片
截取影片的功能讓使用者可從影片內容中截取出任意片段。它是根據使用者指定的 開始和結束時間點來截取影片。截取影片的操作介面，如圖6所示。畫面中Specify Start and End Times的上方有影片播放器，其下方有時間設定欄位，再往下為搜尋滑桿。搜尋 滑桿的左右兩側各有一個可拖曳的三角形，分別代表開始和結束時間點的時間標記。
使用者有兩種方式可以設定截取影片的開始和結束時間點。第一種是當影片播放到
欲截取的開始時間點時，點選圖6中的Get Start Time按鈕即為設定開始時間；當影片繼 續播放到欲結束的時間點時，按下Get End Time按鈕即為設定結束時間。第二種方式則 是使用搜尋滑桿兩側的時間標記。使用者可以分別拖曳開始和結束的時間標記，選取出 要截取的影片片段即完成設定。在使用者拖曳時間標記的同時，播放區也會呈現該時間 點上的影片畫面。設定完開始和結束時間點後，按下View Result按鈕即可預覽截取的影 片片段；按下Execute按鈕，可將設定的開始和結束時間點送到伺服器端處理，截取出的 影片片段為新的影片檔案。
圖6 截取影片的操作介面
接下來介紹合併影片功能。合併影片是根據使用者所選取且排序好的多個影片，結 合成一個影片檔案。合併影片的操作介面如圖7所示。畫面的左半部為影片播放區，畫 面的右半部有兩個列表。左邊列表會顯示可以合併的影片名稱；右邊列表則是用來排列 合併影片的順序，伺服器端會依此列表由上至下的順序合併影片。當使用者點選左右任 一列表中的影片名稱時，影片播放區都會播放該影片的內容。
使用者先點選圖7左邊列表中任一個或多個影片，再按下兩個列表中間的選取增加 按鈕，則選取的影片會加入右邊列表。預設的增加方式，是將影片增加在右邊列表的最 後面。如果要選擇加入影片的順序，則先點選右邊列表中任一影片，之後再按下選取增 加按鈕，則欲合併的影片就會接在剛點選的影片的後面。若要移除右邊列表中的影片，
則先點選該影片，再按列表下方的Remove按鈕即可。右邊列表排序完成後，按下View Result即可預覽影片合併的結果；按下Execute按鈕，伺服器端就會開始依序將檔案合併，
產生出新的影片。
圖7 合併影片的操作介面
3.4 影音轉檔與發佈
NOVET可以讓使用者把影片轉換成不同檔案格式，並下載至用戶端的電腦，以方 便進行影片的備份與再利用。目前NOVET可以轉換的影片格式有AVI, MOV, MP4, MPEG-1, WMV, FLV。使用者選擇好欲下載的檔案格式後，就可交由伺服器端轉檔。一 旦檔案格式轉換好後，就可以讓使用者將檔案儲存至用戶端電腦上。
除了讓使用者下載影片至用戶端之外，NOVET還提供發佈影音的功能。使用者可 以發佈一篇包含影音內容的文章至部落格上。發佈影音的操作介面，如圖8所示。使用 者可輸入文章的標題與內容，並從Category的下拉式選單中選擇分類。若不作分類可選 擇Uncategorized。若要新增分類，可點選該選單中的New Category，並輸入新的分類名 稱。使用者設定完成後，按下Publish按鈕即可將包含影音內容的文章發佈至部落格中。
發佈的結果如圖9所示，從上而下分別顯示了文章標題、發佈日期、發佈者名稱、文章 內容、影音內容，以及該篇文章的分類等。影音內容可以直接在該文章頁面中播放。
圖8 發佈文章的操作介面
圖9 影音內容發佈結果
4. 與其他網站比較
我們測試了多個提供線上編輯的影音部落格網站，並將功能較完整的網站與 NOVET 比較，如表 1 所示。在編輯影片方面，NOVET 與大部分的編輯網站都已做到合 併及截取檔案。在將音訊加入影片的編輯方面，分成是否能加入音訊、能選擇任意時間 點加入、能選取任意片段音訊加入三個項目。表 1 列出的所有網站都能加入音訊，但只 有 Jumpcut [4]和 NOVET 可以選擇影片中的任意時間點加入。此功能可讓使用者根據影 片的內容來適當的加入音訊。只有 NOVET 可以指定音訊的開始及結束時間點，以選取 出任意長度音訊加入至影片。這樣一來，若使用者想加入的聲音不在音訊檔案的最前 面，亦能輕易的選取欲加入的片段。
在線上錄製影片方面，目前只有 I’m TV 和 NOVET 有提供此功能。但由於 I’m Vlog 沒有提供截取、合併檔案等功能，因此對於錄製完成的影片無法再進行編輯。在線上錄 製音訊方面，目前只有 NOVET 具有此功能，讓使用者可以直接在線上錄製配音。在轉 換檔案格式及下載和發佈影音內容至部落格這兩個項目上，目前也只有 One True Media
[5]和 NOVET 可以做到。由此可見，NOVET 的線上影音編輯功能優於目前其他的線上 影音編輯網站。
5. 結論
NOVET有一些目前別人所沒有的新功能。在將音訊加入影片的技術上，我們可以 將音訊加入至任意時間點，並可讓使用者選取某一段的音訊加入影片。影片和音訊的來 源，除了上傳至網站的方式以外，還可使用網路攝影機和麥克風透過瀏覽器來錄製。錄 製的內容直接儲存於伺服器端，讓使用者能夠繼續編輯這些素材。我們加入的這些新功
能可讓使用者在編輯上有更多的選擇，並能夠進一步創作出更豐富的影音內容。此外，
我們將NOVET整合於部落格中，使用者便可以很容易的發佈與分享自己創作的影音內 容。
表 1 線上影音編輯網站的功能比較 Jumpcut
[4]
International Remix [8]
One True
Media [5] I’m TV [3] NOVET
合併檔案 可 可 可 不可 可
編輯
影片 截取檔案 可 可 可 不可 可
是否能加入音訊 可 可 可 可 可
是否能選擇任意時間
點加入 可 不可 不可 不可 可
將音訊 加入影 片的編
輯 是否能選取任意片段
音訊加入 不可 不可 不可 不可 可
線上錄製影片 不可 不可 不可 可 可
線上錄製音訊 不可 不可 不可 不可 可
轉換檔案格式及下載 不可 不可 可 不可 可
發佈影音內容至部落格 不可 不可 可 不可 可
網站 編輯功能
致謝
本研究接受國科會編號NSC 96-2221-E-011-161及NSC 97-2221-E-011-093研究計畫補助部分經費。
參考文獻
[1] Adobe, Flash Media Server resources, http://www.adobe.com/support/documentation/en/flashmediaserver/.
[2] T. Boudier and D. M. Shotton, VIDOS, a system for video editing and format conversion over the Internet, Computer Networks, Vol. 34, No. 6, 2000, pp. 931-944.
[3] IMTV, 用I'MTV創造自己, http://www.im.tv/Vlog/.
[4] Jumpcut, The easiest way to upload, edit, and share your video and photos, http://jumpcut.com/.
[5] One True Media, Your life, perfectly mixed, http://www.onetruemedia.com/.
[6] Sun Microsystems, MySQL, http://www.mysql.com/.
[7] M. Mullenweg, R. Boren, and D. O. Caoimh, WordPress MU, http://mu.wordpress.org/.
[8] P. Schmitz, P. Shafton, R. Shaw, S. Tripodi, B. Williams, and J. Yang, International Remix: video editing for the Web, in Proc. of 14th Annual ACM International Conference on Multimedia, Santa Barbara, CA, 2006, pp. 797-798.
[9] User Software, XML-RPC Home Page, http://www.xmlrpc.com/.
[10] 陳偉, 林憲良, and 王曉慧, 網路視訊部落格製作與應用, in 網路社會學通訊期刊, vol. 64, 2007.
