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

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

【摘要】校园无线局域网的不断完善、移动智能终端设备的迅速普及，推动了移动学习的深入研究与实践应用。为了使传统的教学视频点播系统有效地支持移动学习，文中首先简要介绍了基于流媒体服务器的教学视频点播系统的功能与构建过程，然后借助最新的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>