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绑定似乎不起作用

回答

相关问题