行動視訊播放與管理系統

全文

(1)國立臺灣師範大學資訊工程研究所碩士論文. 指導教授：葉耀明博士. 行動視訊播放與管理系統 A Playback and Management System for Mobile Video. 研究生：鄭皓中. 撰. 中華民國 102 年 06 月. i.

(2) 摘要. 行動視訊播放與管理系統鄭皓中近年由於線上分享影音資訊快速的發展，線上教學也成為了各方面資訊學習非常熱門的方式。雖然在網路上瀏覽影片很方便，但是只限於完整影片的搜尋，在網路上到處可見數十分鐘長的影片，如果只想觀看影片的特定片段，或是從中間某個場景開始瀏覽，就要花上不少時間在尋找正確的時間點上，例如耗費許多額外的時間從頭觀賞或者是直接點選時間條。本研究主要以 HTML5、JSP、XML、eXist、NFC 等技術實現行動視訊播放與管理系統。利用 OpenCV 來分析影片內容，找出關鍵畫面並做為影片的分段點，自動為整部影片分割成多個片段，系統依照影片類別，要求使用者輸入和此類別相關的片段資料並以 XML 的格式儲存相關資訊，並以原生 XML 資料庫 eXist 儲存 XML 文件，並且利用 XQuery 查詢語言查詢資料庫中影片及片段內容，讓使用者能夠快速地找到想要瀏覽的影片內容，例如運動影片的精彩畫面或是英語教學影片中的特定授課內容、角色對話，增加使用者瀏覽影片的效率。我們使用 HTML5、 CSS、JavaScript 設計出影片的瀏覽頁面，在不需要額外安裝任何的附加元件情況下就能夠正常的播放影片內容，能夠提供使用者無論是行動裝置或是個人電腦都有一個良好的瀏覽環境。另外本系統透過與 NFC 技術結合，感應不同的場所以及不同功能的 tag，產生出更多樣化的用途。 (關鍵詞: HTML5、XML、影音分享、影片分段、智慧型手機、NFC). ii.

(3) ABSTRACT A Playback and Management System for Mobile Video by Hao-Zhong Zheng Due to the fast development of sharing audio and video contents online in recent years，teaching online also becomes a popular way of information learning. Although watching videos on the Internet is very convenient, but only in Full video searching，on the Internet a lot of videos the duration is tens of minutes, if the viewer only want to watch a particular clip，it will spend a lot of time to search the right way，for example， you should watch the video from Beginning or click the time line directly. In this thesis，we use HTML5、 JSP、 XML、 eXist and NFC to develop the Playing and Management system for Mobile Video. we use OpenCV to analyze video contents, find the key frame and be the time of video segmentation, and split the whole video into multiple segments automatically, the system follows the video category, allow users to enter the relevant data and store the data use XML format. we use the native XML database eXist to store XML documents, and use XQuery to query the data of videos and segments, so users can find the video or segment they want to watch such as highlights of sport video and specific contents and dialogues of English teaching video, increase the efficiency of watching videos. We use HTML5、CSS and JavaScript to design the movie watching page，so it can play video without install any additional add-ons，provide users a good environment whether use mobile device users or personal computer. In addition our system combine with NFC technology to produce more applications by touch the tags of different functions at different places.. (keywords: HTML5、XML、video sharing、split video、Smart Phone、NFC) iii.

(4) 誌. 謝. 兩年的研究所生涯很快就要結束了，這兩年間在 XML 實驗室學到了許多東西，讓我順利的完成本論文。非常感謝我的指導教授. 葉耀明老師，除了在課堂. 上傳授給我們許多寶貴的知識外，在我的研究上也給了我很多的啟發和方向。也非常感謝老師交給我們負責的許多計畫，在參與計畫的過程中，除了專業知識的增加外，也獲得了許多和其他人溝通的經驗以及做人處事的態度。感謝張芳仁老師、呂永和老師擔任我的口試委員，在我口試時提供了許多寶貴的意見，指出我論文中的缺失以及遺漏，讓我有一個能夠修正的方向。感謝實驗室同學，哲維、昱賢、隘同、書銘、志忠、禮衛、文寬和雨曄，在課業、研究、計畫上的互相幫忙，以及在閒暇之餘結伴一起運動，讓我在這兩年的研究所生活中不枯燥乏味，在學習的過程中也少了許多自己盲目摸索的時間；也感謝學長姐，瀧濱、芝華、惠迪、永倫、冠緯、明憲、慶瑞、孝倫、韋德和鏞年在我碩一什麼都還不甚了解時的細心帶領，還有感謝學弟妹，馨民、名甫、念學、. 聖儒、清晏、奐均、和醇洋對於實驗室計畫上面的協助，讓我可以更專心的完成我的論文。最後要感謝我的家人，支持我攻讀碩士，讓我能專心一意的完成碩士學位，以及我的好朋友們在我課業壓力較大時的陪伴，放鬆了我的心情，讓我在轉換心情後能夠全心全力完成我的研究，在此對以上所有人獻上我最誠摯的感謝。. 鄭皓中謹誌國立臺灣示範大學資訊工程研究所民國 102 年 7 月 iv.

(5) 目錄第一章 1.1 1.2 1.3 第二章. 緒論............................................................................................................. 1 研究背景..................................................................................................... 1 研究動機與目的......................................................................................... 2 論文架構..................................................................................................... 3 文獻探討..................................................................................................... 5. 2.1. XML ............................................................................................................ 5 2.1.1 XML 簡介 ....................................................................................... 5. 2.1.2 XML 應用領域 ............................................................................... 5 2.2 XML 原生資料庫:eXist ............................................................................. 6 2.3 都柏林核心................................................................................................. 7 2.4. OpenCV ...................................................................................................... 9 2.3.1 OpenCV 簡介 ................................................................................. 9 2.3.2 OpenCV 可應用領域 ..................................................................... 9. 2.5. HTML5 ..................................................................................................... 11 2.4.1 HTML5 簡介 ................................................................................ 11 2.4.2 HTML5 新元素介紹 .................................................................... 12. 2.6 2.7. JavaScript .................................................................................................. 16 智慧型手機（Smart Phone） .................................................................. 17. NFC ........................................................................................................... 19 行動視訊播放與管理系統之系統規劃................................................... 21 行動視訊播放與管理系統架構............................................................... 22 自動與手動影片分段............................................................................... 23 3.3.1 影片構成要素及原理................................................................... 24 3.3.2 自動與手動分段流程................................................................... 27 3.3.3 影片自動分段處理方法............................................................... 28 3.3 HTML5 影片瀏覽系統 ............................................................................ 31. 2.8 第三章 3.1 3.2. 3.3.1 HTML5 影片瀏覽系統系統架構 ................................................ 32 3.3.2 HTML5 影片瀏覽頁面介紹 ........................................................ 33 3.3.3 HTML5 影片瀏覽系統內部技術 ................................................ 36 3.4 片段查詢方法........................................................................................... 42 3.4.1 XQuery 簡介 ................................................................................. 42 3.3.2 XQuery 語法 ................................................................................. 43 3.3.3 XQuery 查詢片段流程及方法 ..................................................... 45 第四章系統實現................................................................................................... 47 4.1. 系統架構與建置....................................................................................... 47. 4.2. 系統功能及流程....................................................................................... 49 v.

(6) 4.2.1 使用案例圖（Use Case Diagram）............................................. 49 4.2.2 循序圖(Sequence Diagram) ........................................................ 51 4.3 系統實際呈現........................................................................................... 55 4.3.1 影片上傳....................................................................................... 55 4.3.2 影片查詢....................................................................................... 57 4.3.3 新增片段....................................................................................... 59 4.3.4 片段查詢....................................................................................... 59 4.3.5 影片清單....................................................................................... 61 4.3.6 影片字幕....................................................................................... 62 4.3.7 系統與 NFC 之結合 ..................................................................... 63 第五章結論與未來發展....................................................................................... 66 5.1 結論........................................................................................................... 66 5.2 未來發展................................................................................................... 67 參考文獻....................................................................................................................... 68. vi.

