目前已經有很多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="myvideo.jpg" width="320" height="240" title="No video playback capabilities" /> </object> </video>
3.添加媒體支持如音頻和視頻格式，在</body>標簽前添加以下代碼
<script> $('video,audio').mediaelementplayer(/* Options */); </script>
當然你還可以為自己創建MediaElementPlayer對象播放方式
<script> var player = new MediaElementPlayer('#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 官方插件 進行安裝，使用方法跟前面介紹的類似。