基于HTML5的微格教學視頻標注系統的設計與實現

黃予　莫永華　何良泉　伍艷蘭

[摘 要] 視頻標注工具（Video Annotation Tool，VAT）在師范生教學技能培訓中的作用日益凸顯。但是，國內外現行的VAT輔助于微格教學，在功能與語言環境上有諸多不盡人意的地方。為此，我們設計開發了新型微格教學視頻標注系統（Microteaching Video Annotation System，MVAS）。該系統采用HTML5作為前臺技術，運用Java+MySQL作為后臺技術框架，以“點”（時間點）、“片”（邏輯切片）為標注對象，把微格教學的反思與評價環節從微觀到中觀再到宏觀層面漸進演繹， 讓師范生對教學技能的改進重點一目了然，快速提升其教學技能水平。該系統也成功地解決了Web視頻“不可寫”的問題，優化了傳統微格教學中的互動、反思和評價環節。系統運行后得到了師生的一致好評。

[關鍵詞] 視頻標注； 微格教學； 邏輯視頻切片； HTML5

[中圖分類號] G434 [文獻標志碼] A

[作者簡介] 黃予（1979—），男，廣西南寧人。講師，主要從事教育技術學理論與實驗研究。E-mail：hy261@126.com。

一、問題的提出

微格教學經過二十多年的發展，經歷了興盛、沉寂、理性認識幾個階段，[1]現已成為培養師范生教學技能的常規方法。微格教學的重要地位促成了其數字化教學環境的日漸成熟，表現為存儲數字化、傳輸網絡化、環境多媒體化、管理信息化等。[2]然而，環境的數字化未能形成其評價主體多元化機制，未能真正挖掘微格教學視頻的內在潛力。

當前優越的網絡環境與多媒體視頻的無縫對接使課堂教學視頻重現活力。視頻案例教學也已成為發展職前教師教學技能的一個新方法。[3]微格教學視頻應物盡其用，使之成為常態化的協作反思的對象；成為教學理論與教學實踐對接的橋梁。作為新手教師，他們常常沒有余力對課堂上的小細節進行觀察，有緊張感的受訓者甚至是腦子一片空白，對教師的點評與學生參與的互評只能是囫圇吞棗，終究形成不了深層次的認同感。能為師范生開發視頻案例庫，供他們通過網絡反復播放微格教學視頻似乎就成了解決問題的關鍵。但是利用“大單元”的未經細化分解的視頻開展教學反思，不具針對性，“教育家應采用科學家分析微分子的方法來作為理解復雜現象的手段”。Web2.0使網絡視頻“可看可寫”，也使瀏覽者擺脫束縛成了網絡視頻編輯者中的一員。這樣的技術背景為基于Web的VAT的成長提供養分，也為教師挖掘微格教學視頻的內在潛力提供了契機。研究表明，VAT可以幫助教師有效地分析與反思教學，[4]深刻地理解課堂教學中學與教的過程。[5]

國內的VAT在理論和開發實踐層面都做了一定的工作。[6][7][8][9][10]就目前的VAT來看，應用于微格教學中仍有許多地方亟待完善：首先，現行的VAT只有時間點標注或者單純的時間片標注，反思渠道偏少；其次，現行的VAT中的標注信息框與視頻播放分離致使信息輸出滯阻。這種信息輸入過程順暢但輸出過程可能會被阻隔的現象，我們稱之為“信息的準雙向流動”。該現象一旦形成，教學反思共享就會受到影響。此外，現行的VAT僅僅提供個人接口，學習者之間無法開展協作反思。教學實踐中的協作反思可以為學習者提供感情支援，消除主體的反思偏差，促進師范生的教學反思走向深化。[11]應用于微格教學的VAT不應把協作反思的功能模塊拒之門外。

國外對視頻標注研究相對成熟，已開發了許多工具，如：VideoAnt、Videotraces、VoiceThread、VideoPaper Builder、iMovie、Video Analysis Tool、Viddler、VAST 等。[12]其中少量工具支持在線功能，部分還需另付費。有些工具即使免費也會有諸多掣肘。此外，具有協作功能的工具偏少，Viddler、VoiceThread和Video Analysis Tool是其中之三，僅Viddler免費，但語言問題仍是大部分學習者短期內無法超越的障礙。總體來看，國外的標注工具已從“單機”到“在線”轉變、從個人反思向協作反思升級、[13]從運用Flash平臺開發到運用HTML5實現的更替， [14]以適應不同用戶的多重需求。

