jplayer綁定似乎不起作用

我已經繼承了一個使用jPlayer的web播放器。它適用於播放音頻文件，但我試圖設置一些隱藏的字段，當用戶播放音軌時，我似乎無法獲得與jPlayer中的任何事件綁定的內容。我使用了類似的代碼綁定到h1標籤上的點擊事件，並且它工作正常，但jplayer沒有。沒有錯誤。我從jPlayer的文檔中獲得了綁定示例。這裏是我想要做的一個片段：jplayer綁定似乎不起作用

$(document).ready(function() { 

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

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

這裏是我的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;

的實際源文件通過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"); 
       } 
      },

來源

2017-04-19 Levi Wallach

顯示jPlayer的html。確保id是正確的。

嘗試在選項中指定它來代替：

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

都在你面前或jPlayer被初始化與你的選擇後綁定？

綁定時頁面上的jPlayer？

來源

2017-04-20 07:47:16

是的，我在答覆中提到我嘗試過兩種方式。我將立即附上我的html –

你的代碼沒有錯，你創建事件的方式是正確的，通常會彈出alert('play')。

試着把你的語句放在jPlayer實例下。如果它不起作用，可能是因爲某些原因實例化不成功。也許用來獲取DOM的選擇是錯誤的，等等

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

也可以嘗試把事件作爲一個選項上jPlayer()方法，由馬丁·道森馬紮

來源

2017-04-20 07:58:08 nvl

這與我所說的完全相同... –

對不起，我剛剛編輯了我的回答 – nvl

是的，Iv'e嘗試在選項中添加play：item，但也是這樣不會產生警報。我還將綁定語句移到了jplayer實例化的位置，但仍然沒有解決 –

jplayer綁定似乎不起作用

回答

相關問題