初識(shí)jplayer插件是因?yàn)樗募嫒菪允亲詈玫模梢约嫒莸絀E6，官網(wǎng)上對(duì)它兼容性有很詳細(xì)的說(shuō)明

這個(gè)是我選擇使用它的首要原因。

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

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

demo的樣式是這樣的：

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

<div id="jquery_jplayer_1" class="jp-jplayer"></div><!--存放音頻和視頻源，絕對(duì)需要-->
<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"><!--進(jìn)度條-->
        <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"><!--視頻時(shí)間和重復(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提示信息，默認(rèn)隱藏-->
      <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ù)我的需求，我可以只保留播放和暫停按鈕以及進(jìn)度條，簡(jiǎn)化過(guò)后的html：

<div id="jquery_jplayer_1" class="jp-jplayer"></div><!--存放音頻和視頻源，絕對(duì)需要-->
<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"><!--進(jìn)度條-->
        <div class="jp-seek-bar">
          <div class="jp-play-bar"></div>
        </div>
      </div>    
    </div>
  </div>
</div>

接下來(lái)就是樣式問(wèn)題了。我們可以通過(guò)重置它的樣式來(lái)實(shí)現(xiàn)我們?cè)镜墓δ?，我建議是在html上新增class，進(jìn)行重置。

具體怎么實(shí)現(xiàn)我就不再細(xì)說(shuō)了，進(jì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>

第一個(gè)參數(shù)：ready

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

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

第二個(gè)參數(shù)：swfPath

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

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

第三個(gè)參數(shù)：supplied

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

第四個(gè)參數(shù)：wmode

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

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

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

第五個(gè)參數(shù)：useStateClassSkin

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

第六個(gè)參數(shù)：autoBlur

點(diǎn)擊之后自動(dòng)失去焦點(diǎn)。刪除后，對(duì)音頻并無(wú)其他影響。該參數(shù)是可選項(xiàng)。

第七個(gè)參數(shù)：smoothPlayBar

官方解釋：平滑過(guò)渡播放條。

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

第八個(gè)參數(shù)：keyEnabled

官方解釋：?jiǎn)⒂眠@個(gè)實(shí)例的鍵盤控制器特性。

通俗點(diǎn)就是是否允許鍵盤控制播放。

第九個(gè)參數(shù)：remainingDuration

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

第十個(gè)參數(shù)：toggleDuration

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

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

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

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

cssSelectorAncestor:定義所有cssSelector的祖先的一個(gè)cssSelector。作用相當(dāng)于css的元素選擇器；

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

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

在ready參數(shù)下，

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

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

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

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

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

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

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

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

最新評(píng)論