基于Web视频文本轨道技术的英语学习平台开发与应用研究——非正式学习的视角

余德军，邹军华

(湖北大学 教育学院，湖北 武汉 430062)

基于Web视频文本轨道技术的
英语学习平台开发与应用研究——非正式学习的视角

余德军，邹军华①

(湖北大学 教育学院，湖北 武汉 430062)

随着我国互联网的迅猛发展，越来越多的英语学习者利用互联网进行非正式学习，以便提高自身的英语水平。该文分析了目前网络上英语学习平台存在的主要问题，通过整合WebVTT、PHP和MYSQL等相关技术，设计并实现了一个非正式学习环境下的英语学习平台。该平台能够提供视频管理、字幕管理、英语单词和语法搜索等功能，平台运行不需要任何插件，只需要支持Video标记的浏览器。最后，作者以《狮子王》电影片段为视频载体设计了一个应用实例。

非正式学习；英语学习；Web视频文本轨道；在线学习

一、引言

英语课程是我国初等教育的必修课程之一，其重要性不言而喻。有关专家学者纷纷从理论和实践的角度对英语学习进行了研究，以促进英语教学效果的提高，如Yang[1]等人研究了制约学习者英语语言能力提高的主要因素：缺乏真实的英语语言环境；教学过重地强调英语词汇、语法、阅读和写作，缺乏实际应用；学生原有英语基础知识不同。信息技术凭借其超强的信息获取、信息传输、信息存储、信息处理、信息显示等能力，能较好地呈现学习资源，很早开始应用于多媒体英语教学，教师主要运用信息技术在课堂上呈现词汇、语法、例句、音频、图片等学习资源[2]，以提高学生学习英语的效率，提升学生的英语水平。

随着互联网的快速发展，出现了许多英语学习平台。越来越多的学习者在课外利用互联网进行与英语相关的非正式学习，以便提高自身的英语水平。互联网上的英语学习平台，虽然提供了丰富的学习资源，但是存在诸多问题：一是学习资源过于简单，以文字、图片、音频为主，视频资料较少[3]；二是部分平台虽然提供视频资源，但视频与视频文本相分离，教师和专家不能编辑视频字幕；三是缺乏互动；四是用户体验较差。因此，互联网上的英语学习平台很难为学习者提供一个良好的英语语言环境，没有从根本上解决学习者学习英语时存在的主要问题。

针对英语学习平台存在的上述问题，通过整合HTML5、CSS、JavaScript、WebVTT、PHP、MYSQL等相关技术，开发一个基于Web视频文本轨道技术(WebVTT)的英语学习平台。本平台中的学习资源以视频片段为主，除了提供精准添加字幕、删除字幕功能之外，还提供上传视频、播放视频、在线留言、模糊搜索、视频分类、英语语法说明、数据备份等功能。该平台为学习者提供一个基于视频片段的英语语言环境，增强用户体验和交互性，以提高学习者非正式学习的效率，提升学生的听、说、读、写能力。

二、信息技术、英语学习和非正式学习

(一)信息技术在英语学习中的应用

英语作为当今世界上使用范围最广的语言，绝大多数国家都开设了英语这门课程。学者Nunan[4]曾指出：在亚洲，英语作为学校初等教育至高等教育的必修课程，学习者具备较高的英语语言能力能提升其竞争力。有关机构也给出具备英语语言能力的标准，如21世纪技能(Partnership for 21st Century Skills)指出英语语言艺术标准(The Ela Standards)包括阅读、写作、听力、朗读及对语言本身的理解等五大标准[5]。

虽然学习者重视英语学习，但学习效果却不佳，尤其体现在听说方面。有关学者对此现象进行了研究，如Yang[6]等人研究了制约学习者英语能力提高的主要因素。国外学者研究信息技术应用于英语教学的成果丰富，其研究大致可以分为以下三个方向：

1.特定技术在英语教学中应用。如：Plass等人[7]研究了多媒体平台在英语教学中所扮演的重要角色，他们认为多媒体为英语学习提供一种有力的工具，通过图形与单词一一对应，使学习者对单词的记忆及其深刻；Gray等人[8]研究了电子白板在英语学习中的应用，研究结果表明电子白板凭借其超强的整合能力，对语言学习有很大促进作用。

