基于HTML5的移动教学平台关键技术解析＊

沈 飞

（浙江艺术职业学院 基础教学部，浙江 杭州 310053）

随着时代的发展和技术的进步，传统课堂外的学生人数在大大地增加，这里既包括了在校学生，也包括了大量的已参加工作的继续深造者。他们没有固定的学习地点和时间，甚至工作场所也不固定。同时对于仍然在校的学生来说，传统的学校教学也不可能给予学生全方位的现代社会所需的知识与学习资源，所以移动学习诞生了，它较以前的教育模式有了很大的进步。基于移动数据通信技术与互联网结合而产生的移动互联网技术所开展的移动教育，将真正地解决和实现教学在任何时间、任何地点进行的梦想［1］。这对于教育的普及有着莫大的帮助。

1 移动教学平台及其优势分析

笔者在学生中做了广泛摸底调查，了解了他们网络学习的特点以及需求。根据调查的结果，总结了学生网络学习的4大特点：① 在学生群体中，手机作为移动终端的占有量是最高的；② 大部分学生愿意通过移动设备进行学习；③ 几乎所有学生都曾经利用过移动设备进行学习；④ 学生最喜欢视频和综合类的学习资源。因此，笔者认为，移动学习平台可以作为课堂学习的有力辅助工具以及拓展载体。

从摸底调查结果可看出，学生需要的是一种基于网络的、个性化的、多层次的教育服务。因此，笔者开发出的平台就以资源库的形式出现，既可在电脑上登录，又可在手机端登录。但是有别于大型的网络教学平台，资源库仅仅涵盖了教学常用的教案、习题、视频教程等内容，尤其是视频建议以知识点为单元录制成微课，突出重点，与当下流行的翻转课堂理念对接。学生通过平台可以访问教师提供的教学大纲、教学计划、习题下载、电子教案、视频教程等内容；管理员和教师也可以通过平台完成各项课程的管理工作，比如学生管理、教师管理、课程管理、资源共享以及发布等。手机端网站见图1。

图1 手机版资源库首页Fig.1 Homepage for resource database on mobile phones

该平台的优势主要有2个方面：一是具有较强的交互性，学习资源丰富，不受时空限制，可以缓解与其他学习时间的冲突，且以学习者为中心；二是不仅具备数字化、多媒化、网络化、智能化的特征，而且突破了地点的限制，学习者不必再局限于电脑前，而是可以随时、随地进行学习，且网站的架构更简单、操作更简便，且经济实用。经过半年的试运行，学生能够便捷地登陆平台进行在线学习，观看课程相关视频或查看课件，成为了第二课堂，为下一步实施翻转课堂教学研究提供了保障。

2 实现平台的关键技术

HTML5标准草案于2013年5月发布，它是由W3C推荐的，通过谷歌、苹果、诺基亚、中国移动等几百家公司一起酝酿的技术，这是一个公开的技术。W3C通过的HTML5标准也就意味着每一个浏览器或每一个平台都会去实现，因此它具备跨平台、绝大多数浏览器支持等特点，性能上又大大缩减了HTML文档，使用户感觉更友好和易懂。据统计2013年全球将有10亿手机浏览器支持HTML5。毫无疑问，HTML5已成为当下移动应用的主流，将成为未来5～10年内移动互联网领域的主宰者［2］。

在实现本系统的时候，主要用到了asp.net和HTML5语言。asp.net是一种嵌入型的脚本语言，指Active server pages（动态服务器页面），运行于IIS之中的程序。HTML5作为网页前段，asp.net则在后台运行，包含了与数据库交互数据和对数据进行逻辑处理，最后生成HTML5呈现给用户。

2.1 视频转换技术

实现对 wma，rm，mov，wmv，asf，avi，mpeg等视频文件的转换，适用于普通浏览器的flv文件及手机使用的mp4文件。视频转换主要有以下2种方式。

（1）使用视频转换软件手工进行转换，然后上传。如使用狸窝软件进行转换。使用此方法的弊端是需要安装第三方软件，转换的过程中会消耗比较长的时间，增加了使用者的工作量。

