第五章 結論與未來發展
程式碼 3- 2:XQuery 依照關鍵字查詢結果
自動語音系統
圖 3-11:XQuery 查詢流程
程式碼 3-1:XQuery 依照關鍵字查詢
程式碼 3-2:XQuery 依照關鍵字查詢結果
35
統，經由 Silverlight 所設計出的應用程式除了更跨帄台的優點之外，也提供了高 互動性的影音功能使用介面，Silverlight 強大的影音功能及互動性剛好符合本系 統所要呈現的理念，這些優點使得使用者可藉由本系統達到良好的學習效果。
3.4.1 Silverlight 影片瀏覽架構
如圖 3-12，Silverlight 瀏覽介面主要分為兩個，一個為影片查詢結果的呈現 介面，也是系統中主要瀏覽影片的地方，另外一個為影片索引查詢結果的呈現介 面，主要提供影片章節的瀏覽。以下小節針對兩個瀏覽介面所擁更功能模組及各 模組內使用到的技術作詳細的介紹及討論。
JSP Page
影片查詢
影片索引
Silverlight Page Silverlight
影片瀏覽 介面
Silverlight 影片章節 瀏覽介面
圖 3-12:影片瀏覽架構
36
3.4.2 Silverlight 瀏覽介面
如圖 3-13，Silverlight 影片瀏覽介面分成幾個區塊及功能:影片資訊區、
Silverlight Media Player、廣告掛載、播放清單、手動加入索引按鈕、章節呈 現按鈕等，系統使用流程大致可分為下列步驟:
Silverlight Movie Database
播放清單
Silverlight Media Player
+
圖 3-13:Silverlight 影片瀏覽介面
→
37
3. 彈出子視窗更描述完整的影片資訊及播放按鍵，按下播放按鍵，影片立 即在 Silverlight Media Player 上播放。
4. 使用者可利用播放清單加入想觀賞的幾部影片，系統將依照播放清單輪
38
如圖 3-14，Silverlight 影片章節瀏覽介面分成幾個區塊及功能:影片章節 排列區、章節詳細資訊區、MediaElement 播放器、字幕同步區等，系統使用流 程大致可分為下列步驟:
1. 章節排列區提供各章節影片內容的關鍵畫面，並列更開始時間以及章節 編號，使用者透過關鍵畫面的呈現可大略推知章節內容，作為第一階段 的快速篩選。
2. 點選章節縮圖可觀看章節詳細資訊，配合關鍵畫面可完全了解章節內容，
詳細資訊包含章節主題、開始時間、結束時間、語言、以及章節描述等，
並可在這個步驟對於詳細資訊內容的不完整處做修改，以便日後查詢此 章節的準確性。
3. 點選章節縮圖可直接於播放器中播放章節內容，並在播放器下方提供字 幕同步的功能，可於特定時間點顯示字幕，字幕內容可以是影片內容的 重點、單字或是整段對話等，已主動的方式呈現此段學習影片的重點，
加強使用者學習的效率。
3.4.3 Silverlight 模組內部技術
Silverlight 影片資訊及章節排列區
利用影片畫面作為使用者篩選影片內容的依據為最更效率的方法，相對於純 文字對於影片內容的描述更為更用，圖片為刺激視覺感官最直接的方式，若能以
39
DataBinding 為一種資料連結技術，提供網站開發者及使用者許多優點，包 括製作網頁更為容易、更新及下載網頁更快速，並且較不依賴遠端伺服器，會更
Upload 影片
40
這些優點是因為它允許網頁資料可以保存在本地端且與設定格式的原始碼離。
在本系統中 Silverlight 使用者介面常常要與資料庫作聯繫，一般來說，任何 使用者額外的要求需要很多次傳送到伺服器端的處理程序，當使用者提出另外要 求且整個龐大的處理程序又要重來一次，造成伺服器的負擔且耗時又沒效率。在 影片資訊或是章節排列區需要動態顯示查詢結果，使用資料綁定技術可降低負擔 且更效率。
本系統中使用 Binding 技術將資料綁定到 listbox 控制項中，由於 Silverlight 的 DataBinding 技術，在頁面讀取時就先將查詢資料的結果綁定到控制項中，讀 取結束查詢結果隨即顯示出來，並在 listbox 當中每一個被點選的縮圖，可以透 過底下的方式抓取到，透過程式碼可以清楚了解綁定的方式。
public class ReadIndexXML {
public string IndexImageUrl { get; set; } public string IndexImageID { get; set; } }
<UserControl
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:ExpressionMediaPlayer="clr-namespace:ExpressionMediaPlayer;assembly=MediaP layer"
xmlns:My="clr-namespace:BindingXAML"
x:Class="Silverlight_VedioPlayer.ShowSearchIndex"
>
程式碼 3-4:在 XAML 中建立資料綁定(二):建立來源物件命名空間參考 程式碼 3-3:在 XAML 中建立資料綁定(一):定義來源物件
41
Silverlight 版面配置面板
本系統使用 Silverlight 所提供的控制項 WrapPanel 以及 StackPanel 自動排列 呈現資訊區的縮圖，WrapPanel 控制項跟 StackPanel 控制項類似，但是可以將元 素分配放置於多行，如圖 3-16 可依垂直方向(由上而下由左而右)或是水帄方向(由 左而右由上而下)排列容器內的項目，且不會因為內部元素超過呈現區邊緣而遭 到裁切，隨著子物件越來越多，WrapPanel 控制項會繼續使物件換行，直到空間 用完，才會裁剪物件，而 StackPanel 控制項會隨著新增的子物件愈來愈多，將裁
<UserControl.Resources>
<DataTemplate x:Key="DataTemplate1">
<Image x:Name="BookImage2" Width="120" Height="120" Source="{Binding IndexImageUrl}" HorizontalAlignment="Center"
VerticalAlignment="Center"/>
</DataTemplate>
<ItemsPanelTemplate x:Key="ItemsPanelTemplate1">
<controlsToolkit:WrapPanel Orientation="Horizontal" ItemHeight="125"
ItemWidth="125"/>
</ItemsPanelTemplate>
</UserControl.Resources>
<ListBox x:Name="IndexList" BorderThickness="8" Margin="8"
Cursor="Hand" ItemTemplate="{StaticResource DataTemplate1}"
ScrollViewer.HorizontalScrollBarVisibility="Disabled"
SelectionChanged="BooksList_SelectionChanged"
ItemsPanel="{StaticResource ItemsPanelTemplate1}"
Background="#FF0E0E0E" BorderBrush="#FF847A7A" Grid.Row="1"
d:LayoutOverrides="VerticalAlignment" Height="150"/>
程式碼 3-5:在 XAML 中建立資料綁定(三):在 Resource section 中建立來源物件
程式碼 3-6: 在 XAML 中建立資料綁定(四):綁定到物件
42
剪 (或隱藏) 超出面板大小的物件，如圖 3-17。
Silverlight 提供許多控制項，對於開發人員在設計時非常方便，例如只要設 置控制面板的 Orientation 屬性值，就可輕鬆的決定圖片排列的方向，或者配合使 用者螢幕大小作縮放調整，不頇再多花時間在編寫控制項外觀的部分，更可專心 在後端行為的撰寫，內部程式碼如以下程式碼 3-7 所示。
圖 3-16:WrapPanel 排列狀況 圖 3-17:StackPanel 排列狀況
<StackPanel Orientation="Vertical">
<StackPanel Orientation="Horizontal">
<TextBlock Height="20" Text="" FontSize="14"/>
<TextBlock Height="20" Text="" FontSize="12"/>
</StackPanel>
<StackPanel Orientation="Horizontal">
<TextBlock Height="20" Text="" FontSize="14" />
<TextBlock Height="20" Text="" FontSize="12" />
</StackPanel>
</StackPanel>
程式碼 3-7:StackPanel 控制項範例
43
44
播放區 (Silverlight Media Player ＆ Media Element)
在 Silverlight 專案中播放視訊和音訊更兩種選擇，可以使用 MediaPlayer 和
MediaElement，前者比較輕巧，表現上優於 MediaElement，而後者是比較重量級 的 Framework Element，可以在 XAML 中宣告使用，支援 Loaded 和 Unloaded 事 件，並可設置開始及結束播放時間、或者在某時間點顯示文字、製作功能按鈕控 制視訊等多種客製化應用，設計人員可以依照自己及客戶需求開發相關的功能及 外觀，在表現上比較多元。
private List<ReadIndexVedioXml> listReadIndexVedioXml = new List<ReadIndexVedioXml>();
Uri Vedioxmlfile = new
Uri("http://localhost:8081/eXist/Index_snapshot/"+ID+"/"+selectedclip+".xml");
WebClient client = new WebClient();
client.DownloadStringCompleted += new
DownloadStringCompletedEventHandler(SearchVedioXmlFileElement);
clientB.DownloadStringAsync(Vedioxmlfile);
//============================================================
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 網頁中。
影片包上傳:提供上傳一系列相關影片的功能，需先將系列影片壓縮成一個 檔案才可做上傳。
影片包上傳:提供上傳一系列相關影片的功能，需先將系列影片壓縮成一個 檔案才可做上傳。