2.英语学习资源设计。如：Yueh Min Huang等人[9]开发出一个泛在英语词汇学习系统，系统中的学习资料是经过剪切的微视频，学习者通过观看微视频以提高学习者学习新词汇的效率；Seufert以及Sakar等人[10][11]通过实证研究表明在某种特定的环境下，如果教师对多媒体学习资源设计不合理，此资源将阻碍学习者的学习。

3.教学过程设计。如：Plass的研究表明[12]，多媒体信息技术一般情况下能促进学习者学习，但如果教学过程设计与学习者个性不一致，将阻碍学习者的学习；Euline Cutrim Schmid的研究表明[13]：在一定条件下，电子白板有助于学习者的英语学习，但如果教学过程中资源和过程的设计不合理，将影响学习者学习英语的效果。

国内有关专家学者也对信息技术应用于英语学习进行了研究，他们的研究主要可以分三个领域：英语学习资源的设计、英语学习平台的设计、信息技术在英语教学中的应用。如李燕芳、王文静[14]等研究了儿童多媒体学习资源的设计，利用多媒体呈现信息的优势，设计出与儿童自身特点相适应的学习资源，调动儿童学习英语的兴趣与积极性，提升儿童的英语听力和口语水平；张筱兰、郝惠萍[15]研究了智能语音系统在英语学习中的应用，智能语音系统凭借其资源的丰富性、发音的标准性等独特的优势能较好地提升学习者的听说能力；凌茜、马武林[16]基于Web对英语混合式学习进行探究，力求解决课堂时间有限与学生英语学习个性化要求的矛盾，取得了一定的成效。

(二)英语学习与非正式学习

非正式学习(Informal Learning)是指教室之外发生的学习，正规学习(Formal Learning)是指教室内发生的学习。国内外学者对非正式学习的内涵进行了研究，如McGivney[17]认为非正式学习是在教室之外发生的，包括学习者根据自身兴趣爱好与外界进行的活动；Colley[18]认为不受空间限制的学习就是非正式学习。国内学者余胜泉[19]认为正式学习是指在课堂上发生；而非正式学习是指课堂之外发生的学习，由学习者自主发起、自我调控的学习。刘文利[20]和张宝辉[21]等人参照美国教育学者Brian L.Gerber等人关于非正式学习的定义，他们认为发生于课堂之外的学习被称为非正式学习，学生在学习过程中学习内容随意性较强、无教师指导、时间不确定。由此可知，非正式学习的核心内涵为：正规学习的环境之外发生的学习，包括人们日常交谈、运动、阅读、游戏、会议、旅游、上网、看电视等。

人们在正规学习环境中进行学习的时间极其有限，大部分的知识源于非正式学习。1973年，Sylvia Scribner和Michael Cole[22]曾指出非正式学习在人一生中起着重要作用，其重要性高于正式学习。他们列举了一个经典的例子，在学习语言的过程中，非正式学习比正式学习更为重要。

随着全球化不断加深，英语已成为世界上使用最广泛的语言。近年来，我国互联网迅猛发展，越来越多的英语学习者利用互联网进行非正式学习，以便提高自身的英语水平。但互联网上的英语学习平台，绝大多数都是英语学习资源的简单堆积，存在很多问题，如：知识点混乱、单词与句子简单罗列、教学音频和视频杂乱无章、视频与视频文本脱离、学习者与教师互动性差等，这样未能构建一个良好的英语言语环境，对英语学习者的学习效率提升并不明显。

因此，针对目前网络上英语学习平台存在的主要问题，以HTML5、CSS、PHP、MYSQL、JavaScript等为技术支撑，开发一个基于Web视频文本轨道技术的英语学习平台。平台的运行不需要任何插件，只需要支持HTML5中的Video标记的浏览器(例如Google Chrome等)。英语学习者通过该平台进行非正式学习，以提高听、说、读、写等能力。

三、基于Web视频文本轨道的英语学习平台设计与开发

(一)系统开发环境和总体设计

服务器的操作系统为Windows Server 2008 R2标准版。在此操作系统的基础上，安装Web服务器(Apache 2.4.10)，搭建开源脚本语言PHP环境(PHP 5.5.15)，并且安装了开源数据库系统(MySQL 5.6.20)。平台的功能分为系统管理模块、视频管理模块、字幕管理模块和用户交互模块。其中，系统配置模块主要包括系统参数设置、视频分类管理等功能，评论管理模块主要包括添加评论、修改评论和删除评论等功能，视频控制模块主要包括视频播放、视频播放暂停、视频回放等功能。