克爾（Kerr）認為，[15]視頻案例是否能夠成功為教學反思服務，要符合以下條件（見表1）。

基于上述問題，我們將以微格教學的切實需求為出發點，引入HTML5技術解決具體問題，以“點”（時間點）、“片”（邏輯切片）為標注對象，構建促進師生互動、生生互動的協作環境。

二、系統的設計與實現

（一）開發環境

本系統的開發工具采用時下流行的MyEclipse8.5。利用它可以對數據庫和J2EE進行開發、發布，對應用程序服務器進行高效整合。MyEclipse8.5是功能豐富的J2EE集成開發環境，包括了完備的編碼、調試、測試和發布功能，并且它完全支持Hibernate、 Struts、 JSF、 CSS、HTML、Javascript、SQL等。

系統后臺框架使用的是優秀的ORM 框架——Hibernate， 由它負責管理數據庫開啟、關閉以及數據庫連接等。Hibernate能讓程序員節約代碼量，將數據訪問封裝起來。它最突出的優點是能幫系統管理數據庫連接和自動生成系統開發需要的實體類甚至接口。搭建Hibernate方法非常簡單，只需要在項目中導入Hibernate的核心包與相應數據庫的連接jar包即可。

數據庫設計先采用PowerDesigner進行數據庫建模，運用MySQL5.5作為數據庫實施工具。MySQL數據庫是一種關系型數據庫，它的突出特點是體積小，操作靈活、快速。它支持標準的SQL語法，最主要的是它源碼開放、成本低。MySQL搭配Apache可組成良好的開發環境。

（二）系統的總體設計

本系統包括三類用戶，即系統管理員、教師、學生。系統管理員用戶可以進行如下操作：系統初始化、設置系統功能開關、導出相關數據、管理用戶權限及信息、刪除教學視頻、刪除標注或切片標注、查詢信息。教師用戶可以進行如下操作：上傳、下載和刪除教學視頻、添加和刪除視頻標注、生成視頻切片、添加和刪除切片標注、分享標注或者切片、評價教學視頻。學生用戶可以進行如下操作：上傳、下載教學視頻和刪除自己上傳的教學視頻、添加和刪除視頻標注、生成視頻切片、添加和刪除切片標注、分享標注或者切片標注。系統還要提供一個公共信息交流的平臺，允許教師、學生、管理員對公共的問題進行討論和交流。整個系統結構如圖1 所示。

（三） 數據庫設計

數據庫設計是建立數據庫及其應用系統的技術，是信息系統設計和開發中的核心技術。為了支持相關程序運行，數據庫設計就變得較復雜且重要起來。在數據庫設計環節，實體之間的聯系和關系模式中的數據依賴、數據表的存儲都需要反復推敲。本系統中包含多個數據表，限于篇幅現僅列出視頻標注表和切片標注信息表，詳見表2、表3。

由于運用視頻字幕承載反思信息，標注信息的呈現必須確保有一個時間段，否則字幕將一閃而過，用戶就無法辨識標注的文字內容。因此，視頻標注數據表中包含了開始與結束時間字段。實踐證明，“開始時間”與“結束時間”的時間差設為3秒較為適中。

三、MVAS的特色

與其他系統相比，MVAS具有自己的特色，主要體現在如下幾個方面：

（一）引入HTML5可以與移動智能終端對接

HTML5是用于取代1999年所制定的 HTML4.01 和 XHTML1.0 標準的HTML新版本。2013年5月HTML5.1草案正式公布，作為新一代Web規范，HTML5初步形成。雖然它仍處于完善階段，但它對多媒體的支持以及對移動終端的兼容使其發展空間巨大。2010年YouTube發布了基于HTML5的視頻播放器；2011年，Adobe停止為移動設備開發Flash播放器；Strategy Analytics調查顯示，到2013年全球將擁有超過10億部支持HTML5技術的手機；2013年5月視頻標注工具VideoANT正式公布HTML5版本。[16]這預示著HTML5不再是概念標準。在未來的網絡世界中，Flash將逐漸淡出人們的視線，而HTML5則將會為大多數用戶提供真正的“全方位網絡瀏覽體驗”。

HTML5本質上是為Javascript與CSS提供了一個更寬廣的舞臺，他們的完美結合可以把一些服務器的業務劃分給客戶端，減輕服務器壓力的同時提高用戶的瀏覽質量。需要承認的是，由于HTML5依然處在完善階段，部分瀏覽器并未完全支持，但是在它巨大的發展空間面前，此類問題將迎刃而解。

