第五章 結論與未來發展
程式碼 3- 2:OpenCV 圖片比對範例
圖 3-7 圖片差異比對(完全相同圖片)
for(int i=0;i<240;i++) for(int j=0;j<320;j++) {
} <price>30.00</price>
</book>
<book category="CHILDREN">
<title lang="en">Harry Potter</title>
<author>J K. Rowling</author>
<year>2005</year>
<price>29.99</price>
</book>
</bookstore>
圖 3-8 圖片差異比對(差異較大圖片)
5. 統計差異超過門檻值的像素個數：當差異超過門檻值的像素大於整個畫面的 一定比例時，即認為場景發生改變，就會把這個場景改變的時間點當作片段 的一個分段點，也就是一個片段的開始或結束，在本研究中所測試的結果來 說，兩個畫面大約在 60%~70%的像素差異超過門檻值，來當作場景的轉換 畫面是一個比較恰當的比例。
3.3 HTML5 影片瀏覽系統
近年來智慧型手機和平板電腦這些行動裝置的普及率越來越高，功能也越來 越強，扣除掉一些較吃硬體效能的功能(例如玩畫面較精緻的遊戲)，這些行動裝 置已經可以做到大部分一般人使用電腦時所做的事情。因為目前主流行動裝置上
預設的瀏覽器都能夠支援 HTML5，並且 iOS 和 Android 這兩大作業系統也宣布 未來不會再支援 Flash，因此本研究選擇使用 HTML5 配合 JavaScript 以及 CSS 來設計整個影片瀏覽系統。
3.3.1 HTML5 影片瀏覽系統系統架構
圖 3-9 HTML5 影片瀏覽系統架構
如圖 3-9，在搜尋頁面所得到之搜尋結果以及使用者選取個人的影片清單，
會傳送至 HTML5 影片瀏覽頁面進行瀏覽。影片瀏覽頁面主要分成兩個部分，影 片播放頁面與片段播放頁面，影片播放頁面也可以跳轉到現正播放影片的片段播 放頁面，此時片段播放頁面會顯示出現正播放影片現有的所有片段，以下小節為 HTML5 影片瀏覽系統所有功能的詳細介紹。
3.3.2 HTML5 影片瀏覽頁面介紹
圖 3-10 影片瀏覽頁面
如圖 3-10，影片瀏覽頁面主要分成數個功能及區塊：影片瀏覽視窗、搜尋結果區 塊、影片資訊區塊以及新增至清單、新增片段和片段播放三個功能。系統使用流 程如下：
1. 在 JSP 頁面搜尋到的結果傳到影片瀏覽頁面後，使用者可以在搜尋結果區塊 點擊想要觀賞的影片截圖，點選之後，上方的影片瀏覽視窗就會將影片載入，
使用者就可以點擊播放鍵播放影片，另外下方的影片資訊區塊也會顯示出該 影片的相關資訊。
2. 使用者如果想要將影片記錄下來供日後瀏覽，點擊新增至清單的按鈕，系統 就會將影片加入到目前所登入的帳號下的影片清單，之後只要在 JSP 頁面使 用影片清單的功能，就會看到所記錄的全部影片。
3. 使用者可以在此頁面進行片段的新增，只要點擊新增片段的按鈕，頁面會跳 出多個輸入欄位，依照影片類別的不同，每個輸入欄位要輸入的資訊也會不 同，使用者輸入完畢之後，系統會將所輸入的片段資訊存成 XML 檔案，並 存入 eXist 資料庫中。
4. 如果想要瀏覽或修改目前播放影片的所有片段，可以透過點擊片段播放的按 鈕，頁面便會跳至片段播放頁面，即可進行片段的瀏覽或修改。
圖 3-11 片段瀏覽頁面
如圖 3-11，片段瀏覽頁面格式和影片瀏覽頁面非常相似，主要分成數個功能 及區塊：片段瀏覽視窗、搜尋結果區塊、片段資訊區塊以及播放片段、修改片段、
刪除片段和回主畫面四個功能。系統使用流程如下：
1. 在 JSP 頁面進行關鍵字的搜尋或在影片瀏覽頁面使用片段播放功能，頁面都 會跳至片段瀏覽頁面，使用者可以在搜尋結果區塊點擊想要觀賞的片段截圖，
點選之後，上方的片段瀏覽視窗就會將影片載入，使用者只要點擊播放片段 按鈕就可以進行片段的瀏覽，另外下方的影片資訊區塊也會顯示出該片段的 相關資訊。
2. 使用者如果認為片段的相關資訊和片段內容有出入需要修改，只要點擊修改 片段的按鈕，頁面會跳出和新增片段時相同的數個輸入欄位，使用者只需要 輸入正確的片段資訊並點擊送出按鈕，系統便會將修改過的片段相關資訊，
傳至 JSP 修改頁面，然後在 eXist 資料庫中找到此片段相關資訊之 XML 檔 案，並且進行修改。
3. 使用者可以在此頁面進行片段的刪除，只要點擊刪除片段的按鈕，頁面會將 片段名稱傳至 JSP 刪除頁面，然後在 eXist 資料庫中找到此片段相關資訊之
XML 檔案，並且進行刪除，如此就可以將使用者認為比較多餘或者不重要 的片段刪除。
4. 下方有一個回主畫面的按鈕，使用者點擊之後頁面便會跳至目前播放片段的 影片瀏覽頁面，進行完整影片的瀏覽。
3.3.3 HTML5 影片瀏覽系統內部技術
本研究中的影片瀏覽系統是利用 HTML5+JavaScript+CSS 製作而成，HTML5 是整個網頁的主架構，包括影片瀏覽視窗、片段資訊區塊、搜尋結果區塊都是由
HTML 的語法所設計的。CSS 則是設計了整個網頁的版面，包括文字、圖片的 位置和大小、各個區塊的位置等等。整個影片瀏覽系統中最重要的就是 JavaScript 的部分，因為和 JSP 主頁面的連結全部都是利用 JavaScript 進行互動，包括最基 本的讀取 XML 檔案、接收搜尋頁面的結果、傳送資料回到 JSP 頁面等等，等於 是整個瀏覽系統的靈魂，以下會介紹這些技術是如何完成的。
1. 影片瀏覽頁面版面配置
除了系統功能之外，頁面中版面的配置及美化對一個系統來說也是很重要的，
會直接影響到使用者的使用意願和使用經驗。上一小節中有介紹整個影片瀏覽頁 面的版面配置圖，有關於版面的設計是利用 CSS 的語法所設計出來的，在本系 統中，有用到的功能大概是限制每個區塊位置及邊界、影片瀏覽視窗大小、所有 和文字相關的控制(大小、顏色、位置等等) 以及背景的顏色等等，相關的程式 碼範例如下：