2011-10-31 79 views
0

我目前正在使用jPlayer將一些聲音片段添加到我的網站,但是當我點擊播放時,沒有任何反應......網頁只是重新加載,就好像我點擊了一個鏈接,下面是我的HTML和我的JavaScript,也是改變的DOM。jplayer點擊播放什麼都沒有發生

$("#jquery_jplayer").jPlayer({ 
      ready: function (event) { 
       $('.voice').click(function(e) { 
        $(this).jPlayer("setFile", $(this).attr('rel')).jPlayer("play"); 
       e.preventDefault(); 
       }); 
      }, 
      solution: "flash, html", // Flash with an HTML5 fallback. 
      swfPath: "/media/js/jPlayer/", 
      wmode: "window" 
     }); 
}); 



    <li><a href="" rel="<?php echo base_url(); ?>media/uploads/audio/<?php echo $candidate_audio['url']; ?>" class="voice">Play Voice Over</a></li> 

的閃光燈保持

<div id="jquery_jplayer"></div> 

改變上domready中太....

<div id="jquery_jplayer" style="width: 0px; height: 0px;"> 
    <img id="jp_poster_0" style="width: 0px; height: 0px; display: none;"> 
    <object width="1" height="1" id="jp_flash_0" data="/media/js/jPlayer/Jplayer.swf" type="application/x-shockwave-flash" style="width: 0px; height: 0px;"> 
    <param name="flashvars" value="jQuery=jQuery&amp;id=jquery_jplayer&amp;vol=0.8&amp;muted=false"> 
    <param name="allowscriptaccess" value="always"> 
    <param name="bgcolor" value="#000000"> 
    <param name="wmode" value="window"> 
    </object> 
</div> 

回答

0

它已經,因爲我用jPlayer一段時間,但我覺得這行:$(this).jPlayer("setFile"...是問題。由於您在點擊處理程序中執行此操作,因此this可能會指向錯誤的元素。我會試試這個:

$("#jquery_jplayer").jPlayer({ 
    ready: function (event) { 
     var $this = $(this); 
     $('.voice').click(function(e) { 
      $this.jPlayer("setFile", $(this).attr('rel')).jPlayer("play"); 
      e.preventDefault(); 
     }); 
    }, 
    solution: "flash, html", // Flash with an HTML5 fallback. 
    swfPath: "/media/js/jPlayer/", 
    wmode: "window" 
}); 
0

這正是它對我的工作原理。注意其中分配一個click處理程序來阻止點擊一個鏈接的默認行爲的第一線......

$(document).ready(function(){ 

    $('[class^="jp-"]').click(function (e) { e.preventDefault(); }); 

    $("#jquery_jplayer").jPlayer({ 
     ready: function() { 
      $(this).jPlayer("setMedia", { 
       mp3: "/music/mySong.mp3" 
      }); 
     }, 
     swfPath: "/jPlayer/js", 
     supplied: "mp3", 
     volume: 0.6 
    }); 
}); 

在你的情況,你可以嘗試以下。該preventDefault()應在函數中的第一項...

$(document).ready(function(){ 
    $("#jquery_jplayer").jPlayer({ 
     ready: function (event) { 
      $('.voice').click(function(e) { 
       e.preventDefault(); // <-- first item in this function 
       $(this).jPlayer("setFile", $(this).attr('rel')).jPlayer("play"); 
      }); 
     }, 
     solution: "flash, html", // Flash with an HTML5 fallback. 
     swfPath: "/media/js/jPlayer/", 
     wmode: "window" 
    }); 
}); 

還要注意,在原始帖子,你要麼就做一個SO簡單的拼寫錯誤或程序錯誤。還有一組額外的括號,});或者您放錯了位置/省略了最初的document.ready一行。

 $("#jquery_jplayer").jPlayer({ 
      ready: function (event) { 
       $('.voice').click(function(e) { 
        $(this).jPlayer("setFile", $(this).attr('rel')).jPlayer("play"); 
       e.preventDefault(); 
       }); 
      }, 
      solution: "flash, html", // Flash with an HTML5 fallback. 
      swfPath: "/media/js/jPlayer/", 
      wmode: "window" 
     }); 
}); // <--- remove extra closing brackets