javascript - 将 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
        });
    });

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中所述。