初識jplayer插件是因為它的兼容性是最好的，可以兼容到IE6，官網(wǎng)上對它兼容性有很詳細的說明

這個是我選擇使用它的首要原因。

現(xiàn)在從需求上來了解它的使用方法吧。第一個需求：MP3格式的音頻在網(wǎng)頁播放，樣式如下：

剛看到這個需求的時候，還是覺著有些難度的。我從官網(wǎng)（http://www.jplayer.cn/）上下載了這個的壓縮包，直接拿出了里面的例子套用（路徑：/examples/blue.monday/demo-01-supplied-mp3.htm），不得不說，這也是學(xué)會使用這個插件的最快的方法。壓縮包里面的例子很全面，總有一款適合你。

demo的樣式是這樣的：

現(xiàn)在看一下它的html結(jié)構(gòu)：

<div id="jquery_jplayer_1" class="jp-jplayer"></div><!--存放音頻和視頻源，絕對需要-->
<div id="jp_container_1" class="jp-audio" role="application" aria-label="media player"><!--播放器樣式wrap-->
  <div class="jp-type-single">
    <div class="jp-gui jp-interface">
      <div class="jp-controls"><!--播放和停止按鈕-->
        <button class="jp-play" role="button" tabindex="0">play</button>
        <button class="jp-stop" role="button" tabindex="0">stop</button>
      </div>
      <div class="jp-progress"><!--進度條-->
        <div class="jp-seek-bar">
          <div class="jp-play-bar"></div>
        </div>
      </div>
      <div class="jp-volume-controls"><!--音量控制鍵-->
        <button class="jp-mute" role="button" tabindex="0">mute</button>
        <button class="jp-volume-max" role="button" tabindex="0">max volume</button>
        <div class="jp-volume-bar">
          <div class="jp-volume-bar-value"></div>
        </div>
      </div>
      <div class="jp-time-holder"><!--視頻時間和重復(fù)播放按鈕-->
        <div class="jp-current-time" role="timer" aria-label="time">&nbsp;</div>
        <div class="jp-duration" role="timer" aria-label="duration">&nbsp;</div>
        <div class="jp-toggles">
          <button class="jp-repeat" role="button" tabindex="0">repeat</button>
        </div>
      </div>
    </div>
    <div class="jp-details"><!--視頻的主題-->
      <div class="jp-title" aria-label="title">&nbsp;</div>
    </div>
    <div class="jp-no-solution"><!--jplayer提示信息，默認隱藏-->
      <span>Update Required</span>
      To play the media you will need to either update your browser to a recent version or update your <a  target="_blank">Flash plugin</a>
    </div>
  </div>
</div>

結(jié)構(gòu)是不是很清晰呢，我們需要的所有功能這里面都已經(jīng)包含了，根據(jù)我的需求，我可以只保留播放和暫停按鈕以及進度條，簡化過后的html：

<div id="jquery_jplayer_1" class="jp-jplayer"></div><!--存放音頻和視頻源，絕對需要-->
<div id="jp_container_1" class="jp-audio" role="application" aria-label="media player"><!--播放器樣式wrap-->
  <div class="jp-type-single">
    <div class="jp-gui jp-interface">
      <div class="jp-controls"><!--播放暫停按鈕-->
        <button class="jp-play" role="button" tabindex="0">play</button>
      </div>
      <div class="jp-progress"><!--進度條-->
        <div class="jp-seek-bar">
          <div class="jp-play-bar"></div>
        </div>
      </div>    
    </div>
  </div>
</div>

接下來就是樣式問題了。我們可以通過重置它的樣式來實現(xiàn)我們原本的功能，我建議是在html上新增class，進行重置。

具體怎么實現(xiàn)我就不再細說了，進入最關(guān)鍵的地方，js的調(diào)用。

先看一下demo中怎么調(diào)用的?并且用到了什么參數(shù)?參數(shù)代表的是什么意思?

<script type="text/javascript">
//<![CDATA[
$(document).ready(function(){

  $("#jquery_jplayer_1").jPlayer({
    ready: function () {
      $(this).jPlayer("setMedia", {
        title: "Bubble",
        mp3: "http://jplayer.org/audio/mp3/Miaow-07-Bubble.mp3"
      });
    },
    swfPath: "../../dist/jplayer",
    supplied: "mp3",
    wmode: "window",
    useStateClassSkin: true,
    autoBlur: false,
    smoothPlayBar: true,
    keyEnabled: true,
    remainingDuration: true,
    toggleDuration: true
  });
});
//]]>
</script>

第一個參數(shù)：ready

官網(wǎng)的解釋是：定義綁定到$.jPlayer.event.ready 事件的事件處理器函數(shù)。(事件處理器ready創(chuàng)建的目的是消除JS代碼和Flash代碼間的競態(tài)條件。因此保證當js代碼執(zhí)行的時候Flash函數(shù)定義已經(jīng)存在。)

