支持移动学习的教学视频点播系统设计

【摘要】校园无线局域网的不断完善、移动智能终端设备的迅速普及，推动了移动学习的深入研究与实践应用。为了使传统的教学视频点播系统有效地支持移动学习，文中首先简要介绍了基于流媒体服务器的教学视频点播系统的功能与构建过程，然后借助最新的HTML5技术对传统Web视频点播页面进行了重构设计，实现了跨平台的移动版设计，对移动终端的访问提供了良好的支持。

【关键词】移动学习;HTML5;视频点播;点播系统

1.引言

近年来，随着校园无限局域网不断完善和移动通讯技术的飞速发展，以及智能手机、PDA等移动终端的迅速普及，移动学习开始从过去的理论研究向实际应用中深入推进，应用前景也越来越广阔。高校精品资源共享课、视频公开课和微课等课程的建设热潮，进一步提升了教学视频资源的地位，支持移动终端点播教学视频也成为传统视频点播系统的发展机遇。基于此，本文设计了一个简易的教学视频点播系统，并从支持移动学习方面进行了阐述，力求用最简单的方法实现移动终端获取视频点播服务。

2.教学视频点播系统

视频点播（VOD）是在用户需要时，向用户传送其点播的高质量、简便、快捷的视频服务业务。[1]视频点播系统的开发离不开流媒体技术，流媒体技术可以使用户边下载边观看，而不必把视频下载完之后才可以播放，降低了播放的延迟时间，提高了多媒体的实时性，并且为客户端节省了存储空间的耗费。

2.1 系统功能需求

教学视频点播系统要具有功能[2]，能通过FTP将教学视频快速的上传到视频点播服务器;具有点播功能，能为用户提供方便快捷、操作简单的点播平台，并可以查看视频内容简介等相关信息;具有易于操作的后台管理维护平台，方便管理员对视频信息的编辑、删除以及数据的备份。

2.2 系统主要配置

（1）流媒体服务器的配置

本文采用Windows Server 2003系统自带的Windows Media服务组件搭建流媒体服务器。Windows Media服务组件主要包括Wind-ows Media Player（在客户端使用）、Windows Media Services（在服务器端使用）及Windows Media编码器（视频编辑工具），它具有如下技术特点：①基于流媒体的解决方案;②支持可控带宽;③下载缓存（可调）再播放的技术;④与声频质量无关;⑤分布式的单点、多点广播等。

首先利用系统安装盘安装Windows Media服务组件，然后在Windows Media服务器控制台创建点，再选择视频文件的路径和协议方式（mms：//）等相关设置。

（2）FTP服务器的搭建

为方便视频的上传，将视频所在的文件夹作为FTP的站点目录，开启FTP服务。FTP服务器的环境搭建可以选择系统自带服务组件，也可选择Serv-U、FileZilla等软件进行搭建。

（3）管理维护平台的构建

为方便管理员对视频信息的、编辑以及统一管理，本文采用了基于.net的Site-Server CMS系统构建了一个简单的后台管理平台，CMS的运行需要IIS和SQL Server，可根据服务器系统安装配置相应的服务。SiteServer CMS可以轻松实现网页模板的应用，内容的统一管理，数据字段的定制，系统维护和访问统计等功能。需要注意的是，在后台教学视频时，视频的地址采用流媒体点的地址。

3.支持移动学习的设计

3.1 设计思路

随着移动手机、平板电脑等终端设备的不断发展，移动操作系统也呈现出多个系统共存的局面，主流的有iOS、Android、Windows Mobile等;各种终端设备的硬件基础也不尽相同，如存储空间、显示分辨率等方面。开发者如果要迅速地开发某种应用，就需要一种高效且通用的开发技术[3]。目前移动设备上的主流应用分为三种：Native App（原生应用）、Web App（网络应用）和Hybird App（混合应用）[4]。Web App（网络应用）是一种主要使用HTML、CSS和JavaScript编写并能够在浏览器中直接运行的应用，相比其他两种应用跨平台性和开发成本更低。

HTML5技术依赖浏览器实现，但又减少了浏览器对各种插件的依赖，尤其是视频、音频方面;HTML5拥有跨平台、离线缓存等众多新特性，可以使用移动智能终端内置的移动Web浏览器，为用户提供出色的移动体验。本文设计的教学视频点播系统即采用HTML5技术来支持通过移动终端设备的学习。当前主流的PC浏览器和移动智能终端的内置浏览器均能对HTML5提供较好的支持。