(二)数据库设计

基于Web视频文本轨道的英语学习平台的主要功能是有效地存储和管理用于英语学习的视频片段及相关信息。按照需求分析、概念结构设计、逻辑结构设计、物理结构设计等步骤进行了整个系统的数据库设计。本系统包含用户表、视频评论表、分类表等多个数据表。例如，其中视频片段表包括视频编号、视频文本内容、上传时间、视频文件编号、字幕文件编号、分类编号等字段。

(三)在线视频处理

Theora是由Xiph.org基金发布的开源免费的视频压缩技术，这项技术无需任何专利许可费便可应用于分布式在线视频领域，Theora支持绝大部分视频格式并提供了各种视频格式相互转换的公共接口[23][24]。Firefox和Opera通过HTML5新增元素

(四)在线字幕处理

JavaScript是一种客户端脚本语言，用来给HTML网页增添动态功能。JavaScript对HTML5的标签也提供了良好的支持，尤其是能够对

本英语学习平台通过对这些技术的实现，为教师获取视频播放时间、对视频进行切片及在相应时间段内添加WebVTT字幕提供了技术支持，而不必运用专门的视频处理软件对视频进行字幕处理。获取视频时间和添加相应字幕，界面视图如图2所示。

图1 JavaScript获取播放时间点的关键代码

图2 JavaScript控制

首先，允许教师点击起始时间和终止时间以获得一个时间段，此时间段决定了即将添加的字幕在视频上停留时间段。这时教师就可以在字幕输入文本框中输入相应的字幕，通过单击添加字幕就将对应时间段中的字幕添加至界面右边的字幕控制界面。其次，字幕控制界面提供了添加字幕(允许英语教师在同一段时间添加多行字幕)、删除字幕、清空所有字幕、提交字幕等功能，如图3所示。最后，当教师确定好所要添加的字幕后，单击提交按钮，在字幕控制界面上的内容就会提交至WriteSubs.php页面，由此页面所提供的业务逻辑对请求的数据进行处理。

图3 字幕控制界面

(五)字幕文件处理

PHP的英文名为Hypertext Preprocessor，中文名为超文本预处理器，是一种在Web领域使用广泛的开源脚本语言，它具有C、Java、Perl等语言的特点，它的天生优势是执行速度快[25]。WebVTT是Web视频文本轨道的简称，它是以.vtt为后缀的一种文件类型。在创建支持字幕的视频网页前，首先需要创建对应视频的字幕(文本轨道)，WebVTT是网页视频显示的文本文件，它可以自动创建也可以使用专门的工具创建。

本系统为了使英语教师能对上传字幕进行处理，主要通过PHP的Fopen()、Fwrite()、Fclose()等文件处理函数。英语教师将其编辑的字幕提交至WriteSubs.php页面，此页面通过运用PHP文件处理函数将字幕文件(文件名为“上传时间戳”；后缀名为VTT)保存至Web服务器上。

(六)视频分类和搜索

MYSQL是一款关系型数据库管理系统，MYSQL具有开源、免费、使用广泛、功能强大等特点。PHP与MYSQL是一对经典组合，本平台使用其对教师上传英语视频进行分类管理，一级分类目前分为：电影学英语、语法训练、听力训练、词汇训练、英语演讲等，管理员可以根据需要添加一级分类，实现了在一级分类下创建二级分类、三级分类等功能，还可以对这些分类进行修改。

教师上传英语视频时需要填写视频的标题并通过在线编辑器对该视频的知识进行分析，系统向MYSQL数据库发送SQL语句，将英语语法知识写入数据库。因此，学生可以通过搜索框，将通过搜索出相关的学习视频。

四、基于WebVTT技术的英语学习平台应用实例

本研究所设计的基于Web视频文本轨道技术的英语学习平台已开发完毕。教师或管理员通过向本平台上传学习资料(包括文本和视频等)，并对英语学习视频进行编辑，学生利用课余时间在本平台上通过观看英语视频片段(带双语字幕)、文本及图片等学习资料，进行非正式学习。使用此平台主要步骤如下所述。

(一)登录

教师通过后台登录界面使用正确的用户名与密码登录至后台首页。

(二)上传英语学习视频