通俗來說就是用來存放媒體的鏈接、主題。它支持的格式有：MP3、M4V、webma, webmv, oga, ogv, wav, fla, flv, rtmpa, rtmpv，媒體地址必須放在ready內(nèi)，否則不會生效。

第二個參數(shù)：swfPath

官網(wǎng)的解釋是：定義jPlayer 的Jplayer.swf文件的路徑。它允許開發(fā)者把swf文件放在任何位置，使用相對定位或是絕對路徑合作或是相對服務(wù)器路徑引用。

該參數(shù)是必須存在的。刪除它，ie的低版本瀏覽器將不會正常播放，并且文件的路徑必須是正確的，可以使用相對路徑或絕對地址。

第三個參數(shù)：supplied

這個參數(shù)是告知該媒體支持的格式，對于后臺開發(fā)而言，在上傳媒體時，有十分重要提示作用。

第四個參數(shù)：wmode

即窗口模式。有效的wmode值有: window, transparent, opaque, direct, gpu。這些值具體是什么意思呢，度娘已經(jīng)給出了許多，就不贅述了，就說說它們間的區(qū)別。

window：缺省模式；transparent：透明模式；opaque：無窗口模式；'direct'和'gpu'是flashplayer10及以更高版本新增的參數(shù)，與前面三個值不能同時用的，不然會引起沖突。

這么說還是有些官方，我嘗試刪掉這個參數(shù)，在chrome46.0.2490.86，F(xiàn)irefox45.0.2，Opera36.0.2130.65，IE7、8中，音頻依然可以正常播放。根據(jù)官方API所訴，注意Firefox 3.6 音頻播放器使用Flash解決方案要求設(shè)置選項{wmode:"window"}否則的話，瀏覽器不嗯能夠正確在頁面中放置Flash。

第五個參數(shù)：useStateClassSkin

默認情況下，播放和靜音狀態(tài)下的dom 元素會添加class jp-state-playing, jp-state-muted 這些狀態(tài)會對應(yīng)一些皮膚，是否使用這些狀態(tài)對應(yīng)的皮膚。檢驗它是否對當前頁面是否起作用了，我通過注釋它后，發(fā)現(xiàn)音頻不能中途暫停，只能讓它播放結(jié)束后，再次點擊播放，暫停功能失效。

第六個參數(shù)：autoBlur

點擊之后自動失去焦點。刪除后，對音頻并無其他影響。該參數(shù)是可選項。

第七個參數(shù)：smoothPlayBar

官方解釋：平滑過渡播放條。

將值設(shè)置為false，可以發(fā)現(xiàn)進度條是點擊時，沒有了過渡的過程，是直接到所點位置，體驗并不好。

第八個參數(shù)：keyEnabled

官方解釋：啟用這個實例的鍵盤控制器特性。

通俗點就是是否允許鍵盤控制播放。

第九個參數(shù)：remainingDuration

是否顯示剩余播放時間,如果為false 那么duration 那個dom顯示的是【3:07】,如果為true 顯示的為【-3:07】。像我的音頻沒有時間段顯示的樣式，那么這個參數(shù)也是可選的。

第十個參數(shù)：toggleDuration

允許點擊剩余時間的dom 時切換剩余播放時間的方式，比如從【3:07】點擊變成【-3：07】如果設(shè)置為false ,那么點擊無效，只能顯示remainingDuration 設(shè)置的方式。也是可選參數(shù)。

如上，demo里面所用到的參數(shù)你都知道怎么用了么？如果還有不清楚的，你可以自己直接使用壓縮包里面的demo試驗一下。

除了如上的參數(shù)，還有幾個參數(shù)需特別說明一下:

size:設(shè)置媒體的寬高；

cssSelectorAncestor:定義所有cssSelector的祖先的一個cssSelector。作用相當于css的元素選擇器；

globalVolume：true時共享volume，一個頁面存在多個媒體時，調(diào)整其中一個的音量大小，其他也跟著改變，false則不受影響。

這樣一些簡單的媒體播放需求就實現(xiàn)了。有很多頁面會提出自動播放的需求，在jpalyer里面要怎么實現(xiàn)了。其實也不難。

在ready參數(shù)下，

$(this).jPlayer("setMedia", {
  autoPlay: true
}).jPlayer("play");

自動播放就實現(xiàn)了，頁面需求升級，需要媒體循環(huán)自動播放，如何實現(xiàn)？在API提供了這樣一個事件：

ended: function () {
  $(this).jPlayer("play");
},

需求繼續(xù)升級，媒體自動播放1秒后停止，如何實現(xiàn)呢？

$(this).jPlayer("setMedia", {

}).jPlayer("pause", 1);
這樣還不夠，一個頁面同時有多個媒體（這個不細說，壓縮包里面有案例），怎么阻止同時播放?

play: function() { // 當前媒體播放時，其他媒體暫停播放
   $(this).jPlayer("pauseOthers");
},
......

需求變化很多，但萬變不離其中，有覺得實現(xiàn)不了的功能，可以多多看下官網(wǎng)的API，maybe你就找到了解決之道。

最新評論