基于HTML5的移動教學平臺關鍵技術解析＊

沈 飛

（浙江藝術職業(yè)學院 基礎教學部，浙江 杭州 310053）

隨著時代的發(fā)展和技術的進步，傳統(tǒng)課堂外的學生人數(shù)在大大地增加，這里既包括了在校學生，也包括了大量的已參加工作的繼續(xù)深造者。他們沒有固定的學習地點和時間，甚至工作場所也不固定。同時對于仍然在校的學生來說，傳統(tǒng)的學校教學也不可能給予學生全方位的現(xiàn)代社會所需的知識與學習資源，所以移動學習誕生了，它較以前的教育模式有了很大的進步?；谝苿訑?shù)據(jù)通信技術與互聯(lián)網(wǎng)結合而產生的移動互聯(lián)網(wǎng)技術所開展的移動教育，將真正地解決和實現(xiàn)教學在任何時間、任何地點進行的夢想［1］。這對于教育的普及有著莫大的幫助。

1 移動教學平臺及其優(yōu)勢分析

筆者在學生中做了廣泛摸底調查，了解了他們網(wǎng)絡學習的特點以及需求。根據(jù)調查的結果，總結了學生網(wǎng)絡學習的4大特點：① 在學生群體中，手機作為移動終端的占有量是最高的；② 大部分學生愿意通過移動設備進行學習；③ 幾乎所有學生都曾經(jīng)利用過移動設備進行學習；④ 學生最喜歡視頻和綜合類的學習資源。因此，筆者認為，移動學習平臺可以作為課堂學習的有力輔助工具以及拓展載體。

從摸底調查結果可看出，學生需要的是一種基于網(wǎng)絡的、個性化的、多層次的教育服務。因此，筆者開發(fā)出的平臺就以資源庫的形式出現(xiàn)，既可在電腦上登錄，又可在手機端登錄。但是有別于大型的網(wǎng)絡教學平臺，資源庫僅僅涵蓋了教學常用的教案、習題、視頻教程等內容，尤其是視頻建議以知識點為單元錄制成微課，突出重點，與當下流行的翻轉課堂理念對接。學生通過平臺可以訪問教師提供的教學大綱、教學計劃、習題下載、電子教案、視頻教程等內容；管理員和教師也可以通過平臺完成各項課程的管理工作，比如學生管理、教師管理、課程管理、資源共享以及發(fā)布等。手機端網(wǎng)站見圖1。

圖1 手機版資源庫首頁Fig.1 Homepage for resource database on mobile phones

該平臺的優(yōu)勢主要有2個方面：一是具有較強的交互性，學習資源豐富，不受時空限制，可以緩解與其他學習時間的沖突，且以學習者為中心；二是不僅具備數(shù)字化、多媒化、網(wǎng)絡化、智能化的特征，而且突破了地點的限制，學習者不必再局限于電腦前，而是可以隨時、隨地進行學習，且網(wǎng)站的架構更簡單、操作更簡便，且經(jīng)濟實用。經(jīng)過半年的試運行，學生能夠便捷地登陸平臺進行在線學習，觀看課程相關視頻或查看課件，成為了第二課堂，為下一步實施翻轉課堂教學研究提供了保障。

2 實現(xiàn)平臺的關鍵技術

HTML5標準草案于2013年5月發(fā)布，它是由W3C推薦的，通過谷歌、蘋果、諾基亞、中國移動等幾百家公司一起醞釀的技術，這是一個公開的技術。W3C通過的HTML5標準也就意味著每一個瀏覽器或每一個平臺都會去實現(xiàn)，因此它具備跨平臺、絕大多數(shù)瀏覽器支持等特點，性能上又大大縮減了HTML文檔，使用戶感覺更友好和易懂。據(jù)統(tǒng)計2013年全球將有10億手機瀏覽器支持HTML5。毫無疑問，HTML5已成為當下移動應用的主流，將成為未來5～10年內移動互聯(lián)網(wǎng)領域的主宰者［2］。

在實現(xiàn)本系統(tǒng)的時候，主要用到了asp.net和HTML5語言。asp.net是一種嵌入型的腳本語言，指Active server pages（動態(tài)服務器頁面），運行于IIS之中的程序。HTML5作為網(wǎng)頁前段，asp.net則在后臺運行，包含了與數(shù)據(jù)庫交互數(shù)據(jù)和對數(shù)據(jù)進行邏輯處理，最后生成HTML5呈現(xiàn)給用戶。

2.1 視頻轉換技術

實現(xiàn)對 wma，rm，mov，wmv，asf，avi，mpeg等視頻文件的轉換，適用于普通瀏覽器的flv文件及手機使用的mp4文件。視頻轉換主要有以下2種方式。

（1）使用視頻轉換軟件手工進行轉換，然后上傳。如使用貍窩軟件進行轉換。使用此方法的弊端是需要安裝第三方軟件，轉換的過程中會消耗比較長的時間，增加了使用者的工作量。

（2）使用程序自動在線轉換。此種方式既可以在線一鍵生成flv，mp4文件，也可以在線隨機生成縮略圖。核心是調用ffmpeg［3］和 mencoder［4］。