(7) 圖目錄圖圖圖圖圖圖圖. 2-1:XML 家族與技術平台 ...................................................................... 6 2-2:影片分段流程 .................................................................................. 11 2-3:2012 第三季手機市占率調查 ........................................................ 19 3-1:新舊功能比較圖 .............................................................................. 22 3-2:行動視訊播放與管理系統功能圖 .................................................. 22 3-3:XML 檔案上傳資料庫流程圖 ........................................................ 23 3-4:高解析度與低解析度圖片對照(高解析度) ................................... 25. 圖圖圖圖圖圖圖圖圖. 3-5:高解析度與低解析度圖片對照(低解析度) ................................... 26 3-6:圖片灰階化 ...................................................................................... 29 3-7:圖片差異比對(完全相同圖片) ....................................................... 30 3-8:圖片差異比對(差異較大圖片) ....................................................... 31 3-9:HTML5 影片瀏覽系統架構 ............................................................ 32 3-10:影片瀏覽頁面 ................................................................................ 33 3-11:片段瀏覽頁面 ................................................................................ 34 3-12:影片與片段查詢流程 .................................................................... 46 4-1:系統架構圖 ...................................................................................... 47. 圖圖圖圖圖圖圖圖圖圖. 4-2:使用案例圖 ...................................................................................... 49 4-3:影片上傳功能循序圖 ...................................................................... 51 4-4:新增片段功能循序圖 ...................................................................... 52 4-5:影片查詢功能循序圖 ...................................................................... 53 4-6:片段查詢功能循序圖 ...................................................................... 53 4-7:修改片段功能循序圖 ...................................................................... 54 4-8:影片清單功能循序圖 ...................................................................... 55 4-9:影片上傳頁面 .................................................................................. 56 4-10:影片資訊上傳至資料庫 ................................................................ 56 4-11:自動分段後的片段瀏覽頁面 ........................................................ 57. 圖圖圖圖圖圖圖圖. 4-12:影片查詢頁面 ................................................................................ 58 4-13:影片瀏覽頁面 ................................................................................ 58 4-14:不同類別影片新增片段輸入資訊差異 ........................................ 59 4-15:片段查詢頁面 ................................................................................ 60 4-16:片段查詢結果瀏覽 ........................................................................ 60 4-17:使用者登入頁面 ............................................................................ 61 4-18:影片清單瀏覽頁面 ........................................................................ 62 4-19:影片字幕呈現 ................................................................................ 63. 圖 4-20:利用感應 NFC tag 列出所有運動相關影片 ................................ 64 圖 4-21:利用感應 NFC tag 列出所有英語教學相關影片 ........................ 64 vii.

(8) 圖 4-22:感應 NFC tag 查詢影片-利用影片上傳者查詢 .......................... 65 圖 4-23:感應 NFC tag 查詢影片-利用影片來源查詢 .............................. 65. viii.

(9) 表目錄表表表表. 2-1:都柏林核心所有元素 ........................................................................ 8 2-2:HTML5 影片播放支援的格式 ........................................................ 13 2-3:HTML5 新增標籤列表 .................................................................... 14 4-1:系統環境建置列表 .......................................................................... 49. ix.

(10) 程式碼目錄程式碼程式碼程式碼程式碼程式碼程式碼程式碼. 2-1:HTML5<video>標籤使用範例 ............................................... 12 2-2:JavaScript 例外處理範例 ........................................................ 16 2-3:JavaScript 動態修改 HTML 元素範例 ................................... 17 2-4:HTML 網頁載入 JavaScript 檔案 ........................................... 17 3-1:OpenCV 灰階化範例 ............................................................... 29 3-2:OpenCV 圖片比對範例 ........................................................... 30 3-3:CSS 設計語法範例 .................................................................. 37. 程式碼程式碼程式碼程式碼程式碼程式碼程式碼程式碼程式碼. 3-4:JavaScript 讀取 XML 檔案範例.............................................. 38 3-5:JavaScript 讀取 XML 檔案中標籤範例.................................. 39 3-6:JavaScript 控制影片目前時間範例 ........................................ 40 3-7:JavaScript 控制影片字幕範例 ................................................ 41 3-8:JDOM 編輯 XML 檔案範例 ................................................... 42 3-9:刪除資料庫中 XML 檔案範例 ............................................... 42 3-10:XQuery 查詢範例之 XML 檔案 ........................................... 45 3-11:XQuery 查詢 XML 標籤範例 ............................................... 45 3-12:XQuery FLWOR 運算式使用範例........................................ 46. 程式碼 3-13:XQuery 條件運算式使用範例 .............................................. 46 程式碼 3-14:XQuery 關鍵字查詢範例 ...................................................... 47. x.

(11) 第一章緒論 1.1 研究背景近年來隨著資訊科技快速的發展，使得網路和電腦提供了人們各式各樣方便、快速的功能，使得現在大多數人們的日常生活已經和電腦、手機等 3C 產品息息相關，電腦在人們的各個領域，例如工作、學習、休閒...等已經成為不可或缺的工具，網路分享資訊很方便，大多數使用者的頻寬也很足夠，線上教學成為了各方面資訊學習非常熱門的方式，在網路上找的到許多的教學影片，例如語言學習、電腦相關學習、甚至是部份補習班也有線上觀看教學影片的服務。由於多媒體技術的蓬勃發展以及網路儲存空間日漸增加，因此線上分享影音資訊已經變得非常容易，網路上就有許多影音分享的平台提供人們進行瀏覽、分享，根據 Alexa 的排名，全球最大的影音分享平台 YouTube 已經成為全球第三大網站，僅次於 Google 和 Facebook[5]，代表瀏覽、分享影音資訊已經成為大多數人們使用網路的一部分了。最近幾年智慧型手機也是發展非常快速的一項 3C 產品，到這兩年已經是幾乎人手一隻，功能也越來越強大，結合了傳統手機和個人電腦的功能，因此也能夠隨時隨地的連結網際網路從事各種活動，例如瀏覽網頁、玩遊戲、收發郵件... 等等，當然也可以連結到影音分享平台進行瀏覽、分享。HTML5 是 HTML(HyperText Markup Language，超文件標示語言)的最新版本，其中有一項最重要的新增語法<video>，可以讓 HTML5 格式的網頁在不增加任何附加元件 1.

(12) 的情況下播放影片，這對於目前市面上有不只一種熱門作業系統的智慧型手機來說，HTML5 是非常適合用來做為影音分享平台的網頁撰寫格式。近年來由於行動裝置的硬體效能越來越強，無線網路的覆蓋率、頻寬也越來越高，有關於行動影音方面的應用也越來越廣泛。智慧型手機或平板電腦近期出的機種都已經可以觀看 1080p 的高畫質影片，網路上也出現越來越多 1080p 的影片可供觀賞，而且因為智慧型手機的螢幕也是越做越大，因此最近在路上常常會看到有人在利用手機觀看電視節目，例如韓劇、綜藝節目等等，代表著目前的行動裝置都可以當做是一個非常好的影音瀏覽裝置。. 1.2 研究動機與目的由於目前影音分享技術的蓬勃發展，任何人在網路上瀏覽影片都變得非常方便，但是這只限於完整影片的搜尋，在影音分享平台或是線上教學的單位，到處可見數十分鐘長的影片，如果只想觀看影片的特定片段，或是從中間某個場景開始瀏覽，就要花上不少時間在尋找正確的時間點上，尤其是教學影片，時間通常都有蠻長的時間，但是學生可能一次不想看完全部，或者是只想觀看某個部份的教學時，會顯得比較不方便，如果可以分析整部影片，找出影片內的各個主題，為影片分段，並且擷取關鍵畫面作為縮圖，最後為片段建立詳細的描述，就可以輕鬆的為整部教學影片分割成多個適當的章節，學生只需要根據關鍵字搜尋，就可以快速的瀏覽教學影片的內容，減少尋找欲觀看內容的時間，大大的增加學生學習以及一般使用者觀看影片的效率。 2.

(13) 在一般的影音分享平台，使用者如果想從影片中某個特別的主題或場景來觀看，必須耗費許多額外的時間從頭觀賞或者是直接點選時間條，但直接點選時間條因為不知道確切的時間而必須經過多次的點選才能夠找到想看的地方，本系統不僅提供使用者上傳、瀏覽影片的功能，也能夠替使用者在上傳影片時，分析整部影片，找出影片中的關鍵場景，為影片做自動分段，分段後使用者可以依照影片上傳時所選定的類別，為片段做不同並且適當的描述，當然使用者也可以自己為影片做手動分段的工作。本系統使用了 HTML 的最新版本 HTML5 來開發使用者介面，目的就是為了目前在全世界普及率極高的智慧型手機，讓使用者利用智慧型手機，就可以不需安裝任何附加元件，順利的瀏覽本系統。另外與 NFC （Near Field Communication，近場通訊）技術做結合，可以透過標籤感應的方式使用本系統，例如在運動場館設置的 NFCtag，使用支援 NFC 的裝置作感應，手機會自動切換至列出所有運動相關影片的頁面；或者是感應在展覽館中設置的 NFCtag，會自動播放介紹影片等等，讓本系統的應用更佳豐富。. 1.3 論文架構本論文一共分成五個章節第一章緒論: 介紹研究背景、研究動機與目的、論文架構。第二章文獻探討: 介紹研究進行及系統開發時，會用到的相關知識或參考內容。包括 HTML5、 3.

(14) Javasvript、XML 延伸標記語言、eXist 原生資料庫、OpenCV 及智慧型手機。第三章行動視訊播放與管理系統之系統規劃: 系統架構規劃，包含各項功能分析與方法。第四章系統實現: 詳細敘述環境建置、系統架構實現、各項功能運作流程、系統實際呈現。第五章結論與未來發展: 總結系統特色及成果，以及探討未來發展性與能夠改進部分。. 4.

