I am currently working with jPlayer to add some sound clips to my website, however when I click play, nothing happens...the page just reloads as if I have clicked a link, below is my HTML and my javascript, and also the altered DOM.
$("#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>
the flash holder
<div id="jquery_jplayer"></div>
altered on domReady too....
<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>
It's been a while since I used jPlayer, but I think this line: $(this).jPlayer("setFile"...
is the problem. Since you're doing that in a click-handler, this
will probably point to the wrong element. I would try 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"
});
This is exactly how it's working for me. Note the first line which assigns a click handler to block the default behavior of clicking a link...
$(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
});
});
In your case, you could try the following. The preventDefault()
should be the first item in the function...
$(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"
});
});
Also note that in your original posting, you've either made a simple typo on SO or a programming error. There is an extra set of closing brackets, });
or you've misplaced/left out the initial document.ready
line.
$("#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
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.