教學影片長久以來都是學習教材中重要的項目，它同時俱有聲音、畫面兩種元素，學習者可以藉由連續的畫面與聲音較輕易地了解原本需要大量文字描述的細節。所以在許多網路學習系統中，總是將影片播放當成重要支援功能，不過，傳統教學影片並無互動設計，學習者開始觀看內容之後，就是單向接受影片資訊，學習過程比較枯燥，在一段時間後就容易失去專注力，造成學習效果不彰。因為傳統教學影片缺乏互動設計，於是現在開始有互動式教學影片的出現，老師可以在教學影片內容之中加入互動事件，比如在教學影片說明一個觀念之後安排一個問題，當學習者觀看影片到這個事件的時間點，系統便會自動出現老師設計的問題，這樣不但可吸引學習者的專注力，而且可以幫助學習重點。本研究蒐集並分析互動式教學影片系統之需求，參考當前相關研究以及同類型系統之功能，建立一個互動式教學影片系統，讓老師能夠利用編輯工具快速的製作互動式教學影片，對於現有中山網路大學的教學影片資源提供轉換介面，使課程中的教學影片能夠快速匯入，並且開發資料交換之網路服務介面，以保留系統互動式教學影片資料與其它數位學習平台整合機會，在系統之評估階段，蒐集使用者回饋意見與分析系統記錄後，適當修改功能與使用者介面，使系統有更佳的可用性與友善性。

Video has been used in education for a long time, it conveys audio and visual elements to learners, helps them to understand the content more easily. Nowadays, with more powerful PCs and higher internet bandwidth, instructional video become a major material in e-learning. However, watching instructional video is an one way behavior, there is no interaction between learner and learning system, learner may lost his/her attention after a period of time. Some interactive video were created in MOOC environment (e.g. Coursera and Udacity), Instructor can design quizzes and arrange them to appear at any specific spot time during the video is played, called in-video quiz or embedded quiz, it also provides real-time feedback to learners once they submit their answer. These quizzes make a traditional video to an interactive video, help learners to know how well they follow the video and more engagement throughout the whole watching process. There are some service providers deliver interactive video service on the internet, besides embedded quiz, other interaction types are also provided, such as audio notes, text messages, white board, etc. This research aims to develop an interactive video lecture authoring system, which is designed to be compatible with NSYSU Cyber University course format, instructors can import the resources from NSYSU Cyber University or manually create a new video lecture easily, In addition, the system provides web services for data exchange with other systems, this data exchange mechanism makes integration possible and data portable. The development adopts MDA approach, to take advantage of its flexibility of PIM and PSM model. The system is tested with tool and users, modifications are made for improvement according to users’ feedback. Some future research issues have also been proposed to conclude this study.

論文審定書 i
致謝 iii
摘要 iv
Abstract v
目錄 vii
圖目錄 xi
表目錄 xiii
第一章、 緒論 1
第一節、 研究背景 1
第二節、 研究動機 2
一、 傳統教學影片的缺點 2
二、 互動功能 3
第三節、 研究目的 4
第四節、 研究範圍 5
第二章、 文獻探討 6
第一節、 教學影片 6
第二節、 互動性 6
第三節、 互動式教學影片 7
第四節、 互動式教學影片網站與工具 8
一、 EDpuzzle 8
二、 Camtasia Studio 8 11
三、 eduCanon 12
四、 Hapyak 13
五、 YouTube 15
第五節、 歸納與整理 17
第三章、 需求分析與功能設計 18
第一節、 需求分析 18
一、 教學影片管理 18
二、 互動試題管理 19
三、 帳號管理 20
四、 歷史資料查詢 21
五、 其它需求 21
第二節、 系統分析與設計 22
一、 需求轉系統分析 22
二、 系統設計 28
三、 系統架構 35
第三節、 系統共用框架 36
一、 Html5 video元件 36
二、 Spring MVC 37
三、 Spring Security 38
四、 RESTFul Web Service 39
第四章、 系統實作 41
第一節、 開發物件類別 41
一、 Web Controller 41
二、 Entity 物件 43
第二節、 第三方元件庫 46
一、 spring upload 46
二、 Html parser 47
三、 jQuery 48
第三節、 網路服務介面 48
第四節、 系統使用者介面 51
一、 教學影片管理 51
二、 互動試題管理 55
三、 帳號管理 56
四、 歷史資料查詢 57
第五章、 系統評估 59
第一節、 系統特性比較 59
第二節、 功能測試與記錄分析 61
一、 系統功能測試 61
二、 系統記錄分析 67
第三節、 使用者評估 69
第六章、 結論 79
第一節、 研究結果 79
第二節、 研究貢獻 80
第三節、 未來研究方向 81
參考文獻 83
一、 中文部份 83
二、 英文部份 84
附錄 86
附錄一、系統操作手冊 86
附錄二、Selenium IDE 測試個案範例與執行結果 112
附錄三、課程匯入、匯出網路服務WSDL 118
附錄四、課程匯入、匯出網路服務資料格式 121
附錄五、系統安裝手冊 122

