溫馨提示×

溫馨提示×

您好，登錄后才能下訂單哦！

密碼登錄×
登錄注冊×
其他方式登錄
點擊 登錄注冊 即表示同意《億速云用戶服務(wù)條款》

HTML5播放器 MediaElement.js 使用方法

發(fā)布時間：2020-06-25 15:45:28 來源：網(wǎng)絡(luò) 閱讀：839 作者：Web前端師 欄目：移動開發(fā)

HTML5播放器 MediaElement.js 使用方法


目前已經(jīng)有很多html5播放器可以使用，使用html5播放器可以輕松的在頁面中插入媒體視頻，從而使我們的web頁面變得更加豐富多彩，所以今天向大家推薦一款非常優(yōu)秀的html5播放器MediaElement.js，它不僅能夠添加我們常用的html5視頻格式（mp4,m4v,mov），而且還支持回退方式，即一些低版本的瀏覽器不支持HTML5播放可以采取flash的方式進行播放，從而達到支持絕大部分的瀏覽器。


備注：我們都知道進入HTML5時代以后W3C組織為web視頻播放加入了一個非常友好的標簽<video>，它可以讓你直接插入mp4、mov等格式的視頻，但是這是瀏覽器默認的方式，播放的功能也比較單一，所以借助MediaElement.js可以實現(xiàn)豐富的播放效果。


目前MediaElement.js所能支持的瀏覽器如圖


首先MediaElement.js支持三種外觀顯示


默認效果


ted-外觀


wmp-外觀


外觀設(shè)置方法：只需要在對應(yīng)的<video>標簽中加入對應(yīng)的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>復(fù)制代碼


<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>復(fù)制代碼


<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>復(fù)制代碼


如何調(diào)用MediaElement.js ？


首先我們下載 MediaElement.js官方最新版


1.引用js腳本和css樣式表 并放置在<head> 標簽中。.w3cfuns.com/jquery"></script>


ript src="hediaelement-and-player.min></script>


ink rel="styleshw3cfom/mediaelemecss" />復(fù)制代碼


2. 調(diào)用視頻文ideo src="htvideo.mp4" width="320" height="240"></video>復(fù)制代碼


支持單一的h.264編碼的視頻文件（mp4）,該方式適用于firefox,chrome,safari,已經(jīng)ie9以上版本的主流瀏覽器。


flash回退


為了支持低版本的瀏覽器以及對不同用戶群的支持，MediaElement.js提供了flash回退的方式，你可以采用以下代碼進行調(diào)用。<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>復(fù)制代碼


向AI問一下細節(jié)

免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點不代表本網(wǎng)站立場，如果涉及侵權(quán)請聯(lián)系站長郵箱：is@yisu.com進行舉報，并提供相關(guān)證據(jù)，一經(jīng)查實，將立刻刪除涉嫌侵權(quán)內(nèi)容。

AI
助
手