(15) 第二章文獻探討 2.1 XML. 2.1.1. XML 簡介. XML(Extensible Markup Language，可擴展標記語言)，1995 年開始有其雛形，並向 W3C 提案，在 1998 年成為 W3C 所推出的標準。XML 是一種標記式語言，主要被設計用來傳送及攜帶資料訊息，XML 訂定一個統一的標準，有助於文件內容的宣告，並可符合跨平台的搜尋作業，因此被廣泛用的作為跨平台之間資料的互動。SGML(Standard Generalized Markup Language)是 XML 的前身，因為 SGML 太過於複雜、使用困難(標準手冊就有 500 多頁)，因此將 SGML 精簡化，並依照 HTML 的發展經驗，產生出一套規則嚴謹，但是簡單的描述資料語言:XML。. 2.1.2. XML 應用領域. 現在有許多語言都在使用 XML 來作為資料呈現與傳遞的格式，像是 MathML(Mathematical Markup Language，數學標示語言) ，是用來定義數學式子的標籤，也是一種基於 XML 的標準，除了 MathML 之外還有 W3C 為採用 XML 描述多媒體而提出的建議標準的 SMIL(Synchronized Multimedia Integration Language，同步多媒體集成語言)等，很多標準都被定義出來，使很各個領域之 5.

(16) 間跨平台的資訊交換更為便利。現在有許多開發廠商也開始採用 XML 的格式，例如 Adobe、IBM、微軟、Netscape、Oracle、Sun 等，也有許多市面上熱門的軟體，例如 Microsoft Internet Explorer 和 RealPlayer，也在軟體內部使用 XML 的格式了。. 圖 2-1. XML 家族與技術平台. 2.2 XML 原生資料庫:eXist eXist 是 Wolfgang Meier 公司在 2000 年所設計出的一套資料庫系統[6]，eXist 為一套公開原始碼的 XML 原生資料庫，同時在 2006 年被選為是最佳的 XML 原生資料庫，除了儲存 XML 文件之外，也支援 XQuery 查詢。XQuery 是一種功能強大的 XML 資料查詢語言，被設計用來查詢 XML 格式的資料，XQuery 也算是一種運算式語言，執行 XQuery 就是執行運算式集合，來產生出最後的運算 6.

(17) 結果。 XML 原生資料庫顧名思義就是專門用來儲存 XML 檔案的資料庫，儲存時是以 XML 格式的文件為最基本的單位，而不像其他類型的資料庫，例如關聯式資料庫，關聯式資料庫儲存的方式是將資料存在資料庫欄位中，再透過表之間的關係建構出整個資料庫，因此如果將 XML 格式的文件儲存於關聯式資料庫中，必須透過中介軟體轉換成自身資料庫的儲存方式或者是某些 XML enabled database 自身就能夠進行轉換的工作。但是不論是哪種方式，都會浪費無謂的時間和電腦效能在格式轉換的過程中，而且轉換後的資料需經過正規化並且存放在多重資料表裡，再加上 XML 文件的樹狀階層結構必須用複雜的資料表聯合才能進行查詢，因此會造成查詢時龐大的負擔，因此使用 XML 原生資料庫來儲存 XML 文件，效率會比使用傳統的關聯式資料庫好上許多。. 2.3 都柏林核心都柏林核心是一個致力於規範網路資源描述的國際性元數據(metadata)解決方案[7]，它定義了一個所有網路資源都應遵循並且通用的核心標準，其內容較少，也比較通用，因此得到了其他相關標準的廣泛支持。面向其他類型資源的元數據標準，基本上都兼容於都柏林核心，並對它作了擴展。它已經成為網際網路的正式標準 RFC2413 和美國國家信息標準 Z39．85。都柏林核心規定了基於網路資源的 15 個元素：. 7.

(18) 表 2-1. 都柏林核心所有元素. 元素名稱. 定義. Title. 資源的名稱. Creator. 資源的創建者. Subject. 資源的主題內容. Description. 資源內容的描述信息. Date. 資源生存周期中的一些重大日期. Type. 資源所屬的類別. Format. 資源的格式. Identifier. 資源的唯一識別. Language. 資源的語言類型. Source. 資源的來源. Rights. 資源的版權. Publisher. 正式發佈資源的實體. Contributor. 資源生存期中做出貢獻的實體，如後製者、編輯等。. Relation. 與其他資源的索引關係. Coverage. 資源應用的範圍，包括區域、時間等等. 都柏林核心有以下數個特點： 1.. 通用性：不針對某個特定的學科或領域，支持對任何種類內容的資源進行描述，有助於統一其他內容標準。. 8.

(19) 2.. 可選擇性：對於資源描述的元素並沒有嚴格規定 15 種元素都一定要用到，可以依照資源情況進行增減。. 3.. 可重覆與可修飾性：其所有元素都可重覆使用，解決了多作者或多出版等重覆元素的問題。. 4.. 靈活的可擴展性：提供了精心製作的描述模型(如 MARC 編目)以外的的選擇，既可以嵌入在 HTML(RFC2731)中，也可基於 XML 進行描述。. 2.4 OpenCV. 2.3.1. OpenCV 簡介. OpenCV(Open Source Computer Vision)是一個由 Intel 公司所開發出來的 C/C++語言的 Open Source 圖形演算法的函式庫[8]。包含了 300 多個 C 語言函數的跨平台的中高層 API，可以製做圖片、視訊、矩陣運算、統計、圖論…等等的 C/C++語言程式設計，不依賴其他外部的函式庫，其中大部份的函數用來解決以下領域中的問題，例如人臉辨識、動作分析、物體追蹤、傅立葉轉換和圖像分割等，主要應用在靜態圖片(BMP、JPG、TIF、PNG)和動態 Webcam 的影像處理。. 2.3.2. 1.. OpenCV 可應用領域. 結構與矩陣 OpenCV 提供自定義的資料結構及矩陣，其中最基本的資料結構稱為. IplImage，當對影像進行操作處理時，都必須先轉換成 IplImage 進行，另外有關 9.

(20) 於圖片的存取也提供特有的線性結構，可以加快演算法的進行和編碼轉換工作。 2.. 影像處理 OpenCV 包含許多影像處理的功能，例如色彩轉換、繪圖(線段、圓形、矩. 形、多邊形…等) 、邊緣偵測、高斯計算…等。 3.. 結構化分析當影像進行輪廓處理後，可藉由 OpenCV 函式庫中的分析函數來對影像進行. 處理，如圖形比對、影像內物件擷取、面積測量、輪廓長度測量及物件比對等。 4.. 物體辨識 OpenCV 提供了 eigen objects 及 hidden Markov models 這兩種物件比對技術，. 可針對影像找出關鍵特徵，並進行關鍵特徵的比對，主要可應用於人臉或是其他方面的辨識。 5.. 動作分析與追蹤 OpenCV 不但提供靜態的影像處理，也支援動態的影片處理，主要包括物件. 分析及運動追蹤，OpenCV 能夠處理動態的連續影像，進行場景分離、影像內物件擷取、輪廓描繪等，處理的方式為先將影片切割成多個畫面(frame)，這些畫面都必須先轉換成 OpenCV 的專屬資料格式 IplImage，接下來就能夠進行上述針對影片方面的功能，以本系統為例，將所有畫面轉換成 IplImage 之後，接著不斷的擷取兩張時間相鄰的框架，再將這兩張畫面做畫素的比對，如果畫素差異較大，代表場景做了轉換，就視為影片的分段點，流程如圖 2-2 所示。 10.

(21) 圖 2-2. 影片分段流程. 2.5 HTML5. 2.4.1. HTML5 簡介. HTML5 是 HTML 的最新修訂版本，最主要的目標是取代 HTML 4.01 和 XHTML 1.0。另外，透過 HTML5 和 CSS 以及 JavaScript 的結合，就能夠產生非常豐富並且功能強大的網頁內容，以減少目前非常頻繁的附加元件安裝需求，也就是說目前許多功能強大的網頁內容，都需要額外安裝附加元件才能夠執行，對於使用者來說，是非常不方便而且也有安全性的疑慮。由於目前全台灣智慧型手機的普及率已經有 32%，到 2015 年可能會成長至 56%。但是現在市占率最高的兩種智慧型手機系統 iOS 以及 Andriod 都決定不再支援 Adobe Flash Player， HTML5 的影音播放功能對於智慧型手機來說會越來 11.

(22) 越重要，因此本系統選擇使用 HTML5 撰寫影片索引系統的播放介面，搭配 JavaScript 控制整個網頁的互動、CSS 設計網頁的外觀，讓智慧型手機以及個人電腦的使用者都可以順利的瀏覽本系統。. 2.4.2. HTML5 新元素介紹. HTML5 增加了許多新的標籤，同時也刪除了一些不再需要的標籤，新增加的標籤大概分為以下幾類： 1.. 多媒體元素. <video width="320" height="240" controls="controls"> <source src="movie.ogg" type="video/ogg"> <source src="movie.mp4" type="video/mp4"> Your browser does not support the video tag. </video>. 程式碼 2-1 HTML5<video>標籤使用範例多媒體元素是這次 HTML5 新增的內容中最受矚目的，因為不需要安裝額外的附加元件，就可以在網頁上進行影音內容的播放以及繪圖(圖表或其他圖像) ， <video>和<audio>兩個標籤是用來直接在網頁上播放影片檔和聲音檔，程式碼 2-1 為播放影片內容的程式碼範例，如圖所示，在<video>標籤中不僅可以設定撥放檔案，也能夠同時設定多個路徑，如果瀏覽器不支援第一個路徑，便會撥放第二個，以此類推，對於跨平台、跨瀏覽器的網頁撰寫是非常有幫助，缺點就是整個 HTML5 還在發展中，導致多媒體內容以及瀏覽器的格式支援有限。<canvas>. 12.

