英文原文：designmodo.com，编译：王然@CSDN
导读：毫无疑问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文件。
|
1 2 3 4 5 6 |
<head> <title>Video Player</title> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script> <script src="js/mediaelement-and-player.min.js"></script> <link rel="stylesheet" href="css/style.css" media="screen"> </head> |
当然我们还需要添加一个HTML5 video标记来创建一个视频播放器，再添加一些属性将它初始化。（注：poster是指视频的预览图）
|
1 2 3 |
<video width="640" height="267" poster="media/cars.png"> <source src="media/cars.mp4" type="video/mp4"> </video> |
接下来我们再加入下面的代码来创建控制面板，需要添加的控制器或功能有：
● alwaysShowControls – “true”则设置video控制面板永远显示，”false”则在鼠标移走后隐藏。
● videoVolume – “horizontal”设置音量滑动控制器为水平
● 其它功能：暂停播放、前进播放、声音和全屏
|
1 2 3 4 5 6 7 8 9 |
<script type="text/javascript">// <![CDATA[ $(document).ready(function() { $('video').mediaelementplayer({ alwaysShowControls: true, videoVolume: 'horizontal', features: ['playpause','progress','volume','fullscreen'] }); }); // ]]></script> |
更多设置请查阅MediaElement.js的设置文档。
3.播放器基本样式设计
先修改一下样式设置：
|
1 2 3 4 5 6 7 8 9 10 11 |
.mejs-inner, .mejs-inner div, .mejs-inner a, .mejs-inner span, .mejs-inner button, .mejs-inner img { margin: 0; padding: 0; border: none; outline: none; } |
再给video container添加样式，下面的代码全部都是用来控制布局的，没有对播放器样式做任何修改。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 |
.mejs-container { position: relative; background: #000000; } .mejs-inner { position: relative; width: inherit; height: inherit; } .me-plugin { position: absolute; } .mejs-container-fullscreen .mejs-mediaelement, .mejs-container-fullscreen video, .mejs-embed, .mejs-embed body, .mejs-mediaelement { width: 100%; height: 览器在中国浏览器市场的占有率也在不断增长中。本教程将会手把手地教你制作一个基于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是指视频的预览图）
接下来我们再加入下面的代码来创建控制面板，需要添加的控制器或功能有： ● alwaysShowControls – “true”则设置video控制面板永远显示，”false”则在鼠标移走后隐藏。 ● videoVolume – “horizontal”设置音量滑动控制器为水平 ● 其它功能：暂停播放、前进播放、声音和全屏
更多设置请查阅MediaElement.js的设置文档。 3.播放器基本样式设计 先修改一下样式设置：
再给video container添加样式，下面的代码全部都是用来控制布局的，没有对播放器样式做任何修改。
|
