基于HTML5的移動教育平臺搭建

陳偉江

（作者單位：上海工藝美術(shù)職業(yè)學院）

基于HTML5的移動教育平臺搭建

陳偉江

（作者單位：上海工藝美術(shù)職業(yè)學院）

隨著網(wǎng)絡(luò)和通信的快速發(fā)展和普遍應(yīng)用，教育和學習形式逐漸多樣化，傳統(tǒng)的文字閱讀學習方式逐漸弱化，以音頻和視頻形式為主的多媒體教育形式得到了廣大師生的好評。HTML5的移動教育平臺突破了音視頻播放插件對傳統(tǒng)瀏覽器的束縛，提供了視頻交互的教學模式，并且提供了人性化的離線存儲機制，便于課程不間斷學習，對于學生輔助教育具有實際的應(yīng)用價值。

HTML5；移動教育；視頻交互教學；離線存儲

1 HTML5的適應(yīng)性分析

HTML5標準能與瀏覽器很好地結(jié)合，因此，自從其2010年面世以來，一直受到全球各大瀏覽器廠家的全力支持。

1.1 多媒體技術(shù)支持

HTML5區(qū)別于其他標準的一個重要特征是其能支持多媒體技術(shù)，大大降低了瀏覽器對某些插件的需求。HTML5通過將標簽集成到瀏覽器中實現(xiàn)多媒體的技術(shù)功能，其中，最為重要的是視頻標簽video和音頻標簽audio，用于滿足用戶對于瀏覽器視頻和音頻的需求。HTML5不僅能夠兼容網(wǎng)站自帶的音、視頻播放功能，還能識別攝像頭和某些音、視頻播放APP等。HTML5對于多媒體技術(shù)的支持，正是其受到廣泛關(guān)注的重要原因。

1.2 離線存儲

移動終端是一種十分方便的設(shè)備，因其便于攜帶，所以，經(jīng)常伴隨著人們的移動而移動，有時會在不同的局域網(wǎng)之間移動。其雖然開通了網(wǎng)絡(luò)自動連接功能，但移動終端在不同局域網(wǎng)之間不斷切換，難免會出現(xiàn)網(wǎng)絡(luò)連接失敗或者斷開的情況。Application Cache離線存儲機制能很好地解決這一問題：在網(wǎng)絡(luò)斷開時，采用MANIFEST文件記錄應(yīng)用數(shù)據(jù)的變化，并且定義和保存瀏覽器之前在本地網(wǎng)頁上的文件；網(wǎng)絡(luò)恢復(fù)正常之后，根據(jù)用戶需求，迅速返回之前存儲的數(shù)據(jù)和信息，以便與Web同步。

1.3 豐富的API接口

移動終端APP與瀏覽器應(yīng)用之間最大的差別在于移動終端APP能夠訪問和調(diào)用終端設(shè)備攝像頭、傳感器等基本固件的能力，而瀏覽器則不具備這樣的功能。HTML5標準問世之后，改變了這一現(xiàn)象，提供了豐富的API接口，使瀏覽器能夠通過某些設(shè)備調(diào)用指令來現(xiàn)攝像頭、傳感器等的調(diào)用。除此之外，HTML5還提供了支持Web實時通信的WebSocket功能，通過實時通信功能和攝像頭功能的調(diào)用，還可以實現(xiàn)視頻通話，這極大地豐富了瀏覽器的功能。

2 教育平臺設(shè)計

隨著教育形式的多樣化，移動教育由于其不局限于學習地點和學習時間的特點，受到了廣大師生和家長的歡迎。歐美等國家移動教育起步較早，主要將移動教育作為輔助教學活動進行研究，其對于教學質(zhì)量和學習效率的提高起到了積極的作用。我國移動教育剛剛起步，各種教育平臺主要集中在文字和圖片形式的可見教學，采用多媒體技術(shù)的教育平臺還比較少見。本文基于這一發(fā)展趨勢，構(gòu)建了一個基于HTML5標準的移動教育平臺。

2.1 功能架構(gòu)