(23) 標籤則是用來定義圖形，透過 JavaScript 來控制整個圖像的繪製，是一個繪圖功能很強大的標籤。表 2-2 為 HTML5 影片播放所支援的格式以及各主流瀏覽器支援的情況[16]，其中 MP4 格式也是目前許多市面上熱門的智慧型手機錄影的格式。MP4 格式在瀏覽器的支援上也很良好，iOS 所用的 Safari、Android 所用的 Chrome 以及個人電腦普遍使用的 IE 都有支援，因此本系統非常適合經常使用手機拍攝影片並上傳的使用者。表 2-2 HTML5 影片播放支援的格式格式. IE. Firefox. Opera. Chrome. Safari. Ogg. NO. 3.5+. 10.5+. 5.0+. NO. MP4. 9.0+. NO. NO. 5.0+. 3.0+. WebM. NO. 4.0+. 10.6+. 6.0+. NO. 2.. 表單元素 HTML5 增加了三個新的表單元素，分別是<datalist>、<keygen>、<output>，. <datalist>定義了選項列表，與 <input >標籤配合使用後能夠定義 input 欄位可能的值。<keygen>是提供一種驗證使用者的可靠方法。<keygen>標籤主要是一種 key-pair generator，當使用者提交表單的時候，會產生兩種 key，分別是 private key: 儲存於 client 端，public key:被傳送至 server 端，public key 可用於之後驗證使用者的 client certificate。<output>標籤是用於不同類型的輸出，例如計算結果或者 13.

(24) 是函式的輸出。 3.. 標記元素這類型的標籤主要是讓整個網頁的架構能夠更完整，對網頁設計人員來說，. 可讀性也會更高。例如<article>呈現的是一個獨立的內容，可以是文章、評論等等。<section>呈現的則是一個區塊，像是文章中的一個章節，<footer>則是呈現頁腳，內容包含作者姓名、日期、相關訊息等等。表 2-3 HTML5 新增標籤列表標籤. 說明. <article>. 定義獨立的內容(例如外部文章、評論). <aside>. 定義其所處內容之外的內容， <aside>中內容應與所處內容相關. <audio>. 定義及播放聲音檔. <canvas>. 定義圖形，例如圖表和其他繪圖內容. <command>. 定義命令按鈕，比如單選或是複選按鈕. <datalist>. 定義選項列表，需與 input 搭配使用. <details>. 用於描述文件或文件某個部分的細節. <embed>. 定義嵌入的內容，例如附加元件. <figcaption>. 定義 figure 元素的標題. <figure>. 用於對元素進行組合. 14.

(25) <footer>. 定義 section 或 document 的頁腳，例如作者相關資料、聯絡方式. <header>. 定義文件的頁眉，也就是整個文件的標題. <hgroup>. 用於組合網頁或 section 的標題. <keygen>. 用於生成密鑰，利用 private key 及 public key 來驗證使用者. <mark>. 用於標記特定文字、詞彙. <meter>. 定義一個範圍內的度量衡. <nav>. 定義網站內導航連接的部分. <output>. 定義不同類型的輸出或運算結果. <progress>. 定義任務執行中的進度. <rp>. 定義不支持 ruby 元素之瀏覽器所需要顯示的內容. <rt>. 定義字符(中文注音或其他語言發音)的解釋或發音. <ruby>. 定義 ruby 注釋（中文注音或其他語言發音）. <section>. 定義文件中的區塊或段. <source>. 定義多媒體元素的檔案來源. <summary>. 定義 details 元素的標題. <time>. 定義日期及時間. <video>. 定義及播放影片內容. 15.

(26) 2.6 JavaScript JavaScript 是一種用於 client 端網頁開發的腳本語言，因為 HTML 網頁只能用來描述整個網頁的外觀以及功能，所以如果要在網頁上進行互動或是一些動態的功能，就必須利用到 JavaScript 來進行撰寫，它的主要特點如下: 1.. 是一種直譯式程式語言，代表程式不需要事先進行編譯，可以直接執行，在執行中動態直譯，缺點是如果程式碼中有錯誤，則下面的語言也無法繼續執行，此時就必須用到 try{}catch(){}的語法進行例外處理，如程式碼 2-2 所示。 console.log("a");. //這是正確的. console.log("b");. //這是正確的. console.logg("c");. //這不是正確的，並會到這裡時停下來. console.log("d");. //這是正確的. console.log("e");. //這是正確的. /*解決辦法*/ try{console.log("a");}catch(e){}. //這是正確的. try{console.log("b");}catch(e){}. //這是正確的. try{console.logg("c");}catch(e){}. //這不是正確的，但不會停下來，而是跳過. try{console.log("d");}catch(e){}. //這是正確的. try{console.log("e");}catch(e){}. //這是正確的. 程式碼 2-2 2.. JavaScript 例外處理範例. 主要用於 HTML 頁面添加互動行為，例如嵌入動態文字、對瀏覽器事件作出回應、讀寫 HTML 元素等等功能，如程式碼 2-3 所示，為動態修改<video> 標籤之撥放路徑及預覽圖。. 16.

(27) function displayCD() { myVideo.src="http://140.122.184.34:8081/eXist/XML/"+value+".mp4"; myVideo.poster="http://140.122.184.34:8081/eXist/Snapshot/"+value+".jpg"; }. 程式碼 2-3 3.. JavaScript 動態修改 HTML 元素範例. 通常來說會直接嵌入 HTML 頁面，但有時可能程式碼過多，或者為了增加程式的可讀性或複雜性，會將特定功能的 JavaScript 程式碼獨立分成一個檔案，再由 HTML 檔案進行載入，如程式碼 2-4 所示。. <script type="text/javascript" src="loadxmldoc.js"> </script>. <script type="text/javascript" src="value.js"> </script>. 程式碼 2-4 HTML 網頁載入 JavaScript 檔案對於一個 HTML 網頁來說，如果要設計成一個具有高互動性、功能豐富的網頁，JavaScript 絕對是不可或缺的一個要素。以本系統為例，利用 JavaScript 讀取 server 端的 XML 檔案、動態修改<video>標籤所播放之檔案路徑、動態新增影片片段相關資料等等都是非常重要的功能。. 2.7 智慧型手機（Smart Phone）智慧型手機（Smart Phone）是運算能力及功能比傳統手機更強的手機的統稱，使用者可以隨意在手機內像個人電腦一樣安裝應用程式，所以擁有很豐富的. 17.

(28) 功能，可以不斷擴充。目前智慧型手機最主要的幾個作業系統包括 iOS、Android、 Windows Phone、Symbian、BlackBerry OS 等等，他們之間的應用程式互不兼容，不過大多數熱門的應用程式都會推出多個作業系統的版本。近年來，智慧型手機的發展非常快速，硬體效能也越來越強大，除了一些硬體需求較高的功能，例如玩一些高品質的遊戲或是 3D 繪圖等等，智慧型手機幾乎已經可以當成個人電腦使用。智慧型手機能夠顯示與個人電腦一致的正常網頁、具有良好的操作系統以及使用者介面、也擁有良好的應用程式擴充性(能夠隨時安裝或刪除應用程式) 、能支援多工(一次執行多個程式) 、並且擁有完整的多媒體、郵件、上網功能，能完全取代像 MP3、MP4 和 PDA 這些傳統的設備，因為上述這些特點，智慧型手機能夠代替傳統的個人電腦處理基本的工作需求或是一些其他的事務。根據 Gartner 調查報告指出，2012 年第三季 Android 智慧型手機市占率已經從 2011 年的 52.5％急速成長至 72.4％。全球的智慧型手機出貨量也是爆炸性的成長，從 1.15 億台成長至 1.69 億台[9]，如圖 2-3 所示。. 18.

(29) 圖 2-3. 2012 第三季手機市占率調查. 2.8 NFC NFC( Near Field Communication，近場通訊)是一種短距離的高頻率無線通訊技術，允許有 NFC 晶片的電子設備之間進行點對點資料傳輸。這個技術由 RFID(Radio Frequency Identification，免接觸式射頻識別)演變而來，由 Philips 和 Sony 共同研製開發，是由 RFID 加入互連技術而發展出來的一項新技術。NFC 運作的頻率是 13.56MHz，其最遠感應距離只有 10 公分，超過就無法傳輸；傳輸速度有 106 Kbit/秒、212 Kbit/秒或者 424 Kbit/秒三種[10]。 NFC 主要分為主動和被動兩種讀取模式，主動讀取模式就類似一般的讀卡機，利用 NFC 裝置去讀取 NFC Tag 或是其他的 NFC 裝置；而被動模式就是變成 NFC Tag，需要靠其他的 NFC 裝置來讀取。NFC 的工作模式主要有下面三種模式： 19.