ffmpeg是一套可用來記錄、轉換數(shù)字音頻、視頻，并能將其轉化為流的開源計算機程序，它包括了目前領先的音／視頻編碼庫libavcodec。ffmpeg是在Linux下開發(fā)出來的，支持轉換的視頻格式不全，但它可在包括Windows在內的大多數(shù)操作系統(tǒng)中編譯，是轉出flv格式文件的利器且可以截圖。

mencoder支持幾乎所有格式的視頻轉換，功能強大。市面上流行的格式轉換器，都是基于mencoder開發(fā)的GUI，如暴風轉碼、格式工廠等。轉換器能辦到的，mencoder都能辦到，但mencoder能辦到的，轉換器不一定能辦到，只是它必須在命令行下執(zhí)行。

下面舉例調用ffmpeg，將用戶上傳的視頻轉換成flv格式的代碼如下：

＃region／／運行ffmpeg的視頻解碼 （這里是絕對路徑）

／／／＜summary＞

／／／轉換文件并保存在指定文件夾下面（這里是絕對路徑）

／／／＜／summary＞

／／／＜param name＝“file Name”＞上傳視頻文件的路徑（原文件）＜／param＞

／／／＜param name＝“play File”＞轉換后的文件的路徑（網(wǎng)絡播放文件）＜／param＞

／／／＜param name＝“img File”＞從視頻文件中抓取的圖片路徑＜／param＞

／／／＜returns＞成功：返回圖片虛擬地址；失?。悍祷乜兆址迹痳eturns＞

public string ChangeFilePhy（string fileName，string playFile，string imgFile）

｛

／／取得ffmpeg.exe的路徑，路徑配置在 Web.Config中，如：＜add key＝“ffmpeg”value＝“E：＼aspx1＼ffmpeg.exe”／＞

string ffmpeg＝System.Web.Http Context.Current.Server.MapPath（ffmpegobj.ffmpegtool）；

if（（！System.IO.File.Exists（ffmpeg））｜｜（！System.IO.File.Exists（file Name）））

｛

return“”；

｝

／／獲得圖片和（.flv）文件相對路徑／最后存儲到數(shù)據(jù)庫的路徑，如：／Web／User1／00001.jpg

string flv－file＝System.IO.Path.Change Extension（play File，“.flv”）；

／／截圖的尺寸大小，配置在 Web.Config中，如：＜add key＝ “CatchFlvImgSize”value＝“240x180”／＞

string Flv Img Size＝ffmpegobj.size Of Img；

System.Diagnostics.Process Start Info Filestart In fo＝new System.Diagnostics.Process Start In fo（ffmpeg）；

Filestart In fo.Window Style＝System.Diagnostics.Process Window Style.Hidden；

Filestart In fo.Arguments＝“－i”＋file Name＋“－ab 56－ar 22050－b 500－r 15－s”＋width Of File＋“x”＋height Of File＋“”＋flv－file；

／／Imgstart In fo.Arguments＝ “－i ”＋file Name＋“－y－f image2－t 0.05－s”＋Flv Img－Size＋“”＋flv－img；

try

｛

／／轉換

System.Diagnostics.Process.Start（Filestart Info）；

／／截圖

CatchImg（file Name，img File）；

／／System.Diagnostics.Process.Start（Imgstart Info）；

｝

catch

｛

return“”；

｝

／／

return“”；

｝

視頻上傳的同時，視頻截圖程序會自動截取一張圖片作為上傳視頻的示意圖，代碼如下：

／／／截圖

public string Catch Img（string file Name，string img File）

｛

／／

string ffmpeg＝System.Web.Http Context.Current.Server.Map Path（ffmpegobj.ffmpegtool）；

／／

string flv－img＝imgFile＋“.jpg”；

／／

string Flv Img Size＝ffmpegobj.size Of Img；／／

System.Diagnostics.Process Start Info Imgstart Info＝new System.Diagnostics.Process Start Info（ffmpeg）；

Imgstart Info.Window Style＝System.Diagnostics.Process Window Style.Hidden；

／／

Imgstart Info.Arguments＝“－i”＋file Name＋“－y－f image2－ss 08.010－t 0.001－s”＋Flv Img Size＋“”＋flv－img；

try

｛

System.Diagnostics.Process.Start（Imgstart Info）；

System.Threading.Thread.Sleep（6000）；

｝

catch

｛

return“”；

｝

／／

if（System.IO.File.Exists（flv－img））

｛

return flv－img；

｝

return“”；

｝

2.2 文檔轉換技術