3.2 关键技术

（1）分辨率的自适应

由于电脑和移动终端分辨率的差异，使得普通的网站页面不能正常的显示在移动终端设备上，为了实现网站跨平台的友好效果，通过在HTML页面代码的meta元素中定义的viewport虚拟窗口，使Web页面自适应移动终端的分辨率大小。实现代码如下：

<meta name="viewport"content="user-scalable=no，width=device-width，initial-scale=1，"/>

代码的作用是不允许用户使用手动缩放功能，指定虚拟窗口宽度为移动设备屏幕宽度，初始缩放比例大小为1倍。为了使电脑和移动终端有更好的用户体验，在HTML页面代码中还插入了Media Queries样式模块，进一步根据设备的屏幕大小，定制网站页面的跨平台布局效果。Media Queries样式模块已经得到了IE9、FireFox等桌面浏览器和Android、iOS的web浏览器的良好支持，实现代码如下：

<script language=javascript>

<！--

if（screen.width>=800）

{document.write（'<link rel= "stylesheet"type="text/css"href="http://{Stl.SiteUrl}/style/pc.css">'）}

else

{document.write（'<link rel= "stylesheet"href="http://{Stl.SiteUrl}/style/mobile.css"type="text/css"media="only screen and（max-width：480px）"/>'）

document.write（'<link rel= "stylesheet"href="http://{Stl.SiteUrl}/style/mobile2.css"type="text/css"media="screen and（min-width：481px）"/>'）

}

//-->

</script>

代码的作用为判断设备分辨率，当分辨率宽度大于800、小于480、481至800之间三种情况时加载不同的CSS样式表文件。通过在CSS样式表文件中进行详细的样式设置，可以实现不同分辨率设备的不同布局效果。

（2）HTML5技术实现视频的播放

目前主流浏览器都开始支持HTML5技术，特别是音视频技术。基于HTML5中对音视频标签的支持，我们可以在网站上通过标准HTML为用户提供视频播放服务。Video标签的使用代码如下：

<video width=”90%”height=”auto”controls=”controls”preload=”load”allowfullscreen=””>

<source src=”{Content.FileUrl1}” type=”video/mp4”>

<source src=”{Content.FileUrl2}” type=”video/ogg”>

您的浏览器不支持video标签。

</video>

video元素允许多个source元素。source元素可以链接不同的视频文件，浏览器将使用第一个可识别的格式，如上述代码中提供了mp4和ogg两种格式的视频;src为视频的文件路径。因目前移动智能终端基本都可以播放mp4格式的视频，本系统也以mp4格式的视频为主，值得注意的是并不是后缀名为mp4的视频就可以播放，HTML5支持的mp4视频为带有H.264视频编码和AAC音频编码的视频。另外，我们可以在开始标签和结束标签之间放置文本内容，这样低版本的浏览器就可以显示出不支持该标签的信息。

由于智能手机等移动终端的分辨率和无线带宽的局限，我们在实际中使用了两种清晰度的视频。高码流的视频主要针对电脑访问的用户，低码流的mp4视频针对移动终端访问的用户。

4.总结

本文对基于Windows Server流媒体服务器的教学视频点播系统进行了简单概述，之后借助HTML5技术对传统的Web点播系统页面进行了重构设计，从而实现跨平台的移动版页面的设计，使教学视频点播系统有效地支持移动终端的学习。当然，系统还有不足之处，有待进一步的研究和完善。

参考文献

[1]蔡庆元.基于RTP的手机视频点播系统的设计与实现[D].华南理工大学，2010.

[2]沈建强，耿兆丰，邹轩.视频点播系统的设计与实现[J].计算机工程，2006，1（32）.

[3]黄永慧，陈程凯.HTML5在移动应用开发上的应用前景[J].计算机技术与发展.2013（7）.

[4]钱海军.基于HTML5移动WEB页面开发技术研究[J].电脑与信息技术，2013（2）.

本文为温州医科大学教育教学研究课题“支持移动学习的教学视频共享系统设计与实现（项目编号：YB201379）”研究成果。

作者简介：吕志钢（1986-），男，河北涉县人，助理工程师，研究方向：教学资源设计与开发。