目前已经有很多html5播放器可以使用，使用html5播放器可以轻松的在页面中插入媒体视频，从而使我们的web页面变得更加丰富多彩，所以今 天向大家推荐一款非常优秀的html5播放器MediaElement.js，它不仅能够添加我们常用的html5视频格式（mp4,m4v,mov）， 而且还支持回退方式，即一些低版本的浏览器不支持 HTML5 播放可以采取flash的方式进行播放，从而达到支持绝大部分的浏览器。
备注：我们都知道进入 HTML5 时代以后W3C组织为web视频播放加入了一个非常友好的标签<video>，它可以让你直接插入mp4、mov等格式的视频，但是这是浏览器默认的方式，播放的功能也比较单一，所以借助MediaElement.js可以实现丰富的播放效果。
目前MediaElement.js所能支持的浏览器如图
首先MediaElement.js支持三种外观显示
默认效果
ted-外观
wmp-外观
外观设置方法：只需要在对应的<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="http://t.zoukankan.com/myvideo.jpg" title="No video playback capabilities" />
</object>
</video>3.添加媒体支持如音频和视频格式，在</body>标签前添加以下代码
<script>$('video,audio').mediaelementplayer(/*Options */);
</script>当然你还可以为自己创建MediaElementPlayer对象播放方式
<script>varplayer = newMediaElementPlayer('#player',/*Options */);
//... more code ...player.pause();
player.setSrc('mynewfile.mp4');
player.play();
</script>4.还需最后一步，为服务器添加 MIME-types
如果是Linux/Apache服务器，我们需要创建一个名为.htaccess的文件，让后上传到web服务器根的目录才能让浏览器正确识别。
使用windows/iis 服务器的朋友可以查看MIME types 在 IIS6 和 IIS7 中的设置方法。
以下是官方提供的代码：
AddType video/ogg .ogv
AddType video/mp4 .mp4
AddType video/webm .webm之前我试过以上代码，貌似部分浏览器打不开视频，识别不准确，然后又从上网找了一个完美版的
AddType video/ogg ogv
AddType video/mp4 mp4 m4v
AddType video/webm webm
AddType audio/ogg ogg
AddType audio/ogg oga
AddType audio/wav wav
AddType audio/mpeg mp3
AddType audio/mp4 mp4
AddType audio/mp4 mpa将以上代码粘贴到文本中，保存为.htaccess文件后上传到服务器根目录即可，建议上传一份到存放视频文件夹相同的位置。
MediaElement.js支持插入视频缩略图
让视频正在加载的时候你可以先显示出视频图片，在vedio标签中插入poster即可
<video width="640"height="360"id="player2"poster="../media/echo-hereweare.jpg"controls preload="none">
MediaElement.js完美支持音频播放
想要MediaElement.js支持音频播放那是再简单不过了，只需添加一行代码即可。
<audio id="player"src="../media/AirReview-Landmarks-02-ChasingCorporate.mp3"type="audio/mp3"controls>
MediaElement.js 支持字幕插入
我们都知道有些原生视频是没内嵌字幕的，所以我们需要额外对视频添加字幕，幸运的是MediaElement.js支持着项功能，我们可以直接进行调用。
为视频添加<track>元素，我们可以参考以下代码进行设置
<video width="320"height="240"poster="poster.jpg"controls="controls"preload="none"><source type="video/mp4"src="myvideo.mp4" /><track kind="subtitles"src="subtitles.srt"srclang="en" /></video>选择自动添加指定语言的字幕
jQuery(document).ready(function($) {
$('audio,video').mediaelementplayer({
// automatically create these translations on load
translations:['es','ar','yi','zh-cn'],
// allow the user to add additional translations
translationSelector: true,
// start with English automatically turned on
startLanguage: 'en'
});
});
以上是MediaElement.js的简要介绍，想了解更多详细内容可以访问 MediaElement.js官网
如果你使用的是wordpress程序，也可以直接搜索wordpress MediaElement.js 官方插件 进行安装，使用方法跟前面介绍的类似。