（二）優化的在線視頻“字幕”標注

Web2.0的強大交互功能使用戶不僅是網站內容的瀏覽者，還是內容的創建者。用戶不僅可以與文字、圖片互動，還可以與視頻形成“對話”。對本系統而言，用戶與視頻進行“對話”就是添加視頻標注。由于教師和學生角色的不同，對他們進行時間點標注的渠道也進行了區別，目的是凸顯教師角色“點”標注的重要性。教師可以對教學視頻任意一個時間點進行分析評論。當該標注點被點擊時，視頻便回溯到對應的時間點上播放，如圖2所示。學生通過輸入框輸入標注內容提交后，標注將以字幕形式呈現在視頻播放區域中，如圖3。

學習者一面播放視頻一面通過“字幕”獲得其他人的反思或點評信息。技術上，要實現以上需求需要克服兩個難點：1. 確保字幕信息顯示便于控制；2. 確保字幕呈現與視頻播放保持同步。在HTML5中，視頻中字幕的顯示可以由Track元素來實現。但是Track元素展示字幕依托的是WebVTT或TTML兩種類型文件。由于這兩種文件格式較為獨特，導致它們與數據庫中的數據轉換過程繁瑣，需要中間環節。MVAS舍棄了Track元素生成字幕的方法，選擇在

視頻切片不是物理上的切片而是邏輯上的。過去教師為了學生能夠更好地理解某項教學技能，通常利用本地計算機的視頻剪切工具對其進行片段化處理，然后再上傳到網絡上提供給學生反復播放。物理切片輔助開展微格教學的做法數據傳輸量較大、操作過程繁瑣。最重要的一點是學生不能參與其中，他們仍處于被動的地位，談不上主動建構知識。邏輯上的視頻切片具備輕量化特點，而且靈活便于操作。Js文件僅需獲得視頻段的起始時間與評論內容等信息，便可以對其進行控制。

系統運用CSS與Javascript共同對播放器的播放條進行設計，用戶可以清晰地分辨出操作完成的切片區域，從而使操作可視化、靈活化、便捷化。此外，系統中一個視頻可以生成多個切片，并且切片可重復播放，如圖4所示（表4為圖4的說明）。視頻切片生成后學習者可圍繞該切片進行協作反思，在協作的過程中完善知識結構進而提高教學技能。

（四）評價主體多元化以及定量與定性評價相結合的數字化環境

當前的微格教學主要采用定性評價。[19]定性評價就是描述性評價，它通過口頭語言描述方式開展，如教師教態表現“自然”、“舉止得體”等。以期通過“表揚”或者“意見、建議”，讓學生抓住教學技能的改進重點，快速提升其教學技能水平。目前，微格教學的定性評價一般是采用自評、互評和單個教師參評這三種形式相結合來開展。然而，這種看似嚴謹的評價也有不可克服的缺點：學生缺乏教學和評價經驗，也沒有深厚的理論功底作為支撐，在倉促的情況下所提出的“表揚”或“建議”只能浮于表面，準確性也無法保證；對于教師而言，由于課時有限，精力受限，再加上課堂上的情況多變，教師無法對課堂進行全盤觀察，也無法對師范生的受訓情況進行深入的思考，關鍵的細微之處往往容易被忽視甚至誤讀。因此，有時教師所提出的觀點也并非真知灼見。另外，指導教師通常都缺乏中小學一線教學經驗，沒有實踐背景作后盾，評價就容易陷入泛泛而談的困局中。[20]

構建基于網絡的評價環境，以上問題便可一一化解。MVAS設計開發了針對一個師范生的微格視頻由三名教師進行評價的入口。多名教師的參評使得評價結果更加客觀，也使評價的信度得到提高。當受訓者完成了微格教學視頻錄制后提交給系統，系統便把該視頻按專業分類智能地、隨機地推送給三名指導教師。三名教師中至少含一名中小學一線教師。教師們通過定性和定量的形式對該視頻文件進行評價，評價的結果表示為合格與不合格。當受訓者的結果為不合格時，他/她將根據教師指出的問題進行反思改進，再進入第二輪的教學實踐，直到合格為止。其他的學生也可以通過輸入標注或生成邏輯切片的形式對該視頻進行評價。當然，學生參與的評價僅作為參考，不能形成最終結果。

四、結 束 語

