2。1。3 HTML5多媒体播放

在HTML5出现之前，想要在浏览器上播放动画、视频和音频，必须要使用第三方播放器，或者使用Flash播放视频，但它们都需安装各种支持插件，而且多数速度都很慢。HTML5的出现使这一局面得到改观。在HTML5中，提供了音频和视频的标准接口，只需要一个支持HTML5的浏览器就可以了。

虽然视频、音频已在Web上广泛流行了，但却并不存在一个旨在网上显示音频以及视频的标准。然而在HTML5中，却新增了两个元素来包含音频和视频文件——audio元素和video元素。这就使得不需要在浏览器安装任何插件即可播放音频和视频。通过<video></video> 以及<audio></audio>者两个标签对，即可以在浏览器中进行音频和视频的播放[7]。

现在，Safari3以上、Firefox4以上、Opera10以上，以及Google Chrome3。0以上的浏览器都实现了对video元素和audio元素的支持。

2。1。4 JavaScript简介

JavaScript是目前最为流行的客户端脚本语言，它通过嵌入到HTML文档来实现自身的功能。它是一种直译式的语言，主要用来给网页添加交互行为。但单独编写成JS文件有利于结构和文件的分离。同时，它也是一种解释性语言，会由浏览器逐行解释，如果一条运行不了，那么下面的语句也无法运行。

然而，JavaScript也有自己的数据类型、运算符、表达式和基本的程序框架。并且它还提供了四种基本数据类型以及两种特殊数据类型来出来数据和文字。随着HTML5的发展，它的用途也越来越广泛，如为HTML页面嵌入动态文本、对事件作出响应以及控制Cookies等[8]。

由于JavaScript强大的功能，以及不依赖与操作系统的特性（良好的跨平台性），使得它的用途越来越广泛，它与HTML5的结合，将迎来Web前端开发的新时代。

2。1。5 CSS3技术简介

CSS即层叠样式表(Cascading Stylesheet)。在网页制作时，使用该技术能够精确地控制页面的布局、文字字体、字体颜色、背景以及其他效果。只要简单的修改相应的CSS3代码，就可以改变网页布局以及其他效果。旧版本的CSS规范比较庞大且太过复杂，现在的版本将其分解成一些小的模块，更多新的模块也逐渐被加进来。这些模块包括：选择器、盒模型、背景和边框、文字特效、多栏布局以及用户界面等[9]。

2。2 开发工具与运行环境介绍

了解了相关的技术，配置好运行环境，熟悉并掌握一套开发工具，方能高效地进行开发。虽然记事本可以编写HTML5以及JavaScript代码，然而更好的编辑器在编码过程中会起到事半功倍的效果，所以编辑器选择PhpStorm能提高开发效率。开发HTML5在线媒体播放器，考虑到不同浏览器对HTML5及JavaScript的支持不同，就需要在不同的浏览器上进行调试。这里将选择几款主流的浏览器作为调试工具，包括最新的Chrome50。0、Firefox46。0。1以及IE11。 

2。2。1 AppServ

AppServ是由Phanupong Panyadee(AppServ基金会）开发的一款包括Apache（服务器软件）、PHP（网页程序设计语言）、MySQL（数据库管理系统软件）、phpMyAdmin（图形界面的数据库管理软件）四个部分的PHP网页架站工具组合包。其结构框图如图2-1所示。

图2-1：AppServ结构图

(1)网站服务器软件（Apache）

Apache是世界上最受欢迎的Web服务器软件。由于其良好的跨平台性和安全性，并且快速、可靠，使它成为最流行的Web服务器端软件之一。

(2)数据库管理系统软件（MySQL）

MySQL是开发网络信息管理系统软件时普遍采用的数据库系统，它占用资源少、数据安全程度高，便于网页程序处理。