0

我有一个从本教程中获取的开/关按钮，并在我的 jPlayer 页面上实现了该按钮。

  • 正如您在教程中看到的，按钮有两种状态：按下和未按下
  • 我使用修改后的 Player 的 jquery 文件在我的页面上实现了按钮。

如果我尝试在 index.html 中实现它，它会变为按下但不会播放，如果我在 jQuery 中实现它，它不会变为按下但会播放。

这是我里面的代码metroplayer.js：

$(document).ready(function(){
            $('#button').on('click', function(){
                $(this).toggleClass('on');
            });
        });

(function($){
    $.fn.extend({


        metroPlayer: function(options) {

            var defaults = {

            }

            var options =  $.extend(defaults, options);

            return this.each(function() {
                obj = $(this);
                o = options;

                $template = $('<div id="metro-wrapper">'+
                '<div id="metro-left-overlay"></div>'+
                '<div id="jp_container_N" class="">'+
                '<div id="jquery_jplayer_N" class="jp-jplayer"></div>'+
                '<div class="jp-gui">'+
                '<div class="jp-interface">'+
                '<div id="metro-left">'+
                '<div id="metro-controls">'+
                '<ul>'+
                //'<li id="metro-prev" class="jp-prev"><img src="img/prev.png" /></li>'+
                '<section><a id="button" class="onoffbutton jp-play" href="#">&#xF011;</a>'+
                '<span></span>'+
                '</section>'+

阻止按钮以“按下”模式出现的代码有什么问题？

这是我的播放器页面。

4

2 回答 2

1

你还没有jPlayer( "play" );在你的点击事件上实现实际的。我想你想做的是

$('#button').on('click', function(){
    $(this).toggleClass('on');
    $musicPlayer.jPlayer({ //whatever json you want })("play");
});

或类似的东西。这意味着您必须将此事件绑定移动到 AFTER setup your player on $musicPlayer，因此请确保您这样做。

于 2013-01-22T23:25:12.147 回答
1

只需将 css 类添加到您的按钮元素不会触发 jPlayer 元素开始播放。尝试在你的点击事件函数中添加这个：

if( $(this).hasClass("on") ){
    $(yourplayerid).jPlayer( "play" );
} else {
    $(yourplayerid).jPlayer( "stop" );
}

来源： http ://www.jplayer.org/latest/developer-guide/#jPlayer-play

于 2013-01-22T23:11:22.563 回答