基于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.