La liaison jplayer ne semble pas fonctionner

Question

J'ai hérité d'un lecteur Web qui utilise jPlayer. Cela fonctionne bien pour lire des fichiers audio, mais j'essaie de définir des champs cachés lorsque l'utilisateur joue une piste et que je n'arrive pas à obtenir quelque chose lié à un événement dans jPlayer. J'ai utilisé un code similaire pour me lier à un événement click sur une balise h1 et ça marche bien, mais pas jplayer. Pas d'erreurs non plus. J'ai obtenu les exemples de liaison de la documentation de jPlayer. Voici un extrait de ce que je suis en train de faire:

$(document).ready(function() { 

    //listener for playing the file 
    $("#jquery_jplayer_1").bind($.jPlayer.event.play, function (event) { 

     alert('play'); 
    }); 
}); 

Voici mon html:

<div id="jquery_jplayer_1" class="jp-jplayer"></div> 

    <div id="jp_container_1" class="jp-audio" > 
     <div class="jp-type-single"> 
      <div id="htmlPlayer" style="display: none"> 
       <audio id="audioPlayer" controls style="width:100%;"> 
        <source id="mp3Source" type="audio/mp3" /> 
       </audio> 
      </div> 
      <div class="htmlHidePoint" style="display: none"> 
       <div class="jp-gui jp-interface"> 
        <ul class="jp-controls"> 
         <li><a href="javascript:;" onclick="javascript:alert('test');" class="jp-play" tabindex="1">play</a></li> 
         <li><a href="javascript:;" class="jp-pause" tabindex="1">pause</a></li> 
         <li><a href="javascript:;" class="jp-stop" tabindex="1">stop</a></li> 
         <li><a href="javascript:;" class="jp-mute" tabindex="1" title="mute">mute</a></li> 
         <li><a href="javascript:;" class="jp-unmute" tabindex="1" title="unmute">unmute</a></li> 
         <li><a href="javascript:;" class="jp-volume-max" tabindex="1" title="max volume">max volume</a></li> 
        </ul> 
        <div class="jp-progress"> 
         <div class="jp-seek-bar"> 
          <div class="jp-play-bar"></div> 
         </div> 
        </div> 
        <div class="jp-volume-bar"> 
         <div class="jp-volume-bar-value"></div> 
        </div> 
        <div class="jp-time-holder"> 
         <div class="jp-current-time"></div> 
         <div class="jp-duration"></div> 

         <ul class="jp-toggles"> 
          <li><a href="javascript:;" class="jp-repeat" tabindex="1" title="repeat">repeat</a></li> 
          <li><a href="javascript:;" class="jp-repeat-off" tabindex="1" title="repeat off">repeat off</a></li> 
         </ul> 
        </div> 
       </div> 
      </div> 
      <div class="jp-title"> 
       <ul> 
        <li><span id="songname">No Song Selected</span></li> 
       </ul> 
       <div class="under"> 
        <ul> 
         <li><a href="#" onclick="ViewTranscript();return false;" onkeypress="ViewTranscript();return false;" tabindex="2">Transcript</a></li> 
         <li><a href="#" onclick="ViewDowloadOptions();return false;" onkeypress="ViewDowloadOptions();return false;" tabindex="2">Download</a></li> 
        </ul> 
       </div> 
      </div> 
      <div class="htmlHidePoint" style="display: none"> 
       <div class="jp-no-solution"> 
        <span>Update Required</span> 
        To play the media you will need to either update your browser to a recent version or update your <a href="http://get.adobe.com/flashplayer/" target="_blank">Flash plugin</a>. 
       </div> 
      </div> 
     </div> 
    </div>&nbsp; 

Le les fichiers source réels sont chargés via l'option d'erreur dans la méthode jPlayer:

   error: function (event) { 
       if (event.jPlayer.error.type == 'e_url_not_set') { 
        $(this).jPlayer("setMedia", { 
         mp3: '<%=ResolveUrl("~/Handlers/Podcasts.ashx") %>?command=ZipPodcast&PodcastID=' + selectedPodcast.ItemID + '&options=audio' 
        }); 

        $(this).jPlayer("play"); 
       } 
      }, 

Answer 1

Afficher html pour le jPlayer. Assurez-vous que l'identifiant est correct.

Essayez spécifiant les options à la place:

$("#jquery_jplayer_1").jPlayer({ 
    play: function() { 
    alert('hi'); 
    } 
}); 

Êtes-vous obligatoire avant ou après la jPlayer est initialisée avec vos options?

Le jPlayer est-il sur la page lorsque vous liez?

Answer 2

Il n'y a rien de mal sur votre code, la façon dont vous créez l'événement est correcte, normalement alert('play') apparaîtra. Essayez de mettre vos instructions sous l'instanciation de jPlayer.

Si cela ne fonctionne pas, cela pourrait être dû au fait que l'instanciation n'a pas été un succès pour certaines raisons. peut-être le sélecteur utilisé pour récupérer le Royaume est faux, etc ...

$("#jquery_jplayer_1").jPlayer() 
$("#jquery_jplayer_1").bind($.jPlayer.event.play, function (event) { 
    alert('hi'); 
}); 

Essayez également de mettre l'événement en tant que choix de la méthode jPlayer(), comme indiqué sur la réponse de Martin Mazza Dawson