周密++蒲华秀++席凌

摘要：HTML（Hyper Text Markup Language）是构成网页文档的主要语言，在新的HTML5规范中，提供了新的元素和属性，尤其在多媒体支持方面带来技术变革，为以流媒体为主要形式的微课教学资源的在线设计提供技术支持。本文对HTML5 多媒体播放技术进行了分析，研究如何将HTML5的新标签运用到在线微课的WEB前端的设计与制作中。

关键词：HTML5；微课；WEB；前端设计

中图分类号：TP393 文献标识码：A 文章编号：1009-3044（2016）17-0208-02

1 HTML5介绍

2012年12月17日，万维网联盟（W3C）正式宣布凝结了大量网络工作者心血的HTML5规范完成。该规范是未来WEB应用的基础，主要由HTML、CSS等组成，是一个完整的编程规范环境。新规范弥补了以前版本在多媒体和页面交互等方面的缺陷，能够很好地满足目前WEB开发和应用中内容多样性、灵活的需求[1]。

微课是围绕课程的知识点或教学环节开展的简短、完整的教学活动通过视频进行记录，以流媒体形式在线展示给学习者。基于微课的移动学习、远程学习、在线学习、“泛在学习”将会越来越普及，而微课教学资源必须借助WEB前端进行展示。而在HTML 5以前，网页中进行教学多媒体资源的播放，必须安装相应的第三方插件才能播放。同时移动设备终端对第三方插件犹如flash控件的不兼容，导致视频文件不能正常播放。而HMTL5新增加的标记，实现了对多媒体的支持，使得浏览器播放视频不受到插件的限制。本文通过对HTML5技术中新特点进行分析，研究如何将其应用于微课在线WEB前端的设计中。

2 video 标记

在HTML5中可以直接通过新增加的

标签作为

2.2 track 标记

在新的HTML5增加的标签中track标签作为video标签的子元素，在使用video标签播放视频时可以将字幕文本（WEBtt、.srt）中的信息加载出来，显示在视频中提供了播放时添加字幕、标题或章节等字幕的选择的功能，播放时将字幕文本显示在视频中。它有以下5个属性：

2.3 代码实现

以上代码实现了当访问者点开页面时首先根据浏览器的解码，可以选择MP4或ogg格式的多媒体资源播放进行直接播放。播放时默认加载中文字幕，并且可以选择切换为英文字幕。

3 微课WEB前端设计

基于HTML5的微课WEB前端利用以上的新标签可以直接播放微课教学资源，而且在课程特色的设计中与其他新标签和属性结合使用，能丰富WEB前端的展示方式，增强WEB前端与学习者的交互性，改变传统只能点击观看资源视频的模式，并且让代码简单不冗余，加载迅速，让微课的视频资源在线播放时变得更加流畅。同时支持以java、.net和php等平台开发的后台管理系统对WEB前端的信息内容和资源进行动态的管理，可以降低网站开发的复杂度，更好的控制进度，降低维护成本，并且提高平台的可扩展性，而使得HTML5成为了学习平台开发者在系统架构时对表示层设计的首选。

4 结束语

随着互联网技术的不断发展，而HTML5标准仍在不断地增加新的标签与属性为基于微课资源进行的移动学习、远程学习、在线学习、“泛在学习”模式提供更好的技术支持，让学习变得更加丰富。

参考文献：

[1]明日科技.HTML5从入门到精通[M].北京：清华大学出版社，2014.

[2]俞华锋.基于HTML5的网页设计与实现[期刊论文[J].科技信息，2012（29）.

[3] www.w3school.com.cn/ w3school.