教師教學資源中有很大一部分內容是以各種文檔形式存在的，所以教學平臺必須實現(xiàn)對txt，doc，docx，ppt，pptx，ppsx，xls，xlsx，pdf，wps等格式文件的轉換，既要方便上傳又要方便瀏覽內容，而不是簡單地把這些格式的文件上傳后供訪問者下載，還要考慮到一個知識產權的問題。由此筆者想到了百度文庫的呈現(xiàn)形式，它既方便用戶訪問和上傳文件，也切實地保護上傳者的知識產權，在電腦端訪問有很好的呈現(xiàn)效果。操作思路為：① 服務器上需安裝office 2007或office 2010；② 安裝office生成pdf插件SaveAsPDFandXPS.exe；③ 使用程序調用office生成pdf文件，并將pdf生成縮略圖（生成后存放在uploadfiles文件夾下，供手機端訪問直接調用pdf文件）；④ 安裝PDF轉換工具SWFTools；⑤ 使用程序調用SWFTools的pdf2swf.exe將pdf轉換為swf；⑥用Flexpaper播放轉換成的swf。將pdf轉換為swf的關鍵函數(shù)如下：

public static void PDFConvertToSWF（string sourcePath，string targetPath）

｛

／／切記，使用pdf2swf.exe打開的文件名之間不能有空格，否則會失敗

string cmdStr＝Http Context.Current.Server.MapPath（“／SWFTools／pdf2swf.exe”）；

string－source Path＝@“”“”＋source Path＋@“”“”；

string－target Path＝@“”“”＋target Path＋@“”“”；

／／@“”“”4個雙引號得到一個雙引號，如果你所存放的文件所在文件夾名有空格的話，要在文件名的路徑前后加上雙引號，才能夠成功

／／－t源文件的路徑

／／－s參數(shù)化（也就是為pdf2swf.exe執(zhí)行添加一些窗外的參數(shù)（可省略））

string argsStr＝“－t”＋source Path＋“－s flashversion＝9－o”＋target Path；

Excuted Cmd（cmdStr，argsStr）；

｝

private static void Excuted Cmd（string cmd，string args）

｛

using（Process p＝new Process（））

｛

Process Start Info psi＝new Process Start Info（cmd，args）；

p.Start Info＝psi；

p.Start（）；

p.Wait For Exit（）；

｝

｝

使用Flex Paper調用swf如下：

＜script src＝“／Flex Paper／js／jquery.js”type＝“text／javascript”＞＜／script＞

＜script src＝“／Flex Paper／js／flexpaper－flashdebug.js”type＝“text／javascript”＞＜／script＞

＜script src＝“／Flex Paper／js／flexpaper－flash.js”type＝“text／javascript”＞＜／script＞

＜center＞

＜a target＝“－blank”id＝“viewer Place Holder”style＝ “width：800px；height：900px；display：block；”＞＜／a＞

＜?。O置一個隱蔽控件來得到要顯示的文件的名字－－＞

＜input type＝“hidden”id＝“file”value＝‘138’／＞

＜script type＝“text／javascript”＞

var file URL＝＄（“＃file”）.val（）；

var fp＝new Flex Paper Viewer（

‘／Flex Paper／Flex Paper Viewer’，

‘viewer Place Holder’，

｛config：｛

Swf File：escape （‘／up Loadfiels／office／swf／2013－12／20131203191939357.swf’），

Scale：1，

Zoom Transition：‘ease Out’，Zoom Time：0.5，

Zoom Interval：0.2，

Fit Page On Load：false，

Fit Width On Load：false，

Print Enabled：true，

Full Screen As Max Window：true，

Progressive Loading：false，

Min Zoom Size：0.2，

Max Zoom Size：5，

Search Match All：false，

Init View Mode：‘Portrait’，

View Mode Tools Visible：true，

Zoom Tools Visible：true，

Nav Tools Visible：true，

Cursor Tools Visible：true，

Search Tools Visible：true，

locale Chain：‘en－US’

｝

｝

）；

＜／scri3pt＞

此外在服務器目錄下放入技術原型pdf.js，主要用于在HTML5平臺上展示PDF文檔，無需任何手機端技術支持，訪問時直接調用該程序［5］。即在手機端直接調用pdf文件，在電腦端調用swf文件。

3 小結

移動課程學習平臺開發(fā)基本達到了預期目標，滿足了學生移動學習的需要，平臺在共享課程數(shù)據(jù)的基礎上實現(xiàn)了移動客戶端和電腦2種不同終端的訪問，可自主選擇訪問方式進行學習。教師也可根據(jù)自己的課程教學實際修改、完善平臺內容，對訪問用戶進行有效管理。平臺運行過程中穩(wěn)定、速度快，能夠滿足學習者的需求。今后將繼續(xù)完善課程的內容，滿足學生的需求，更好地為教育教學服務。

［1］ 韓立龍.移動網(wǎng)絡學習［M］.合肥：中國科學技術大學出版社，2011.

［2］ KYRNIN J.HTML5移動應用開發(fā)入門經(jīng)典［M］.林星，譯.北京：人民郵電出版社，2013.

［3］ FORSTER K，OGGL B.寫給 Web開發(fā)人員看的 HTML5教程［M］.姜雪荃，譯.北京：人民郵電出版社，2012.

［4］ 鄭虎.Red5視頻應用開發(fā)指南［M］.北京：清華大學出版社，2014.

［5］ 唐俊開.HTML5移動Web開發(fā)指南［M］.北京：電子工業(yè)出版社，2012.