(30) 1. Card mode（卡模式）：這個模式就是相當於一張採用 NFC 技術的 IC 卡，目前所有用 IC 卡所達到的功能，都能用此模式來代替，包括信用卡、悠遊卡、身份辨識卡、門禁管制、車票、門票等等。此種模式下，有一個優點，就是可以通過非接觸讀卡器來供電，即便是裝置（如手機）沒電的情況下也可以工作。. 2. P2P mode（點對點模式）：這個模式可用於兩個具備 NFC 功能的裝置做數據交換，類似紅外線傳輸的方式，只是傳輸距離較短，傳輸配對建立速度較快，傳輸速度也較快。使用方式是將兩個具備 NFC 功能的裝置連結，就能將資料點對點傳輸，常見應用有下載音樂或影片、訊息交換、遊戲互動等等。. 3. Reader/Writer mode（讀卡機模式）：作為非接觸讀卡器使用，例如從海報或是展覽訊息電子標籤上讀取相關資訊，使用者只須要把有 NFC 功能的裝置靠近 NFC Tag，即可讀取 Tag 內的資料。. 20.

(31) 第三章行動視訊播放與管理系統之系統規劃本研究以 HTML、Javascript、CSS 製作高互動的使用者瀏覽系統，搭配 XML、 JSP、C#、eXist 等技術實作的行動視訊播放與管理系統。本章節對行動視訊播放與管理系統之規劃、架構以及開發技術做詳細的介紹，第一節為新舊系統之比較與行動視訊播放與管理系統架構介紹，利用新舊系統比較圖(圖 3-1)，呈現本系統中新增加的功能。另外透過架構圖，清楚表達本系統的結構及運作的過程。第二節為本系統之影片分段模組詳細運作流程及方法描述，包括影片分析以及偵測影片中的場景轉換。第三節為介紹片段查詢模組，在本節中清楚介紹利用 XQuery 語法查詢資料庫中片段的流程及方法。第四節為使用者瀏覽系統介紹，說明如何利用 HTML5、JavaScript、CSS 製作高互動性的瀏覽頁面，以及整個瀏覽系統功能的詳細解說，包括新增和瀏覽片段和存取 eXist 資料庫進行片段的刪除及修改。. 21.

(32) 3.1 行動視訊播放與管理系統架構. 圖 3-1 新舊系統比較圖. 圖 3-2 行動視訊播放與管理系統功能圖如圖 3-2，本系統主要由兩個部分組成，第一個是由許多個 JSP 網頁所組合成的整個系統的入口，使用者可以在此進行使用者登入、影片上傳、影片查詢、片段查詢、影片清單以及影片管理的動作。使用者在上傳影片之後，系統會將上傳時輸入的相關資訊集合成一個 XML 檔案，此 XML 檔案的內容是利用 Dublin 22.

(33) Core 的格式來對影片內容做描述。之後系統會自動將影片依照影片長度切割成數個片段，每個片段都會產生一個 XML 檔案，檔案中會有數個標籤來描述片段的內容，依照影片的分類，會有不同的標籤來描述不同種類的影片，如圖 3-3 所示，所有的 XML 檔案都會儲存在 eXist 資料庫中，使用者可以利用系統中影片查詢和片段查詢的功能快速的找到想要觀看的影片或片段。查詢完畢後會將結果傳送至 HTML5 的頁面做影片的瀏覽，在瀏覽頁面中，使用者可以對片段資訊做新增、修改、刪除的動作，來增加影片的查詢效率和準確度。. 圖 3-3 XML 檔案上傳資料庫流程圖. 3.2 自動與手動影片分段當使用者上傳影片之後，系統會利用自動分段的功能將影片依照長度切割成數個片段，長度越長，就會切割越多片段，切割完畢之後，使用者需要前往瀏覽 23.

(34) 系統中利用片段修改的功能，將切割出來的片段依照影片種類的不同編輯一些相關的資訊，讓其他使用者能夠更快速的找到這些片段，假如自動分段的結果使用者並不滿意，也可以在瀏覽系統中手動進行片段的新增或刪除。自動分段的功能是利用 OpenCV 函式庫對影片進行處理，判斷出場景轉換的時間點，對影片進行切割的動作。. 3.3.1. 影片構成要素及原理. 影片是由許許多多的畫面(frame)所構成的，畫面也就是靜態的圖片，透過連續播放畫面來呈現出我們平常所觀看影片的動態效果。影片的構成要素一般來說有下面幾個部分，這些要素和本研究中影片自動分段功能在處理影片都有著密不可分的關係。 1.. 像素(pixel) 上面提到影片是由許多畫面所構成，那像素就是畫面中最基本的組成單位，. 可以用三原色(紅、綠、藍)構成的 RGB 色域或是青、品紅、黃、黑構成的 CMYK 來做為像素的顯示。在本研究中處理影片時所採用的是 RGB 色域來顯示像素，而每個像素所能表達的顏色多寡取決於像素本身是用多少位元(bit) 來進行呈現 (bpp，bit per pixel)，常見的值有: 8. ‧. 8bpp:由 8 個位元表示色彩，有 256(2 )色，稱「8 位色」。. ‧. 16bpp:65,536(2 )色，稱為高色彩，也稱為「16 位色」。. ‧. 24bpp:1670 萬(2 )色，稱為真色彩，也稱為「24 位色」。. 16. 24. 24.

(35) ‧. 32. 32bpp:32 位色為計算機領域常見的位色，而它所代表的並不是 2 種顏 8. 色，而是在 24 位色上增加了 8 位元(2 =256)的灰階，32 位色也成為真彩色或全彩色。 2.. 解析度(resolution) 解析度主要是用來表示圖片細節的分析能力，解析度越高可以呈現出越細膩. 的色調變化，而圖片的解析度是用像素的數量來決定的，也就是圖片的長度乘上寬度，例如解析度為 1024*768 的圖片，就是代表圖片是由長度有 1024 個像素，寬度有 768 個像素，總共有 1024*768=786432 個像素所組成的。所以一個圖片的解析度越高，檔案也就會越大。在同一個裝置中，解析度越大，所顯示的圖片也越大，這時如果將解析度小的圖片放大成高解析度的圖片，對照下來低解析度的圖片會比高解析度的圖片來的模糊，如圖 3-4、圖 3-5 所示。. 圖 3-4 高解析度與低解析度圖片對照(高解析度). 25.

(36) 圖 3-5 高解析度與低解析度圖片對照(低解析度) 3.. 畫面更新率(frame per second，FPS) 畫面更新率指的是影片播放時,每秒所播放的畫面數，因此 FPS 越高，影片. 也就會越流暢，但是對系統的負擔也會越大。人可以看見影片的動態連貫效果，是因為人類眼睛有視覺暫留的特性，如果要達成最基本的視覺暫留效果大約需要 10 FPS 的速度，我們平常所看的電視，全世界則有 25FPS 和 29.97FPS 兩種標準，電影的部分則是以稍慢的 24FPS 做為拍攝及播放標準。 4.. 影片格式(format) 目前全世界現有的影片格式非常非常多，即使只算比較常見的也有不下十種，. 影片會有許多種影片格式的原因是因為每個格式都是採用不同的編解碼標準，因為影片的資料量較大，為了方便傳送，所以設計出編解碼的方式，來壓縮資料量，以下介紹本系統中所支援的三種影片格式: ‧. MPEG-4: MPEG-4 是專為網路多媒體應用所開發的格式，由於 MPEG-4 26.

(37) 是一個公開的平台，各公司、機構均可以根據 MPEG-4 標準開發不同的格式，市面上有許多採用不同種編碼方式的 MPEG-4，都是由不同的開發商所開發的，因此不一定能播放 MPEG-4 的播放裝置都能播放所有副檔名為.MP4 的檔案。 ‧. Ogg: 是一個免費的影片格式，由 Xiph.Org 基金會所維護，Ogg 並不受到軟體專利的限制，可以納入各個免費和開放原始碼的編解碼器並設計用於有效率地影音串流和處理高品質的數位多媒體。. ‧. WebM:是 Google 公司所贊助開發的影片格式，目標是開發一個開放的、免版權費用的影音檔案格式，WebM 能夠提供高品質的影片壓縮來配合 HTML 5 的影片播放部分使用。. 3.3.2. 自動與手動分段流程. 將影片分段的目的主要是為了讓使用者能夠快速的找到影片中特別的主題或者是精彩的部分，並且讓其他使用者能夠利用關鍵字的搜尋找到這些片段。本系統主要提供了兩種方法來對影片進行切割，找出影片的分段點。第一種是手動的方式，使用者在瀏覽系統中可以為影片新增片段，只要輸入片段的起始和結束時間，以及依照影片類別的不同，輸入片段相關的描述和資訊，系統就會產生片段和存有相關描述和資訊的 XML 檔案。優點在於可以很清楚的找到影片中各個主題或者是最精彩的部分。缺點在於使用者必須完整的瀏覽過影片一次，才能切割出所有的片段，如果影片時間很長，所花費的時間或精力就會 27.

