导读：HTML5播放器 MediaElement.js 使用方法目前已经有很多html5播放器可以使用，使用html5播放器可以轻松的在页面中插入媒体视频，从而使我们...
HTML5播放器 MediaElement.js 使用方法
目前已经有很多html5播放器可以使用，使用html5播放器可以轻松的在页面中插入媒体视频，从而使我们的web页面变得更加丰富多彩，所以今天向大家推荐一款非常优秀的html5播放器MediaElement.js，它不仅能够添加我们常用的html5视频格式（mp4,m4v,mov），而且还支持回退方式，即一些低版本的浏览器不支持HTML5播放可以采取flash的方式进行播放，从而达到支持绝大部分的浏览器。
备注：我们都知道进入HTML5时代以后W3C组织为web视频播放加入了一个非常友好的标签<video>，它可以让你直接插入mp4、mov等格式的视频，但是这是浏览器默认的方式，播放的功能也比较单一，所以借助MediaElement.js可以实现丰富的播放效果。
首先MediaElement.js支持三种外观显示
外观设置方法：只需要在对应的<video>标签中加入对应的class 类即可
<h2>Default Skin</h2>
<video width="640" height="360" src="../media/echo-hereweare.mp4" type="video/mp4"
id="player1" poster="../media/echo-hereweare.jpg"
controls="controls" preload="none"></video>
<h2>TED SKin</h2>
<video class="mejs-ted" width="640" height="360" src="../media/echo-hereweare.mp4" type="video/mp4"
id="player1" poster="../media/echo-hereweare.jpg"
controls="controls" preload="none"></video>
<h2>WMP SKin</h2>
<video class="mejs-wmp" width="640" height="360" src="../media/echo-hereweare.mp4" type="video/mp4"
id="player1" poster="../media/echo-hereweare.jpg"
controls="controls" preload="none"></video>
如何调用MediaElement.js ？
首先我们下载 MediaElement.js官方最新版
1.引用js脚本和css样式表 并放置在<head> 标签中。
<script src="jquery.js"></script>
<script src="mediaelement-and-player.min.js"></script>
<link rel="stylesheet" href="mediaelementplayer.css" />
2. 调用视频文件
<video src="myvideo.mp4" width="320" height="240"></video>
支持单一的h.264编码的视频文件（mp4）,该方式适用于firefox,chrome,safari,已经ie9以上版本的主流浏览器。
flash回退
为了支持低版本的浏览器以及对不同用户群的支持，MediaElement.js提供了flash回退的方式，你可以采用以下代码进行调用。
<video width="320" height="240" poster="poster.jpg" controls="controls" preload="none">
<!-- MP4 for Safari, IE9, iPhone, iPad, Android, and Windows Phone 7 -->
<source type="video/mp4" src="myvideo.mp4" />
<!-- WebM/VP8 for Firefox4, Opera, and Chrome -->
<source type="video/webm" src="myvideo.webm" />
<!-- Ogg/Vorbis for older Firefox and Opera versions -->
<source type="video/ogg" src="myvideo.ogv" />
<!-- Optional: Add subtitles for each language -->
<track kind="subtitles" src="subtitles.srt" srclang="en" />
<!-- Optional: Add chapters -->
<track kind="chapters" src="chapters.srt" srclang="en" />
<!-- Flash fallback for non-<span class="wp_keywordlink_affiliate"><a href="http://www.dglives.com/tag/html5" title="查看HTML5中的全部文章" target="_blank">HTML5</a></span> browsers without JavaScript -->
<object width="320" height="240" type="application/x-shockwave-flash" data="flashmediaelement.swf">
<param name="movie" value="flashmediaelement.swf" />
<param name="flashvars" value="controls=true&file=myvideo.mp4" />
<!-- Image as a last resort -->
<img src="myvideo.jpg" width="320" height="240" title="No video playback capabilities" />
</object>
</video>