点击导航栏中的视频管理主菜单栏将下拉出新增视频资源、视频资源管理等菜单，再点击新增视频资源。教师在此界面中添加本地学习视频、为视频添加主题、添加对视频知识点的讲解等，点击提交将英语学习资源上传至远端服务器。

(三)添加视频字幕

此功能是本系统的核心功能，也是系统实现的主要创新点和难点，提供了教师对学习视频的编辑功能，而无需聘请视频处理专业人士使用专门视频处理工具对视频进行处理。

1.添加字幕

教师点击主菜单栏中的添加字幕菜单，即将在平台主界面中按主题呈现教师所添加的英语学习视频，每一个按主题呈现的英语学习视频都有一个添加字幕链接，点击该链接，可以跳转至此视频的字幕编辑界面。

2.进入此界面后，教师则可以对视频字幕进行编辑

首先，教师观看视频片段，通过点击视频下方的“开始时间”按钮和“结束时间”按钮，确定要添加字幕的起止时间。如果开始时间和结束时间不准确的话，可以在开始时间文本框和结束时间文本框中编辑准确的开始时间和结束时间。

其次，教师则可以在输入字幕文本框中输入所需字幕，点击添加按钮则可以将字幕(包括字幕的起始时间、字幕及操作按钮)添加至视频右边字幕区域内。

最后，教师可以对所添加字幕进行操作，如：对某一个时间段的字幕不满意则可以将其删掉；需重新添加视频字幕时则可以将关于此视频的所有字幕进行清空，点击清空按钮即可完成此功能。重复第二步到此步骤的过程直到教师对此视频所有时间内的所有字幕添加完毕后，点击提交即可以将所添加字幕以VTT文件的形式上传至服务器。

(四)学习者使用英语视频学习资源

英语学习者登录至此平台的首页，就可以通过导航栏或通过模糊搜索找到需要的视频片段，点击该视频片段，进入学习界面，如图4所示。

图4 学生学习界面

首先，学习者可以通过视频进行英语学习，此时学习者观看到教师为视频所添加的字幕；学习者也可以通过视频播放界面上的“CC”按钮控制字幕显示与否，这对学习者听说能力的提高极其重要，如：学习者可以先听取带字幕的视频，然后将字幕隐藏，测试自身是否听懂，如果听不懂则又可以将字幕显示。此英语视频环境能为学习者提供一个虚拟真实的英语语言环境。

其次，视频右侧栏对视频的核心知识点进行了讲解，学生通过观看视频对视频的内容有一个大致的了解；右侧的内容则是围绕视频中某一句话的知识点进行展开。

最后，学习者可以通过视频下方提供的留言功能进行留言，经审核后教师和其他学习者可以观看留言；学习者也可利用留言功能向教师或其他同学提问，然后教师或其他同学可以对其进行回答；学习者亦可以对此平台和英语学习视频资源提出反馈意见，以便教师和管理人员进一步完善此英语学习平台及英语学习视频资源。

五、结束语

针对当前英语学习平台存在的主要问题，该文开发了一个基于Web视频文本轨道技术的英语学习平台，该平台的最大特点就是平台运行不需要借助任何第三方软件，仅仅需要支持WebVTT技术的浏览器，如Google Chrome、Firefox3.5等。授权用户管理视频片段和在线字幕，并添加相关英语单词解释或者进行语法解释，学生则可以搜索任意视频片段(附带中英文字幕、相关生词释义和语法阐述)，还可以进行在线留言反馈。本平台的学习资料以视频片段为核心，围绕某个视频片段进行字幕呈现、知识点讲解，力求为学生构造一个虚拟的英语语言环境，以提高学生非正式学习的效率。在后续研究中，笔者将扩大本平台的应用场景，将本平台的部分功能移植至移动设备的Android和IOS系统中，以便教师和学习者在任何时间、任何地点都能使用本平台。

[1][6] Yang, Y.T.C., Gamble, J., Tang, S.Y. S. Voice over instant messaging as a tool for enhancing the oral prociency and motivation of English-as-a-Foreign-Language learners[J]. British Journal of Educational Technology, 2012, 43(3): 448-464.

[2][13] Euline Cutrim Schmid. Potential pedagogical benefits and drawbacks of multimedia use in the English language classroom equipped with interactive whiteboard technology[J]. Computers &Education,2008,(51): 1553-1568.

[3] 王辉,吴刚. 我国英语学习网站现状调查分析[J].中国电化教育,2004,(4):46-49.