(38) 比較大。第二種就是自動分段的方式，影片上傳之後，系統會自動找出影片中場景轉換的地方，並且設為一個分段點，產生一個片段。優點在於不需要自己花時間為影片分段，系統會自動完成。缺點就是準確度可能會比不上使用者手動的分段，所以使用者有可能要做一些細微的修改，並且片段產生後，XML 檔案中的相關資訊還是需要使用者自己來完成。. 3.3.3. 影片自動分段處理方法. 本系統利用了 OpenCV 函式庫來對影片進行處理，影片自動分段的原理在於，在影片中場景轉換的同時，畫面的變化會特別大，所以系統中就是利用這種特性來找出影片中的分段點。使用者上傳影片之後，系統會將影片切割成許多畫面，然後為了方便比較以及節省效能，系統會將每一個畫面都進行灰階化的轉換，也就是將原本彩色的畫面切換成黑白的畫面，如此一來從原本要比較 RGB 三種色彩的數值轉換成比較單一種色彩的數值就可以了，接著不斷比對相鄰兩個畫面的灰階值的差異，然後系統會依照影片長度的多寡，找出差異最大的數個畫面的時間點，切割成數個片段，以下為詳細的流程說明： 1.. 影片讀取：使用者上傳影片之後，系統立即讀取伺服器中之影片檔案，開始進行處理。. 2.. 畫面擷取：擷取兩張時間相鄰的畫面，然後將擷取出來的.JPG 格式的畫面，轉換成 OpenCV 自定義的資料結構(IplImage)，作進一步的處理。 28.

(39) 3.. 將畫面灰階化：一般來說，擷取出的畫面都是彩色的，也就是以 RGB 三原色所組合成的色彩所構成的畫面，因此如果要直接做兩個畫面的比較，就要比較 RGB 三原色的數值，相對來說麻煩許多，所以系統會將所有畫面轉換成黑白圖片(如圖 3-6)在進行比較，如此一來，只要比較黑白色彩的數值即可，可以節省整個比對的時間和減少對系統的負擔。. 圖 3-6 圖片灰階化. IplImage *image1=cvloadImage(FILENAME,1); IplImage *dst1=cvCreateImage(cvSize(image1->width,image1->height),IPL_DEPTH_8U,1); cvCvtColor(image1,dst1,CV_RGB2GRAY);. 程式碼 3-1. 4.. OpenCV 灰階化範例. 比對畫面差異：如圖 3-7、圖 3-8，灰階化之後，我們將兩張畫面相同位置的像素的灰階值相減，判斷其差異程度，若兩張圖片越相似，則相減後的圖 29.

(40) 片會約接近全黑，兩個像素相減的值會介在 0~255 之間，0 代表此像素完全一樣，255 代表最大的差距(黑與白)，在本研究中，設定約為 30 是一個門檻值(threshold)，大於這個門檻值，就會視為此像素差異度較大。 for(int i=0;i<240;i++) for(int j=0;j<320;j++) { if(cvGet2D(dst1,i,j).val[0]-cvGet2D(dst2,i,j).val[0]<0) {scalar=cvScalarAll(cvGet2D(dst1,i,j).val[0]-cvGet2D(dst2,i,j).val[0]);} else {scalar=cvScalarAll(cvGet2D(dst2,i,j).val[0]-cvGet2D(dst1,i,j).val[0]);} cvSet2D(dst1,i,j,scalar); }. <price>30.00</price>. 程式碼 3-2. </book>. OpenCV 圖片比對範例. <book category="CHILDREN"> <title lang="en">Harry Potter</title> <author>J K. Rowling</author> <year>2005</year> <price>29.99</price> </book>. </bookstore>. 圖 3-7 圖片差異比對(完全相同圖片). 30.

(41) 圖 3-8 圖片差異比對(差異較大圖片). 5.. 統計差異超過門檻值的像素個數：當差異超過門檻值的像素大於整個畫面的一定比例時，即認為場景發生改變，就會把這個場景改變的時間點當作片段的一個分段點，也就是一個片段的開始或結束，在本研究中所測試的結果來說，兩個畫面大約在 60%~70%的像素差異超過門檻值，來當作場景的轉換畫面是一個比較恰當的比例。. 3.3 HTML5 影片瀏覽系統近年來智慧型手機和平板電腦這些行動裝置的普及率越來越高，功能也越來越強，扣除掉一些較吃硬體效能的功能(例如玩畫面較精緻的遊戲)，這些行動裝置已經可以做到大部分一般人使用電腦時所做的事情。因為目前主流行動裝置上 31.

(42) 預設的瀏覽器都能夠支援 HTML5，並且 iOS 和 Android 這兩大作業系統也宣布未來不會再支援 Flash，因此本研究選擇使用 HTML5 配合 JavaScript 以及 CSS 來設計整個影片瀏覽系統。. 3.3.1. HTML5 影片瀏覽系統系統架構. 圖 3-9 HTML5 影片瀏覽系統架構如圖 3-9，在搜尋頁面所得到之搜尋結果以及使用者選取個人的影片清單，會傳送至 HTML5 影片瀏覽頁面進行瀏覽。影片瀏覽頁面主要分成兩個部分，影片播放頁面與片段播放頁面，影片播放頁面也可以跳轉到現正播放影片的片段播放頁面，此時片段播放頁面會顯示出現正播放影片現有的所有片段，以下小節為 HTML5 影片瀏覽系統所有功能的詳細介紹。. 32.

(43) 3.3.2. HTML5 影片瀏覽頁面介紹. 圖 3-10. 影片瀏覽頁面. 如圖 3-10，影片瀏覽頁面主要分成數個功能及區塊：影片瀏覽視窗、搜尋結果區塊、影片資訊區塊以及新增至清單、新增片段和片段播放三個功能。系統使用流程如下： 1.. 在 JSP 頁面搜尋到的結果傳到影片瀏覽頁面後，使用者可以在搜尋結果區塊點擊想要觀賞的影片截圖，點選之後，上方的影片瀏覽視窗就會將影片載入，使用者就可以點擊播放鍵播放影片，另外下方的影片資訊區塊也會顯示出該影片的相關資訊。 33.

(44) 2.. 使用者如果想要將影片記錄下來供日後瀏覽，點擊新增至清單的按鈕，系統就會將影片加入到目前所登入的帳號下的影片清單，之後只要在 JSP 頁面使用影片清單的功能，就會看到所記錄的全部影片。. 3.. 使用者可以在此頁面進行片段的新增，只要點擊新增片段的按鈕，頁面會跳出多個輸入欄位，依照影片類別的不同，每個輸入欄位要輸入的資訊也會不同，使用者輸入完畢之後，系統會將所輸入的片段資訊存成 XML 檔案，並存入 eXist 資料庫中。. 4.. 如果想要瀏覽或修改目前播放影片的所有片段，可以透過點擊片段播放的按鈕，頁面便會跳至片段播放頁面，即可進行片段的瀏覽或修改。. 圖 3-11 片段瀏覽頁面 34.

(45) 如圖 3-11，片段瀏覽頁面格式和影片瀏覽頁面非常相似，主要分成數個功能及區塊：片段瀏覽視窗、搜尋結果區塊、片段資訊區塊以及播放片段、修改片段、刪除片段和回主畫面四個功能。系統使用流程如下： 1.. 在 JSP 頁面進行關鍵字的搜尋或在影片瀏覽頁面使用片段播放功能，頁面都會跳至片段瀏覽頁面，使用者可以在搜尋結果區塊點擊想要觀賞的片段截圖，點選之後，上方的片段瀏覽視窗就會將影片載入，使用者只要點擊播放片段按鈕就可以進行片段的瀏覽，另外下方的影片資訊區塊也會顯示出該片段的相關資訊。. 2.. 使用者如果認為片段的相關資訊和片段內容有出入需要修改，只要點擊修改片段的按鈕，頁面會跳出和新增片段時相同的數個輸入欄位，使用者只需要輸入正確的片段資訊並點擊送出按鈕，系統便會將修改過的片段相關資訊，傳至 JSP 修改頁面，然後在 eXist 資料庫中找到此片段相關資訊之 XML 檔案，並且進行修改。. 3.. 使用者可以在此頁面進行片段的刪除，只要點擊刪除片段的按鈕，頁面會將片段名稱傳至 JSP 刪除頁面，然後在 eXist 資料庫中找到此片段相關資訊之 XML 檔案，並且進行刪除，如此就可以將使用者認為比較多餘或者不重要的片段刪除。. 4.. 下方有一個回主畫面的按鈕，使用者點擊之後頁面便會跳至目前播放片段的影片瀏覽頁面，進行完整影片的瀏覽。 35.