信息化的延伸，使教師可以通過視頻分析工具與自己的或其他教師的教學視頻進行有效交互。視頻中，生動的細節展現可以促進教師的深度參與。[21]這種“沉浸”（Immersion）或“共鳴”（Resonance）將激發教師更高層次的學習動機。[22]以自己為鑒、以他人為鑒，教師的教學技能將贏得更大的發展空間。因此，我們有必要對微格教學視頻的功能作進一步的延展，發揮它促進師范生開展教學反思的作用，使師范生所學的理論與教學實踐有效對接，為入職做充足的準備。這便是基于HTML5的MVAS開發的初衷。該系統解決了Web視頻“不可寫”的問題，優化了傳統微格教學中的互動、反思、評價環節。運用視頻標注把微格教學的反思與評價環節從微觀（靜態時間點和切片）到中觀（微格教學）再到宏觀（優秀教師教學視頻案例）層面漸進演繹， 讓師范生對教學技能的改進重點一目了然，快速提升其教學技能水平。同時，系統也有效地緩解了傳統的訓練模式由于時空受限所帶來的消耗時間長、工作效率低等問題。

系統開發完成后，我們隨機選擇十名學生與三名課程論教師，嚴格按照之前所擬定的需求說明書進行測試。據測試學生反映，MVAS功能強大且運行順暢；同時，也指出了一些問題，比如視頻字幕應提供個性化選擇功能、一些按鈕位置放置應進行改動等問題。教師認為系統非常貼切當前微格教學實訓的需求，同時建議系統應為學生提供導出教師的評價數據功能。這些問題，我們都作了及時的整改。也有部分學生希望系統能夠提供學習個性化支持，如視頻的智能推送功能。接下來我們將通過分析視頻標注的文本信息結合學生的屬性特征構建智能推送服務。

[參考文獻]

[1] 孟憲凱，李濤.中國微格教學20年[J].北京教育學院學報，2008，（9）：62～65.

[2] 李慶華，張景生.信息技術環境下微格教學訓練模式重構芻議[J].電化教育研究，2009，（12）：102～109.

[3] 王旭卿.職前教師教育中視頻案例教學的研究[J].教師教育研究，2008，（11）：34～37.

[4] Rich，P.，M.J.Hannafin. Video Annotation Tools：Technologies to Scaffold，Structure，and Transform Teacher Reflection[J]. Journal of Teacher Education，2009，（1）：52～67.

[5] Khine，M.S.，A. Lourdusamy. Using Conversant Media as A Collaborative Learning Tool in Teacher Education[J].Australian Journal of Educational Technology，2003，（2）：260～274.

[6] 張志禎，喻凡，李芒.課堂教學視頻分析軟件的設計與實現[J].中國電化教育，2010，（6）：113～116.

[7] 楊聞聞，王忠華.課堂教學視頻分析與診斷系統的設計與探究[J].計算機與數字工程，2011，（9）：183～186.

[8] 姜曉輝.教學視頻共享平臺中視頻標注工具的應用研究[D].上海：華東師范大學，2011.

[9] 沈夏林，周躍良.論開放課程視頻的學習交互設計[J].電化教育研究， 2012，（2）：84～87.

[10] 周偉.基于切片技術的視頻課例分析系統設計[D].上海：華東師范大學，2009.

[11] [13] 王佳瑩，郭俊杰.視頻標注工具：支持教師的教學反思[J].中國電化教育，2013，（7）：111～117.

[12] Rich，P.J.，T.Trip. Ten Essential Questions Educators should Ask When Using Video Annotation Tools[J].TechTrends，2011，（55）： 16～24.

[14] [16] VideoANT首頁[DB/OL].[2013-09-20].http：//ant.umn.edu/.

[15] Murphy，C.，K.Scantlebury. Coteaching in International Contexts Coteaching in International Contexts[M]. London：Springer，2010：147～167.

[17] Lubbers，P.，B.Albers，F.Salim.HTML5高級程序設計[M].李杰，柳靖，劉淼 譯.北京：人民郵電出版社，2011：63～71.

[18] 郭友.教師教學技能[M].北京：首都師范大學出版社，1993：23～24.

[19] [20] 黃映玲，韋寧彬.從學生角度分析微格教學技能評價環節現狀[J].電化教育研究，2012，（9）：116～120.

[21] McCullagh，J.F. How can Video Supported Reflection Enhance TeachersProfessional Development[J].Cultural Studies of Science Education，2012，（7）：137～152.

[22] Goldman，R.，R.Pea，B.Barron，S.J.Derry. Video Research in the Learning Sciences[M]. London：Lawrence Erlbaum Associates，2007：31.