jplayer change background on pause

Question

У меня возникают проблемы с моим Jplayer, который является аудиоплеер. У меня возникли проблемы с доступом isPaused. Мне нужно, чтобы фоновый образ div должен был меняться, когда игрок играет. У меня есть два тестовых сценария, и они не работают нормально.

Мой игрок

var myCirclePlayer = new CirclePlayer("#jquery_jplayer_1", 
    { 
     mp3: "/media/audio/RelaxSeg.mp3", 
    }, { 
     supplied: "mp3", 
     cssSelectorAncestor: "#cp_container_1", 
     swfPath: "/jQuery.jPlayer.2.2.0/v11/js", 
     wmode: "window" 
}); 

Мой containter.

<div id="jquery_jplayer_1" class="cp-jplayer"></div> 
    <div id="cp_container_1" class="cp-container" style="background:none;"> 
    <img id="bg_image" class="bg_image1" src="/jQuery.jPlayer.2.2.0/v11/circle.skin/jplayer_bg_img.png" height="60" /> 
     <div class="cp-progress-holder"> <!-- .cp-gt50 only needed when progress is > than 50% --> 
      <div class="cp-progress-1"></div> 
      <div class="cp-progress-2"></div> 
     </div> 

    <div class="cp-circle-control"></div> 
     <ul class="cp-controls"> 
      <li><a id="play1" class="cp-play" tabindex="1">play</a></li> 
      <li><a id="pause1" class="cp-pause" style="display:none;" tabindex="1">pause</a></li> <!-- Needs the inline style here, or jQuery.show() uses display:inline instead of display:block --> 
     </ul> 


    </div>   

Это должно сработать, но по какой-либо причине.

if($("#jquery_jplayer_1").data("jPlayer").status.isPlaying) { 
    $(".bg_image1").attr("src", "/jQuery.jPlayer.2.2.0/v11/circle.skin/jplayer_bg_image_green.png"); 
    } 
    else { 
    $(".bg_image1").attr("src", "/jQuery.jPlayer.2.2.0/v11/circle.skin/jplayer_bg_img.png"); 
    } 

У меня также есть этот код, который doenst работы либо, когда игрок не играет, не отображается кнопка паузы, и когда игрок играет, его стиль становится дисплей = блок.

if(document.getElementById("pause1").style.display = "block") { 
    $(".bg_image1").attr("src", "/jQuery.jPlayer.2.2.0/v11/circle.skin/jplayer_bg_image_green.png"); 
    } 

if(document.getElementById("pause1").style.display = "none") { 
    $(".bg_image1").attr("src", "/jQuery.jPlayer.2.2.0/v11/circle.skin/jplayer_bg_img.png"); 
    } 

Приносим извинения за блок кода, но я не хотел ничего оставлять.

Answer 1

Вы можете подключить в play, pause и end событий в jPlayer делать что-то вроде:

var myCirclePlayer = new CirclePlayer("#jquery_jplayer_1", 
{ 
    mp3: "/media/audio/RelaxSeg.mp3", 
}, { 
    supplied: "mp3", 
    cssSelectorAncestor: "#cp_container_1", 
    swfPath: "/jQuery.jPlayer.2.2.0/v11/js", 
    wmode: "window", 
    play: function() { 
     $(".bg_image1").attr("src", "/jQuery.jPlayer.2.2.0/v11/circle.skin/jplayer_bg_img.png"); 
    }, 
    pause: function() { 
     $(".bg_image1").attr("src", "/jQuery.jPlayer.2.2.0/v11/circle.skin/jplayer_bg_image_green.png"); 
    }, 
    ended: function() { 
     $(".bg_image1").attr("src", "/jQuery.jPlayer.2.2.0/v11/circle.skin/jplayer_bg_image_green.png"); 
    } 
    });