(46) 3.3.3. HTML5 影片瀏覽系統內部技術. 本研究中的影片瀏覽系統是利用 HTML5+JavaScript+CSS 製作而成，HTML5 是整個網頁的主架構，包括影片瀏覽視窗、片段資訊區塊、搜尋結果區塊都是由 HTML 的語法所設計的。CSS 則是設計了整個網頁的版面，包括文字、圖片的位置和大小、各個區塊的位置等等。整個影片瀏覽系統中最重要的就是 JavaScript 的部分，因為和 JSP 主頁面的連結全部都是利用 JavaScript 進行互動，包括最基本的讀取 XML 檔案、接收搜尋頁面的結果、傳送資料回到 JSP 頁面等等，等於是整個瀏覽系統的靈魂，以下會介紹這些技術是如何完成的。 1.. 影片瀏覽頁面版面配置除了系統功能之外，頁面中版面的配置及美化對一個系統來說也是很重要的，. 會直接影響到使用者的使用意願和使用經驗。上一小節中有介紹整個影片瀏覽頁面的版面配置圖，有關於版面的設計是利用 CSS 的語法所設計出來的，在本系統中，有用到的功能大概是限制每個區塊位置及邊界、影片瀏覽視窗大小、所有和文字相關的控制(大小、顏色、位置等等) 以及背景的顏色等等，相關的程式碼範例如下：. 36.