一、 中文部份
吳仁和（2012）。物件導向系統分析與設計-結合MDA與UML, 4rd Edition,台北，智勝文化。
高啟洲、唐璽惠、詹明惠，(2005)，互動式數位學習系統之設計，南大學報，第39卷，第1期，頁111-132。
陳年興、楊錦潭(2006)。數位學習理論與實務。台北，博碩文化。
顏永森, 胡., 柯天盛. (2010). 數位學習注意力對學習成效影響之研究. T&D飛訊第112期, 21.

二、 英文部份
Brecht, H. & Ogilby, S. (2008). Enabling a Comprehensive Teaching Strategy: Video Lectures. Journal of Information Technology Education: Innovations in Practice, 7(1), 71-86.
Camtasia Studio 8 Tutorials. (n.d.). Retrieved July 7, 2014, from TechSmith website, http://www.techsmith.com/tutorial-camtasia-8.html.
Cool, E. (2014, July 7). Youtube New Video Questions Editor[YouTube] , Retrieved from http://www.youtube.com/watch?v=1V9snPMWhbs.
Corporation for Public Broadcasting, W., DC. (1997). Study of School Uses of Television and Video. 1996-1997 School Year Summary Report., 32.
Du, Y. (2014). Massive Open Online Course: The Implication to iSchool Education. doi: 10.9776/14296
EDpuzzle. (n.d.). Retrieved July 7, 2014, from EDpuzzle website, https://www.edpuzzle.com/.
eduCanon. (n.d.). Retrieved July 7, 2014, from eduCanon website, https://www.educanon.com/
Giannakos, M. N. (2013). Exploring the video-based learning research: A review of the literature. British Journal of Educational Technology, 44(6), E191-E195.
Hapyak. (n.d.). Retrieved July 7, 2014, from hapyak website, http://corp.hapyak.com/.
Lindsay, P. H., & Norman, D. A. (1977). Human information processing an introduction to psychology. New York: Academic Press.
Merrill D, Li Z, and Jones, M. K. (199１). Second generation　instructional design. Educational Technology, 30(2), 7-14.
Milheim, W. D. and Martin, B. L. （1991）. Theoretical bases for the use of learner control： three different perspectives. Journal of Computer-based Instruction, 18（3）, 99-105.
Prashant, Sarika Gupta. (2012). Simplifying Use Case Models Using CRUD Patterns. International Journal of Soft Computing and Engineering (IJSCE), 2(2) , 104-106.
P. Mitros, K. Afridi, G. Sussman, C. Terman, J. White, L. Fischer, and A. Agarwal (2013), Teaching Electronic Circuits Online: Lessons from MITx’s 6.002x on edX, International Symposium on Circuits and Systems (ISCAS). Beijing, China: IEEE
Sadallah, M., O. Aubert, and Y. Pri_e: 2011, `Component-based Hypervideo Model: high-level operational speci_cation of hypervideos'. In: ACM (ed.): Document Engineering 2011 (DocEng 2011). pp. 53-56.
What are in-video quizzes? Do in-video quizzes count toward my grade?. (n.d.). Retrieved July 7, 2014, from Coursera website, http://help.coursera.org/customer/portal/articles/1159100-what-are-in-video-quizzes-do-in-video-quizzes-count-toward-my-grade-.
Wylie, J. (December 28, 2013). How to Add Questions for Students to YouTube Videos [Web log post]. Retrieved from http://jonathanwylie.com/2013/12/28/how-to-add-questions-for-students-to-youtube-videos/.
Interactive video in YouTube (n.d.). Retrieved July 7, 2014, from Wikipedia website, http://en.wikipedia.org/wiki/Interactive_video#Interactive_video_in_YouTube.
Hypervideo (n.d.). Retrieved July 7, 2014, from Wikipedia website, http://en.wikipedia.org/wiki/Hypervideo.
Zhang, D., Zhou, L., Briggs, R. O., & Nunamaker, J. F. (2006). Instructional video in e-learning: Assessing the impact of interactive video on learning effectiveness. Information & Management, 43(1), 15-27.