本文從學生和老師當前的主流交互方式出發(fā)，發(fā)現(xiàn)學生們更加希望通過聽或者看的形式輔助學習，對于傳統(tǒng)的閱讀形式的學習方式，學生們普遍反映學習效率不高，因此，本文構(gòu)建了一款基于HTML5標準的教育平臺。平臺改變了傳統(tǒng)閱讀為主的輔助學習方式，采用師生視頻交互形式，除此之外，教師還可以錄制視頻上傳到平臺，方便學生在線觀看學習或者下載保存，使學生的學習時間更加自由。平臺功能架構(gòu)如圖1所示。

圖1 平臺功能架構(gòu)

平臺主要模塊說明如下。

第一，注冊登錄。教育平臺上的課程分為公開課程和非公開課程兩類，公開課程對所有用戶和網(wǎng)站游客開放，而非公開課程只對平臺用戶開放。學生在提交注冊信息之后，系統(tǒng)管理員會對注冊信息進行核實，如果確定注冊者為教育機構(gòu)的學生，注冊完成；注冊成功后，學生登錄平臺就可以觀看和下載非公開課程。

第二，討論區(qū)。學生可以在討論區(qū)向老師提出相關(guān)問題，也可以與其他同學討論學習進度等，教師和同學都可以在討論區(qū)回復(fù)與課程相關(guān)的問題。

第三，學生視頻交互。學生在登錄移動教育平臺后，可以在線觀看視頻課程，還可以下載課程，方便隨時觀看；除此之外，學生在課程學習中遇到了問題，或?qū)φn程內(nèi)容不理解，可以通過視頻或音頻的形式向老師提問。

第四，教師視頻交互。教師可以直接利用平臺的視頻功能錄制課程視頻或者將事先錄制好的課程視頻通過資料上傳功能上傳到教育平臺；如果收到學生發(fā)來的有關(guān)課程的問題，教師可以通過視頻或者音頻的形式進行回復(fù)。

2.2 流程設(shè)計

平臺的工作流程如圖2所示。

第一，平臺用戶按照用戶類型（教師、學生、管理員）登錄教育平臺，登陸過程中，系統(tǒng)識別用戶登錄的IP地址，外網(wǎng)情況下，允許學生和教師登錄，內(nèi)網(wǎng)情況下，只允許教師和管理員登錄和操作。

第二，用戶訪問過的頁面信息會自動保存到本地，為了提高瀏覽器的工作效率和節(jié)省流量，用戶下次訪問時，平臺會首先將目標信息與已經(jīng)保存的本地信息進行核對，如果一致（驗證成功），則直接返回目標信息，如果不一致（驗證不成功），那么需要向下發(fā)送請求，并將新信息保存到本地。

第三，請求接收后，需要驗證用戶是否具有訪問權(quán)限，還可以直接返回首頁。

第四，通過驗證之后，服務(wù)器與數(shù)據(jù)庫之間進行連接，連接成功則返回用戶所需的信息，如果不成功，那么查詢文件的訪問路徑，并重新進行數(shù)據(jù)庫的連接。

圖2 系統(tǒng)工作流程

3 功能實現(xiàn)

3.1 視頻交互教學

將移動終端的便攜攝錄和HTML5的標簽技術(shù)相結(jié)合，充分利用兩者的優(yōu)勢，在師生之間建立新的視頻交互模式，豐富教學，增強互動性：教師可以直接利用平臺的視頻功能錄制課程視頻或者將事先錄制好的課程視頻根據(jù)內(nèi)容和科目的不同，相應(yīng)上傳到平臺課件中心，為學生的學習提供良好的資源；學生用戶在登錄平臺之后，可以在線觀看或者下載保存，做到隨時隨地跟隨老師的思路進行學習；學生在完成作業(yè)后，可以選擇自己喜歡且具有指導意義的內(nèi)容，通過移動終端錄制視頻，將視頻上傳到討論區(qū)，與教師和學生進行互動。

這種新的模式，改變了單調(diào)的灌輸式教學，更是對現(xiàn)有教學資源單向呈現(xiàn)的顛覆，在學習者和教學者之間建立了更好的溝通方式，不僅拉近了師生之間的關(guān)系，也加強了學習伙伴之間的互動。從技術(shù)上來說，雙向視頻交互教學模式，首先需要瀏覽器對攝像頭的調(diào)用，其次，需要網(wǎng)絡(luò)和平臺的支持。相比較來說，攝像設(shè)備支持和網(wǎng)絡(luò)寬帶支持較容易實現(xiàn)，平臺支持則通過