(47) .grid_4 {. #header {. float: left;. display: block;. display: inline;. color: #ddd;. margin-left: 10px;. }. margin-right: 10px;. #header li {. }. margin: 0 0 18px 0;. #header hgroup {. padding: 0 0 0 25px;. width: 940px;. list-style: none;. padding: 27px 10px 0 10px;. background: url(tick.png) 0. display: block;. 4px no-repeat;. position: relative;. }. }. article {. .videos {. margin: 0 auto;. width: 960px;. display: block; position: relative;. position: relative;. width: 940px;. height: 349px;. padding: 24px 10px 0 10px; }. }. 程式碼 3-3. CSS 設計語法範例. 在 CSS 檔案中，可以依照 HTML 檔案中的標籤名稱、標籤中的 id 名稱、標籤中的 class 名稱等等來設計網頁中每個部分，完成整個頁面的呈現。 2.. 讀取 XML 檔案本系統所有儲存的資料除了影片和圖片之外，全部都是 XML 格式的檔案，. 但是純 HTML 網頁是無法讀取 XML 檔案，只能借助 JavaScript 的語法進行讀取，如程式碼 3-4、程式碼 3-5 所示，利用 JavaScript 讀取了 XML 檔案之後，才能將影片或片段的資訊呈現給使用者。. 37.

(48) var xmlhttp1 = new window.XMLHttpRequest(); xmlhttp1.open("GET","http://localhost:8080/exist/rest/db/video/"+value+".xml",false); var xmlDoc1 = xmlhttp1.responseXML; xmltitle=xmlDoc1.getElementsByTagNameNS("dc","title"). //讀取dc:title元素內容. [0].childNodes[0].nodeValue; xmlid=xmlDoc1.getElementsByTagNameNS("dc"," identifier"). //讀取dc:identifier元素內容. [0].childNodes[0].nodeValue; xmlcreator=xmlDoc1.getElementsByTagNameNS("dc"," creator"). //讀取dc:creator元素內容. [0].childNodes[0].nodeValue;. 程式碼 3-4. JavaScript 讀取 XML 檔案範例. function loadXMLDoc(dname) { try //Internet Explorer { xmlDoc=new ActiveXObject("Microsoft.XMLDOM"); } catch(e) { try //Firefox, Mozilla, Opera, etc. { xmlDoc=document.implementation.createDocument("","",null); } catch(e) {alert(e.message)} } try { xmlDoc.async=false; xmlDoc.load(dname); return(xmlDoc); } catch(e) {alert(e.message)} return(null);. }. 程式碼 3-5. JavaScript 讀取 XML 檔案中標籤範例 38.

(49) 3.. HTML5<video>標籤相關應用本系統中有許多功能都是利用到在 HTML5 中新加入的<video>標籤裡面的. 相關功能所完成的，例如片段播放以及影片字幕的功能，這兩個功能在本系統中還是需要 JavaScript 的輔助才能夠完整的使用。片段播放的功能主要是利用 JavaScript 設定影片目前的播放時間來完成的，首先讀取片段資訊中的片段起始時間和片段結束時間，然後將片段起始時間設成目前影片的播放時間，片段就會開始播放，接著利用 JavaScript 的程式碼不斷擷取目前影片播放時間，直到擷取到的時間等於片段結束時間，此時代表片段結束，影片播放停止，如程式碼 3-6 所示：. function playseg() { myVideo.pause(); myVideo.currentTime=begin; alert("片段開始"); myVideo.play(); pauseseg(); } function pauseseg() { if(myVideo.currentTime>=end) { myVideo.pause(); alert("片段結束"); } else setTimeout('pauseseg()',1000); }. 程式碼 3-6. JavaScript 控制影片目前時間範例. 39.

(50) 影片字幕的功能是利用和<video>標籤搭配使用的<track>標籤，<track>標籤可以播放特殊格式的字幕檔案，本系統中是使用.vtt 格式的字幕檔。在 JSP 影片上傳的頁面中，除了選擇要上傳的影片外，也可以選擇要上傳的字幕檔案，如果有上傳字幕檔，影片載入的同時，會利用 JavaScript 的程式碼將影片所對應的字幕檔一起載入，不管在播放影片或者是播放片段時，影片瀏覽視窗中都會有字幕功能的支援，相關的標籤用法如程式碼 3-7 所示： <track id="track1" src="" label="English subtitles" kind="subtitles" srclang="en" default /> <script> var mytrack=document.getElementById("track1"); mytrack.src="http://140.122.184.34:8081/eXist/XML/"+value+".vtt"; </script>. 4.. 程式碼 3-7 片段修改相關功能. JavaScript 控制影片字幕範例. 在本研究中，片段資訊是協助使用者找到想要瀏覽的影片內容的最重要的資訊，但是可能片段產生之後，使用者覺得片段資訊和片段內容不符，或者是系統自動產生的片段，使用者要新增相關資訊，此時都會用到修改片段的功能。片段修改相關功能一共有三個：新增片段、修改片段、刪除片段。新增片段和修改片段都是在瀏覽頁面中輸入欲新增或修改的資料，那這些資料會附加在網址列中，傳送至 JSP 新增片段或修改片段的頁面，取得這些資料後，新增片段會利用一個名為 JDOM 的 API 來新增一個新的 XML 檔案並上傳至 eXist 資料庫。修改片段則是利用 3.3 所介紹的 XQuery 語法來修改 eXist 資料庫中的 XML 檔案，功能相關的程式碼如程式碼 3-8 所示： 40.

(51) Element publisherElement = new Element("publisher");//建立父元素 Document doc = new Document(publisherElement); Element vedioElement = new Element("videoindex"); //建立父元素<videoindex> publisherElement.addContent(vedioElement);. //建立子元素name. Element nameElement = new Element("indexname"); vedioElement.addContent(nameElement.addContent(Name));. //Name為HTML頁面傳送資. 訊之一 Element indexidElement = new Element("id"); vedioElement.addContent(indexidElement.addContent(id));. //id為HTML頁面傳送資訊之. 一 Element timeElement =. new Element("begin");. vedioElement.addContent(timeElement.addContent(Begin));. //Begin為HTML頁面傳送資. 訊之一 Element durationElement =. new Element("end");. 程式碼 3-8 JDOM 編輯 XML 檔案範例 vedioElement.addContent(durationElement.addContent(End)); //End為HTML頁面傳送資訊之一. 刪除片段的功能也是利用網址列來傳送資料讓 JSP 的頁面來完成此功能，刪除片段的功能只需要傳送原影片 id 和片段名稱給 JSP 的刪除頁面，接下來會連接到 eXist 資料庫中，利用所傳送資料，找到此片段並進行刪除，功能相關的程式碼如程式碼 3-9 所示： String xQueryString =id+"-"+name+".xml"; //此字串為資料庫中欲刪除之片段檔案名稱 String URI="xmldb:exist://localhost:8080/exist/xmlrpc"; String driver="org.exist.xmldb.DatabaseImpl"; //eXist對xmldatabase的實作 String collection = "/db/segment";. //initialize database drivers. Class c1=Class.forName(driver);. //1.取得xml database. Database database=(Database)c1.newInstance();//建立c1 Class的新副本 DatabaseManager.registerDatabase(database);. //2.對DatabaseManager作註冊. org.xmldb.api.base.Collection col= org.xmldb.api.DatabaseManager.getCollection(URI+collection);//3.get the collection col.getResource(xQueryString);. //4.獲得欲刪除之XML檔案. col.removeResource(col.getResource(xQueryString)); //5.刪除在eXist資料庫中的XML檔案. 程式碼 3-9. 刪除資料庫中 XML 檔案範例 41.

(52) 3.4 片段查詢方法在影音分享平台裡，影片查詢功能是整個系統中很重要的一個部分，本系統除了有一般影音分享平台都有的影片查詢功能之外，還有設計片段查詢的功能，在一般的影片或者是教學影片中，常常可以看到長度數十分鐘的影片，對一般的使用者來說，很容易會因為影片時間太長，而缺乏將整部影片從頭到尾瀏覽完畢的耐心，這會導致使用者很有可能因此錯過影片中精彩的地方，或者是教學影片中的某些重點，造成學習效率的降低。因此本系統提供一個完整的搜尋功能，使用者可以選擇要搜尋整部影片或者是搜尋影片中的片段，在搜尋片段的頁面中，可以輸入任意的關鍵字，例如單字、句子等等，就可以找到影片中想要瀏覽的個別片段或者是教學上的主題，來增加使用者瀏覽影片的效率以及學習上的效率。片段查詢的功能主要是利用使用者所輸入的關鍵字，在資料庫中所有存有片段資訊的 XML 檔案中找到相符的內容，並且回傳所有搜尋結果至瀏覽系統讓使用者進行片段的瀏覽。本研究中以 XML 原生資料庫：eXist 資料庫來儲存片段資訊的 XML 檔案，再利用專門查詢 XML 檔案的查詢語言 XQuery 作為搜尋片段的語法。. 3.4.1. XQuery 簡介. XQuery 是由 W3C 的 XML Query 工作小組所定義開發的語言，如同關連式資料庫提供的 SQL 查詢語言，XQuery 就是一種專門查詢 XML 檔案資料的查詢 42.

(53) 語言[14]。XQuery 語言是一種路徑運算式（Path Expressions）、FLWOR 運算式、條件運算式、和 XQuery 函數的集合，並且是以 XPath 查詢語言為基礎，加上其他的支援以獲取更佳的反覆運算及排序結果。XQuery 語言有以下特點： 1.. 與其他 W3C 的規格相容. 2.. 可新增、修改 XML 格式檔案. 3.. 可支援多個 XML 檔案的合併查詢. 4.. 可將 XML 檔案輸出成 XHTML 檔案. 5.. 可查詢結構化或半結構化 XML 檔案. 3.3.2. XQuery 語法. <?xml version="1.0" encoding="ISO-8859-1"?> <bookstore> <book category="COOKING"> <title lang="en">Everyday Italian</title> <author>Giada De Laurentiis</author> <year>2005</year> <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>. 程式碼 3-10. XQuery 查詢範例之 XML 檔案. </bookstore>. 1.. 路徑運算式（Path Expressions）: XQuery 使用路徑運算式在 XML 檔案中通過元素進行查詢。下面的範例為路徑運算式用於在程式碼 3-10 中選取所. 43.

(54) 有的 title 元素： doc("books.xml")/bookstore/book/title 程式碼 3-11. XQuery 查詢 XML 標籤範例. 由程式碼 3-11 可獲得以下數據： <title lang="en">Everyday Italian</title> <title lang="en">Harry Potter</title> 2. FLWOR 運算式:XQuery 中的流程控制語法，一個 XQuery 的敘述式為一組 FLWOR，是由 For、Let、Where、Order by 及 Return 子句等結構而成(一個 FLWOR 運算式中不一定要全部都使用到)，並以特定的順序組合而成，以下為 FLWOR 使用範例(以程式碼 3-10 為例)：. for $x in doc("books.xml")/bookstore/book where $x/price>=30 order by $x/title return $x/title 程式碼 3-12. XQuery FLWOR 運算式使用範例. 由程式碼 3-12 可獲得以下數據： <title lang="en"> Everyday Italian</title> for：將 bookstore 元素下的所有 book 元素擷取到名為 $x 的變數中。 where：選取了 book 元素下的 price 元素中數值大於 30 的元素。 order by：定義了查詢結果將根據 title 元素進行排序。 return：規定返回的查詢結果為 title 元素。 44.

(55) 3.. 條件運算式：XQuery 支援 if-then-else 的條件運算式，以下為 if-then-else 條件運算式使用範例(以程式碼 3-10 為例)：列出書籍名稱，如果 book 元素的 category 值為"CHILDREN"，輸出 <child>書本名稱</child>，否則輸出<adult>書本名稱</adult>. for $x in doc("books.xml")/bookstore/book return if ($x/@category="CHILDREN") then <child>{data($x/title)}</child> else <adult>{data($x/title)}</adult>. 程式碼 3-13. XQuery 條件運算式使用範例. 由程式碼 3-13 語法可獲得以下數據： <adult>Everyday Italian</adult> <child>Harry Potter</child>. 3.3.3. XQuery 查詢片段流程及方法. 查詢流程如圖 3-12 所示，使用者在 JSP 查詢頁面中輸入欲進行搜尋之關鍵字，之後查詢語法字串透過 eXist 資料庫官方所提供的 API 轉換成 XQuery 語法，透過 XQuery 語法在 eXist 資料庫中進行搜尋，並將搜尋結果傳至 HTML5 影片瀏覽介面。. 45.

(56) 圖 3-12 影片與片段查詢流程程式碼 3-14 為關鍵字查詢的程式碼範例，尋找 segmentdescription(片段描述) 元素中有包含"dunk"的所有片段資訊 XML 檔案，並回傳原影片 id、 segmentname(片段名稱)。 for $x in collection(/db/segment)//videosegment where contains($x/segmentdescription,"dunk") return (data($x/id), data($x/segmentname)) 程式碼 3-14. XQuery 關鍵字查詢範例. 46.

(57) 第四章系統實現本章共有三節，第一節內容為說明系統架構、系統環境建置，第二節以使用者案例圖及循序圖說明使用情況及系統內部的溝通流程，第三節為系統實際操作畫面。. 4.1 系統架構與建置圖 4-1 為系統架構圖，本系統以 JSP 頁面作為首頁，首先使用者可以進行登入，不登入也可以使用本系統，但是只有影片搜尋及影片、片段瀏覽的功能，使用者進行登入之後，在首頁中提供影片上傳、影片查詢、影片清單、片段查詢的功能，如果進行影片上傳，系統就會和資料庫連線，將影片相關 XML 檔案上傳至資料庫，其他功能會先向資料庫進行查詢，然後切換至 HTML5 瀏覽頁面進行瀏覽。. eXist database. 上傳查詢. 登入. 使用者. 查詢結果. 登入. 上傳. 使用者. 系統首頁登入. 瀏覽頁面使用者. 圖 4-1. 系統架構圖 47.

(58) 本系統的環境建置如表 4-1，以 eXML 原生資料庫 eXist 管理 XML 檔案的上傳、編輯、輸出，以 XML 檔案為單位儲存在資料庫中，保有 XML 檔案的結構，對於管理及存取文件的功能更有效率。由於影片資料數量龐大，在 XML 內部管理的部份，以 Protégé-OWL API[11]所產生的 RDF/OWL 檔案來實現，可將彼此 XML 檔案依類別做連結。對於 XML 文件處理的部份則是使用 JDOM API[12]，將 XML 方便利用 JSP 頁面修改及新增元素，最後再以 XML 的格式輸出。由於 eXist 及 Protégé-OWL 皆以 Java 語言開發，因此需安裝 Java JDK 作為執行環境，而網頁管理部分以 Tomcat 網頁伺服器作為網頁容器。本系統中影片自動分段的功能是利用 OpenCV 函式庫所完成，因此需要建置 ASP .NET(C#)作為影像處理環境。網頁呈現以 JSP 與 HTML5 技術為主，以 JSP 頁面作為系統入口，進行搜尋過後導向 HTML5 頁面瀏覽影片，HTML5 有跨平台的特性，在大部分不論個人電腦、行動裝置的瀏覽器上皆能執行。表 4-1. 系統環境建置列表. 名稱. 版本. 作業系統 Windows Server 2008 r2 Java 環境 Java JDK 6.0 網頁容器 Tomcat5.5.28、IIS7 網頁技術 JSP/Servlet、JavaScript、HTML、CSS、Ajax 資料庫. eXist1.2.6. 開發環境 Notepad++ 程式語言 C#、JSP、Java 其他工具 OpenCV Java API JDOM1.0、eXist、protégé-owl 48.

(59) 4.2 系統功能及流程. 4.2.1. 使用案例圖（Use Case Diagram）行動視訊學習與管理系統. 影片上傳影片處理新增片段使用者. 影片查詢. write eXist database. 片段查詢 read eXist database. 管理者. 影片清單影片瀏覽影片管理. 圖 4-2. 使用案例圖. 本小節利用 UML(United Modeling Language)的概念，從使用者的觀點來描述行為者和使用案例之間互動與關係，包含行為者和使用案例兩個元件，行為者就是不同身分使用系統的腳色，在本系統中的行為者為使用者和系統管理者，使用案例是完成某一特定工作的集合，本系統使用案例為影片上傳、影片處理、讀寫資料庫、新增片段等動作。行為者用人形符號表示，使用案例用橢圓形表示。行為者與使用案例以實線作連接，使用案例之間以虛線單向箭頭作連接。如圖 4-2，本系統功能有影片上傳、新增片段、影片查詢、片段查詢、影片清單、影片瀏覽，上述六個功能為使用者與管理者皆有權限使用，除此之外，還 49.