HTML5中的新新标签<video>虽然可以代替flash player，但实际上由于受到版权等各种解码限制，以及受到兼容性的质疑，导致这个标签只能在部分浏览器中使用，为了更好的兼容不同的浏览器，以让不同的用户体验HTML5特性，MediaElement.js横空出世。
HTML5
<video>and<audio>made easy.
One file. Any browser. Same UI.
这是MediaElement.js官网的口号，只需要一个js文件，一切都已经完成了。目前，wordpress3.6已经采用这个脚本，在wordpress新版本的默认主题中，你已经可以快速方便的使用各种视频了。
这个脚本的使用方法很简单，首先从MediaElement.js官网下载它，然后简单的在你的网页头部部署文件：
<script src="jquery.js"></script> <script src="mediaelement-and-player.min.js"></script> <link rel="stylesheet" href="mediaelementplayer.css" />
最后，就是让你的<video>标签更兼容：
<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-HTML5 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>
因为这个脚本提供了统一的播放界面，无论是PC浏览器，还是手机客户端，都采用统一的UI，所以让你的网页不再受到浏览器的限制。
播放视频：
<script>
// using jQuery
$('video,audio').mediaelementplayer(/* Options */);
</script>
这在HTML5中需要不少的代码，只能调用浏览器的API，但通过植入MediaElement.js可以实现更多。它还提供了很多API，你可以通过它的官网首页就可以获得这些API了。
