溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
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 類即可<h3>Default Skin</h3>
<video width="640" height="360" srnsm/../media/echo-hereweare="video/mp4"
id="player1" poster./media/echo-herewea
controls="controls" preload="none"></video>復制代碼
<h3>TED SKin</h3>
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>復制代碼
<h3MP SKin</h3>
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>復制代碼
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