[4] Nunan, D. The impact of English as a global language on educational policies and practices in the Asia-Pacic region[J].TESOL Quarterly,2003,37(4): 589-613.

[5] Partnership for 21st Century Skills.Learning for the 21st century: A report and mile guide for 21st century skills[DB/OL]. http://www.p21.org/storage/Docu-ments/P21CommonCoreToolkit.pdf,2015-12-20.

[7] Plass, J. L., Chun, D. M., Mayer, R. E., & Leutner,D..Cognitive load in reading a foreign language text with multimedia aids and the influence of verbal and spatial abilities[J]. Computers in Human Behavior,2003,(19): 221-243.

[8] Gray, G., Hagger-Vaughan, L., Pilkington, R., & Tomkins,S. The pros and cons of interactive whiteboards in relation to the keystage 3 strategies and framework[J].Language Learning Journal,2005,(32):38-44.

[9] Yueh-Min Huang, Yong-Ming Huang, Shu-Hsien Huang, Yen-Ting Lin.A ubiquitous English vocabulary learning system: Evidence of active/passive attitudes vs usefulness/ease-of-use[J]. Computers &Education, 2012,(58): 273-282.

[10] Seufert, T. Supporting coherence formation in learning from multiple representations[J]. Learning and Instruction,2003,(13): 227-237.

[11] Sakar, A., & Ercetin, G.Effectiveness of hypermedia annotations for foreign language reading[J]. Journal of Computer Assisted Learning,2005,(21):28-38.

[12] Plass, J. L., Chun, D. M., Mayer, R. E., & Leutner, D..Cognitive load in reading a foreign language text with multimedia aids and the influence of verbal and spatial abilities[J]. Computers in Human Behaviour,2003,(19):221-243.

[14] 李燕芳,王文静等.儿童多媒体英语学习资源设计研究——以攀登英语学习实验为例[J].中国电化教育,2008,(9):73-77.

[15] 张筱兰,郝惠萍.智能语音系统在小学英语教学中的应用研究[J].电化教育研究,2011,(12):102-105.

[16] 凌茜,马武林.基于Web2.0平台的大学英语混合式学习探究[J].电化教育研究,2009,(6):107-108.

[17] McGivney, V. Informal learning in the community: A trigger for change and development[R]. Leicester: National Institute of Adult and Continuing Education,1999.

[18] Colley, H., Hodkinson, P., & Malcom, J.Non-formal learning:Mapping the conceptual terrain[R]. Leeds:Lifelong Learning Institute,2002.

[19] 余胜泉,毛芳.非正式学习——e-Learning研究与实践新领域[J].电化教育研究,2005,(10):18-23.

[20] 刘文利.科学教育的重要途径——非正规学习[J].教育科学,2007,(2):41-44.

[21] 张宝辉.非正式科学学习研究的最新进展及对我国科学教育的启示[J].全球教育展望,2010,(9):90-92.

[22] Scribner,S.& Cole,M. Cognitive Consequences of Formal and Informal Education[J]. Science, 1973, (182):553-559.

[23] Theora视频格式[DB/OL].http://theora.org,2015-09-15.

[24] Theora视频压缩格式的优势[DB/OL].http://www.theora.org/benefits/,2015-10-01.

[25] 邹天思,潘凯华.PHP网络编程标准教程[M].北京:人民邮电出版社,2009.

责任编辑：赵兴龙

Development and Application Research of English Learning Platform Based on Web Video Text Track: from the View of Informal Learning

Yu Dejun, Zou Junhua
(Faculty of Education, Hubei University, Wuhan Hubei 430062)

With the rapid development of Internet, more and more students are studying in informal learning environments to improve their English performance. This paper discussed the main issues of popular English learning systems. Through integrating JavaScript, WebVTT,PHP, and MySQL, the authors developed an English learning platform for informal learning. Without any plugins, this platform can run on any web browsers which support

Informal Learning; English Learning; Web Video Text Track; Online Learning.

G434

：A

1006—9860(2016)03—0082—05

余德军：在读硕士，研究方向为教育信息化、信息化教育资源开发与应用(1607312425@qq.com)。

邹军华：博士，副教授，硕士生导师，研究方向为教育技术学、教育信息化等(zoujunhua_000@sina.com)。

2016年1月10日

① 邹军华为本文的通讯作者。