Javascript jplayer单击“播放”不会发生任何事情
我目前正在与jPlayer合作,向我的网站添加一些声音片段,但是当我单击“播放”时,什么也没有发生……页面只是重新加载,就像我单击了一个链接一样,下面是我的HTML和javascript,还有修改过的DOMJavascript jplayer单击“播放”不会发生任何事情,javascript,jquery,audio,jplayer,Javascript,Jquery,Audio,Jplayer,我目前正在与jPlayer合作,向我的网站添加一些声音片段,但是当我单击“播放”时,什么也没有发生……页面只是重新加载,就像我单击了一个链接一样,下面是我的HTML和javascript,还有修改过的DOM $("#jquery_jplayer").jPlayer({ ready: function (event) { $('.voice').click(function(e) { $(this).j
$("#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>
$(“#jqueryjplayer”).jplayer({
就绪:功能(事件){
$('.voice')。单击(函数(e){
$(this.jPlayer(“setFile”),$(this.attr(“rel”)).jPlayer(“play”);
e、 预防默认值();
});
},
解决方案:“flash,html”//flash具有HTML5回退功能。
swfPath:“/media/js/jPlayer/”,
wmode:“窗口”
});
});
闪光灯座
<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&id=jquery_jplayer&vol=0.8&muted=false">
<param name="allowscriptaccess" value="always">
<param name="bgcolor" value="#000000">
<param name="wmode" value="window">
</object>
</div>
我已经有一段时间没有使用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"
});
这正是我的工作方式。请注意,第一行指定了一个单击处理程序来阻止单击链接的默认行为
$(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"
});
});
$("#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