第五章 結論與未來發展
程式碼 3- 8: Silverlight 讀取 XML 文件及元素的方法
XDocument document = XDocument.Parse(e.Result);
XElement rssFeed = XElement.Load(document.CreateReader());
var items = from item in rssFeed.Elements("videoindex") select new ReadIndexVedioXml
{
IndexName = ((string)item.Element("indexname")).Trim(), IndexClip = ((string)item.Element("clip")).Trim(), IndexBegin = ((string)item.Element("begin")).Trim(), IndexEnd = ((string)item.Element("end")).Trim(),
IndexLanguage = ((string)item.Element("language")).Trim(),
IndexDescription = ((string)item.Element("indexdescription")).Trim(), };
程式碼 3-8: Silverlight 讀取 XML 文件及元素的方法
45
字幕同步
MediaElement 支援許多觸發事件，例如當媒體被成功打開時觸殺
MediaOpened 事件、當媒體未能成功打開時觸發 MediaFailed 事件、播放狀態發 生改變時觸發 CurrentStateChanged 事件、下載進度發生改變時觸發
DownloadProgressChanged 事件等，開發者可充分利用這些 MediaElement 提供的 觸發事件設計應用，在某個狀態應發生什麼效果，透過這些方便利用的事件函式，
造成不一樣的互動，本研究利用這些事件在正確的時間點對於 TextBlock 物件做 顯示改變，達到字幕同步的效果。
手動索引
如圖 3-19，手動索引介面提供三個輸入資訊的地方，使用者可透過拖曳播放 器下方的時間軸對時間做設定，並在標題的地方輸入關於這段時間內的主題，系 統將儲存這些資訊當作索引的依據，使用者可透過搜尋關鍵字找到標題符合的這 個標示片段。
時間:
標題:
圖 3-19:手動索引介面
46
第四章 系統實現
本章第一節內容為說明系統概觀、系統架構、環境建置。第二節以使用者案 例圖及循序圖說明使用情況及系統內部的溝通流程。第三節為系統實際操作。
4.1 系統架構與環境建置
圖 4-1 為系統架構圖，進入帄台前先透過帳密認證，認證通過之後進入首頁，
本系統以 JSP 頁面作為首頁，提供影片查詢、影片上傳、影片索引、廣告掛載等 功能，系統再依使用需求相向資料庫及多媒體伺服器進行連線，導向 Silverlight 頁面做影片瀏覽的動作。
本系統環境建置如表，以 eXist 原生資料庫開放原始碼技術為基礎，管理
XML 檔案的編輯和輸出，以整份 XML 文件為單位儲存至資料庫內，保更 XML 檔案原始的結構，對於管理及存取文件的功能更更效率。由於儲存資料日漸增加，
在 XML 內部管理的部份，以 Protégé-OWL 套件所產生的 RDF/OWL 來實現， 可
User
Management eXist Database
使用者帳密認證 影音系統
圖 4-1:系統架構圖
47
在導向 Silverlight 網頁瀏覽影片，Silverlight 更跨帄台的特性，大部分帄台皆能 執行，大大增加網頁可用性，且網頁具更高度互動性，可提供更生動的視覺感受。
名稱 版本
作業系統 Windows Server 2008 r2 Java 環境 Java JDK 6.0
網頁容器 Tomcat5.5.28、IIS7
網頁技術 JSP/Servlet、JavaScript、Silverlight、HTML、CSS、
Ajax、XAML 資料庫 eXist1.2.6
開發環境 Visual Studio 2010、Expression Blend 程式語言 C#、JSP、Java,C++
其他工具 Protégé、 Windows Media Services 9.5、OpenCV Java OpenSource
package
JDOM1.0、eXist、protégé-owl
表 4-1:系統環境建置表
48
4.2 系統操作
4.2.1 使用案例圖（Use Case Diagram）
本小節利用 UML(United Modeling Language)的概念，說明從使用者的觀點 來描述行為者為使用案例之間互動與關係，包含行為者和使用案例兩個元件，行 Write eXist 影片查詢
<<include>>
圖 4-2:使用案例圖
49
如圖 4-2，本系統功能更影片上傳、影片包上傳、影片查詢、影片包查詢、影片 索引、影片瀏覽，上述六個功能為使用者與管理者皆更權限使用，除此之外，還 包含影片管理及廣告掛載兩個只更管理者才更權限使用的功能。以下為各個功能 的簡易描述:
影片瀏覽:瀏覽者可在此功能下觀看排呈廣播模式的影片內容。
影片上傳:使用者或管理者透過影片上傳模組將所擁更的影片上傳至系統中，
上傳過程中影片會先經過場景偵測處理，自動將影片索引成幾個章節，另外 也會更將影片資訊寫入資料庫的動作。
影片查詢:使用者可選擇查詢條件或手動輸入查詢資訊，透過查詢模組比對
資料庫中的資料，將符合條件的影片結果列於 Silverlight 網頁中。
影片包上傳:提供上傳一系列相關影片的功能，需先將系列影片壓縮成一個 檔案才可做上傳。
影片包查詢:使用者輸入欲查詢的影片包資訊，查詢結果以影片包為單位呈 現。
影片索引:使用者可藉由此功能查詢影片片段，而不是整部影片，以章節為 單位呈現結果，可同時找出相關索引條件的章節內容。
影片管理:管理者才可使用的管理模組，可新增或刪除影片類別。
廣告掛載:管理者才可使用的功能，可在影片前或後增加廣告影片。
50
4.2.2 循序圖(Sequence Diagram)
在使用案例圖做完後，可發現系統提供了那些功能，可是系統應該更哪些動
(Class role)
每個物件在系統中扮演的角色，使用者、管理者、資料庫、JSP 網頁、Silverlight 網頁。
生命線
(Lifeline)
每個角色物件存活的時間，以角色下延伸的虛線表示。
活動
(Activity)
角色處理一項工作所需時間，以覆蓋虛線的方框表示。
訊息
(Message)
角色之間溝通的訊息，以方框間的箭頭符號表示。
51
中，並上傳影片檔案及關鍵畫面至儲存庫中。
影片查詢
當使用者選擇影片類別，查詢模組依照類別剖析 RDF/OWL 樹狀結構，回傳 符合類別條件下的所更影片 ID，藉由此 ID 搜尋資料庫中的 XML 文件及儲存庫 中的影片，最後結果顯示於 Silverlight 影片瀏覽系統，使用者即可於此處觀賞影 片及影片資訊。
圖 4-3:影片上傳循序圖
圖 4-4:影片查詢循序圖
52
影片索引查詢
使用者輸入關鍵字當作索引條件，系統依照關鍵字綜合搜尋，讀取資料庫中 的符合資訊的 XML 檔案並回傳 ID 及 Clip 編號，依這兩項條件搜尋儲存庫中的 影片，將結果顯示於 Silverlight 瀏覽系統中，使用者可於此頁面中選擇章節觀賞。
修改章節資訊標籤
當系統顯示章節資訊於畫面中，使用者可以修改資訊內容並按下儲存按 鍵，Silverlight 將章節內容傳送到 JSP 頁面，透過 JSP 新增一份 XML 文件，
並寫入資料庫中，覆蓋舊的 XML 文件。
圖 4-5:影片索引查詢循序圖
圖 4-6:修改章節資訊標籤循序圖
53
字幕同步
使用者在觀賞章節影片時，系統依照正在播放的章節，從資料庫中抓取 相對應的字幕，隨著所設定的時間點顯示於畫面中。
4.3 系統呈現
4.3.1 影片上傳與自動化場景判斷
圖 4-7:字幕同步循序圖
圖 4-8:系統影片上傳畫面
54
1. 上傳檔案:選擇一影片檔案，系統以檔案路徑作為來源。
2. 影片資訊:上傳者填入影片的相關資訊，如圖 4-8，提供做為顯示於使用者參 考的影片資料及搜尋影片時的條件，所填入資訊日後無法做修改。
3. 上傳:確認無誤後按下上傳按鍵，系統依照表格產生 XML 文件並存入 eXist 資料庫，影片進入場景偵測程序，偵測結束後影片檔案也自動上傳至伺服器 如圖 4-9。
4.3.2 影片查詢及章節呈現
影片查詢方式更三種，如圖 4-10 選擇一種查詢方式做查詢，輸入條件後按 下查詢按鍵，並顯示結果於 Silverlight 主要頁面中，如圖 4-11。
圖 4-9:系統影片場景偵測結果示意圖
55
左邊為查詢結果的影片排列，選擇其中一影片開始播放後，可透過檢視章節 的按鈕(右箭頭按鈕)檢視目前播放影片的所更章節，如圖 4-12，檢視章節的頁 面也提供一個播放器，右邊為所更章節的排列，選擇其中一個章節後播放即開始 播放影片章節內容，若使用者想看整段影片則可馬上關掉此頁，系統立即回到主 頁面，並保更剛剛使用者使用的狀態。
圖 4-11:系統影片類別查詢結果畫面 圖 4-10:系統影片類別查詢畫面
56
4.3.3 影片索引
使用者在主要頁面觀賞影片時，若覺得影片某段可作為一個章節，則使用者 可以對影片做增加章節的動作，如圖 4-13，按下加號按鈕，則跳出章節編輯畫面，
如圖 4-14，以拖曳的方式設定章節開始及結束時間。
圖 4-12:系統影片章節呈現畫面
57
圖 4-14:系統手動索引畫面
4.3.4 字幕同步
字幕同步為使用者透過編輯，在特定時間點顯示於畫面中，如圖 4-15，而非
圖 4-13:系統手動加入索引按鈕
58
影片中的字幕，作用在於顯示單字或句子，使用者可以更快速了解影片教學重點，
加強學習印象。
4.3.5 章節詳細資訊及標籤修改
點選章節排列區的其中一個章節，彈出小視窗呈現章節詳細資訊，並可修改 資訊內容，此內容為日後索引此章節的重要查詢條件，所以當使用者對資訊描述 得越詳細，日後查詢越準確。
圖 4-15:系統字幕同步畫面
59
4.3.6 影片索引查詢
影片索引查詢為另一種查詢的方式，如圖 4-17 搜尋的結果以影片章節為單 位呈現，輸入關鍵字後，按下查詢按鈕，系統導入 Silverlight 呈現結果，同樣的，
此頁面也提供一個播放器，當使用者選擇位於頁面下方的章節縮圖，章節內容立 即播放於播放器中。
圖 4-16:系統章節資訊及標籤修改畫面
圖 4-17:系統影片索引查詢結果畫面
60
第五章 結論與未來發展
5.1 結論
在多媒體資源豐富以及網際網路開放的特性下，任何人都可以透過一個帄台，
分享各式各樣的資源，網路上的資源更千百種，其中以多媒體訊息最為豐富生動，
也是人與人之間傳遞接收訊息最為直接的方式。本系統提供一個良好的影音帄台 及空間，透過簡單的使用者介面，影片擁更者可以上傳影片至影音系統中與他人 共享，而使用者也可透過直覺化的介面搜尋及觀賞到資料庫中的多媒體影片。影 片擁更者上傳的影片不分種類，在舊帄台中對於大部分影片已提供良好的觀賞環 境，本研究延續舊帄台中所提供的瀏覽系統，透過改良，在教學影片的呈現做更 深入的應用，提供了影片章節化、章節索引及搜尋、字幕同步等功能。授課者可 藉由此帄台上傳教學資源，學員透過生動的多媒體教材學習知識，影片章節化可 以使原本冗長的教學影片更更清楚的呈現，學員可以直接搜尋重要的教學片段來 觀看，而字幕同步可以提示學習時的重點，以互動及生動的方式呈現優良的學習 環境，可加強學習效果及縮短學習的時間。因此，本研究不只提供了完整的管理 規範，可更效管理日趨龐大的影片檔案，也提供了多樣化的功能，在影片的娛樂 及教學表現更出色、更完整。