Your browser does not support the video tag.

其中，視頻的寬度和高度通過width 和height兩個標簽來定義，播放控制則通過controls來定義，實現(xiàn)播放、暫停和音量控制；視頻文件格式則通過source標簽定義的，其中，比較主流的移動終端視頻格式有mp4和ogg兩種。目前支持標簽的瀏覽器有Chrome、Opera、IE9及以上版本等。

3.2 離線存儲學習支持

移動教育平臺的人性化設(shè)計還表現(xiàn)在能在離線情況下記錄學習進度，使學生的學習不再受網(wǎng)絡(luò)斷開的困擾，等網(wǎng)絡(luò)接通后，及時恢復(fù)進度。學生在計算機和移動終端切換平臺學習時，平臺自動同步學習進度。移動教育平臺加入離線緩存功能后，在網(wǎng)絡(luò)斷開的情況下，學生可以重復(fù)觀看之前緩存過的視頻信息；網(wǎng)絡(luò)恢復(fù)連接之后，不需要重新加載，只需要加載尚未緩存的信息即可繼續(xù)學習，這樣大大提高了學生的網(wǎng)絡(luò)學習效率。

離線緩存功能采用了Application Cache離線緩存機制，在網(wǎng)絡(luò)斷開時，通過MANIFEST文件記錄應(yīng)用數(shù)據(jù)變化，并且定義和保存瀏覽器之前在本地網(wǎng)頁上的文件。

CACHE MANIFEST#

/theme.css

/logo.gif

/main.js

NETWORK∶ login.asp

FALLBACK∶

/html5//404.html

MANIFEST文件能夠離線緩存三類資源：CSS文件、GIF圖像和Java Script文件。在網(wǎng)絡(luò)斷開連接的情況下，加載MANIFEST文件后，這三類資源仍然可以被使用，實現(xiàn)了學習資料的離線存儲。待網(wǎng)絡(luò)恢復(fù)，服務(wù)器自動更新移動端的資源。

4 結(jié)語

網(wǎng)絡(luò)以及多媒體的不斷發(fā)展，推動了移動教育平臺的變革，這有助于學生的輔助學習，也加強了師生之間的互動，學習時間和學習地點沒有限制，突破了傳統(tǒng)學習的束縛。本文通過對在線教育的運行狀況進行調(diào)研，分析了當前需求者對移動教育平臺的實際需求，結(jié)合HTML5技術(shù)，構(gòu)建了滿足一定需求的移動教育平臺。利用該平臺，學生能夠通過手機終端或者計算機等與教師進行交互，可以在線觀看課程視頻，還可以下載視頻和離線觀看。除此之外，當學生遇到問題或者想發(fā)表自己對課程的理解時，可以通過發(fā)布視頻的形式在討論區(qū)與教師、同學進行討論，極大地豐富了師生之間的交互方式，使課程學習的輔助活動具有實際的應(yīng)用意義。

[1]陳楠楠.基于HTML5的移動學習資源設(shè)計及應(yīng)用研究[D].西安:西安電子科技大學,2013.

[2]李海峰.基于HTML5+jQueryMobile的移動學習平臺WebApp研究與實現(xiàn)[J].信息通信,2014(5).

[3]郭文斌,俞樹文.我國遠程教育研究熱點知識圖譜[J].電化教育研究,2014(2).

[4]顧春蓮.HTML5中的音頻及視頻元素對互聯(lián)網(wǎng)的影響[J].河北省科學院學報,2011(3).

[5]呂偉.基于Android的移動學習平臺的設(shè)計與實現(xiàn)[D].南京:南京師范大學,2013.

[6]陶國榮.HTML5實戰(zhàn)[J].機械工業(yè)出版社.2011(9).

[7]方琦.中小學網(wǎng)絡(luò)學習平臺個性化推送系統(tǒng)的研究與設(shè)計[D].杭州:浙江工業(yè)大學,2013.