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所能支持的瀏覽器如圖
首先MediaElement.js支持三種外觀顯示
默認效果
ted-外觀
wmp-外觀
外觀設置方法：只需要在對應的<video>標籤中加入對應的class 類即可<h2>Default Skin</h2>
<video width="640" height="360" srnsm/../media/echo-hereweare="video/mp4"
id="player1" poster./media/echo-herewea
controls="controls" preload="none"></video>複製代碼
<h2>TED SKin</h2>
video class="mejs-ted" width="640" height="360" sr/media/echo-her type="video/mp4"
id="player1" poster=edia/echo-hereweare
controlscontrols" preload="none"video>複製代碼
<h2MP SKin</h2>
video class="mejs-wmp" width="640" height="360" sdia/echo-herewearp4" type="video/mp4"
id="player1" pos="../media/echo
controltrols" preload="none/video>複製代碼
如何調用MediaElement.js ？
首先我們下載 MediaElement.js官方最新版
1.引用js腳本和css樣式表 並放置在<head> 標籤中。.w3cfuns.com/jquery"></script>
ript src="hediaelement-and-player.min></script>
ink rel="styleshw3cfom/mediaelemecss" />複製代碼
2. 調用視頻文ideo src="htvideo.mp4" width="320" height="240"></video>複製代碼
支持單一的h.264編碼的視頻文件（mp4）,該方式適用於firefox,chrome,safari,已經ie9以上版本的主流瀏覽器。
flash回退
爲了支持低版本的瀏覽器以及對不同用戶羣的支持，MediaElement.js提供了flash回退的方式，你可以採用以下代碼進行調用。<vieo width="320" height="240" poster="poster.jpg" controls="controls" preload="none">
for Safari, IE9, iPhone, iPad, Android, and Windows Phone 7 -->
urce type="video/mp4" s>
WebM/VP8 for Firefox4, Opera, and Chrome -->
<source type="video/webm" sr" />
<!-- Ogg/Vorbis for older Firefox and Opera versions -->
source type="video/ogg" src=
<!-- Optional: Add subtitles for each language -->
<track kind="subtitles" s
- Optional: Add chapters -->
<track kind="chapters" s>
<!-- Flash fallback for non-<span class="wp_keywordlink_affilia href=tle="查看HTML5中的全部文章" targ>HTML5</aspan> browsers without JavaScript -->
<object width="320" height="240" type="apa="flashmediaelement.
<param name="movie" value="flashmediaeleme
<param name="flashvars" value="controls=true&file=myvi
<!-- Image as a last resort
<img sridth="320" height="240" title="No video playback capabili
</objec>
</video>複製代碼