（2）使用程序自动在线转换。此种方式既可以在线一键生成flv，mp4文件，也可以在线随机生成缩略图。核心是调用ffmpeg［3］和 mencoder［4］。

ffmpeg是一套可用来记录、转换数字音频、视频，并能将其转化为流的开源计算机程序，它包括了目前领先的音／视频编码库libavcodec。ffmpeg是在Linux下开发出来的，支持转换的视频格式不全，但它可在包括Windows在内的大多数操作系统中编译，是转出flv格式文件的利器且可以截图。

mencoder支持几乎所有格式的视频转换，功能强大。市面上流行的格式转换器，都是基于mencoder开发的GUI，如暴风转码、格式工厂等。转换器能办到的，mencoder都能办到，但mencoder能办到的，转换器不一定能办到，只是它必须在命令行下执行。

下面举例调用ffmpeg，将用户上传的视频转换成flv格式的代码如下：

＃region／／运行ffmpeg的视频解码 （这里是绝对路径）

／／／＜summary＞

／／／转换文件并保存在指定文件夹下面（这里是绝对路径）

／／／＜／summary＞

／／／＜param name＝“file Name”＞上传视频文件的路径（原文件）＜／param＞

／／／＜param name＝“play File”＞转换后的文件的路径（网络播放文件）＜／param＞

／／／＜param name＝“img File”＞从视频文件中抓取的图片路径＜／param＞

／／／＜returns＞成功：返回图片虚拟地址；失败：返回空字符串＜／returns＞

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）文件相对路径／最后存储到数据库的路径，如：／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 文档转换技术

教师教学资源中有很大一部分内容是以各种文档形式存在的，所以教学平台必须实现对txt，doc，docx，ppt，pptx，ppsx，xls，xlsx，pdf，wps等格式文件的转换，既要方便上传又要方便浏览内容，而不是简单地把这些格式的文件上传后供访问者下载，还要考虑到一个知识产权的问题。由此笔者想到了百度文库的呈现形式，它既方便用户访问和上传文件，也切实地保护上传者的知识产权，在电脑端访问有很好的呈现效果。操作思路为：① 服务器上需安装office 2007或office 2010；② 安装office生成pdf插件SaveAsPDFandXPS.exe；③ 使用程序调用office生成pdf文件，并将pdf生成缩略图（生成后存放在uploadfiles文件夹下，供手机端访问直接调用pdf文件）；④ 安装PDF转换工具SWFTools；⑤ 使用程序调用SWFTools的pdf2swf.exe将pdf转换为swf；⑥用Flexpaper播放转换成的swf。将pdf转换为swf的关键函数如下：

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参数化（也就是为pdf2swf.exe执行添加一些窗外的参数（可省略））

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＞

＜！－－设置一个隐蔽控件来得到要显示的文件的名字－－＞

＜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 小结

移动课程学习平台开发基本达到了预期目标，满足了学生移动学习的需要，平台在共享课程数据的基础上实现了移动客户端和电脑2种不同终端的访问，可自主选择访问方式进行学习。教师也可根据自己的课程教学实际修改、完善平台内容，对访问用户进行有效管理。平台运行过程中稳定、速度快，能够满足学习者的需求。今后将继续完善课程的内容，满足学生的需求，更好地为教育教学服务。

［1］ 韩立龙.移动网络学习［M］.合肥：中国科学技术大学出版社，2011.

［2］ KYRNIN J.HTML5移动应用开发入门经典［M］.林星，译.北京：人民邮电出版社，2013.

［3］ FORSTER K，OGGL B.写给 Web开发人员看的 HTML5教程［M］.姜雪荃，译.北京：人民邮电出版社，2012.

［4］ 郑虎.Red5视频应用开发指南［M］.北京：清华大学出版社，2014.

［5］ 唐俊开.HTML5移动Web开发指南［M］.北京：电子工业出版社，2012.