將jPlayer函數分配給自定義按鈕

Question

我試圖將jPlayer的播放/暫停函數附加到自定義css按鈕。

功能：

$("#jquery_jplayer_1").jPlayer({ 
     ready: function(event) { 
      $(this).jPlayer("setMedia", { 
       mp3: server 
      }).jPlayer("play"); 
     }, 
     swfPath: "js/", 
     wmode: "window", 
     solution: "flash,html", 
     supplied: "mp3", 
     preload: "none", 
     volume:0.75, 
     cssSelectorAncestor: "", 
     cssSelector: { 
       play: "#play", 
       pause: "#pause" 
     } 
    }); 

    $("#jquery_jplayer_1").bind($.jPlayer.event.pause, function(event) { 
     $(this).jPlayer("clearMedia"); 
     $(this).jPlayer("setMedia", { 
       mp3: server 
     }); 
    }); 

Controlers在jPlayer.min.js：

play:".jp-play",pause:".jp-pause",stop:".jp-stop" 

按鈕：

<script type="text/javascript"> 
    $(document).ready(function(){ 
     $('#button').on('click', function(){ 
      $(this).toggleClass('on'); 
     }); 
    }); 
</script> 

<div id="jquery_jplayer_1" class="jp-jplayer"></div> 
     <section> 
     <a class="cssbutton" href="#" id="button">&#xF011;</a> 
     <span></span> 
    </section> 

我怎麼去有關添加這些功能的按鈕？

Answer 1

要麼給你的按鈕ID play或您的播放按鈕的CSS選擇器更改爲當前ID：

$("#jquery_jplayer_1").jPlayer({ 
    ... 
    cssSelector: { 
      play: "#button", 
      ... 
    } 
}); 

記住，你是指構建$("...").jPlayer({...});時的選擇應該映射到你的頁面上的元素如Docs中所述。