HTML5和css3实例:制作HTML5网页视频播放器

武林网(www.vevb.com)文章简介：HTML5+CSS3+jQuery制作视频播放器完全指南.

播放器最终效果预览图

导读：毫无疑问HTML5已经是大势所趋，知名视频网站YouTube在两年前就开始推广HTML5播放器来代替Flash。虽然国内还没有完全普及HTML5浏览器，但在各大本土浏览器厂商的努力下，支持HTML5的浏览器在中国浏览器市场的占有率也在不断增长中。本教程将会手把手地教你制作一个基于HTML5& CSS3& JavaScript 技术的视频播放器。

1.下载MediaElement.js

首先下载MediaElement.js脚本文件，这是一个开源的HTML5音、视频插件，解压后你会得到3个文件—— "flashmediaelement.swf"、 "mediaelement-and-player.min.js"和 "silverlightmediaelement.xap" ，分别是使用Flash、 JavaScript和 SilverLight实现视频播放，并且新建一个"js"文件夹并把它们放进去（当然本例中并不需要 "flashmediaelement.swf" 和 "silverlightmediaelement.xap" 两个文件，可以删去。）。

2.HTML标记

首先需要链接(link)一个jQuery库，这里使用的是Google托管的jQuery库。然后我们在链接"mediaelement-and-player.min.js"文件和CSS文件。

当然我们还需要添加一个HTML5 video标记来创建一个视频播放器，再添加一些属性将它初始化。（注：poster是指视频的预览图）

接下来我们再加入下面的代码来创建控制面板，需要添加的控制器或功能有：

更多设置请查阅MediaElement.js的设置文档。

3.播放器基本样式设计

先修改一下样式设置：

再给video container添加样式，下面的代码全部都是用来控制布局的，没有对播放器样式做任何修改。

4.控制面板样式设置

让我们先从添加“播放按钮”开始：

接下来再添加视频控制器布局：将它放在视频底部，高度为34px，再添加一个背景颜色，配合RGBA来设置透明度。最后给按钮添加基本样式和图元。