我正在尝试将 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
});
});
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"></a>
<span></span>
</section>
如何将这些功能添加到按钮?