I'm trying to attach a Play/Pause functions of jPlayer to a custom css button.
Function:
$("#jquery_jplayer_1").jPlayer({
ready: function(event) {
$(this).jPlayer("setMedia", {
mp3: server
}).jPlayer("play");
},
swfPath: "js/",
wmode: "window",
solution: "flash,html",
supplied: "mp3",
preload: "none",
volume:0.75,
cssSelectorAncestor: "",
cssSelector: {
play: "#play",
pause: "#pause"
}
});
$("#jquery_jplayer_1").bind($.jPlayer.event.pause, function(event) {
$(this).jPlayer("clearMedia");
$(this).jPlayer("setMedia", {
mp3: server
});
});
Controlers in jPlayer.min.js:
play:".jp-play",pause:".jp-pause",stop:".jp-stop"
Button:
<script type="text/javascript">
$(document).ready(function(){
$('#button').on('click', function(){
$(this).toggleClass('on');
});
});
</script>
<div id="jquery_jplayer_1" class="jp-jplayer"></div>
<section>
<a class="cssbutton" href="#" id="button"></a>
<span></span>
</section>
How do i go about adding these functions to the button?
Either give your button the ID play or change the CSS selector of your play button to your current ID:
$("#jquery_jplayer_1").jPlayer({
...
cssSelector: {
play: "#button",
...
}
});
Remember, the selectors that you refer to when constructing $("...").jPlayer({...}); should map to elements on your page, as explained in the Docs.
Related
So I've setup a fancybox with boxslider.
I have some problems with the boxslider when opening the fancybox again after closing it the first time.
website (please note that the onclick is only applied to the first block (top row, most left))
The fancybox is called by the code below:
<div class="img-spacer" onclick="$.fancybox({href : '#portfolio-1', width: 1040, margin: 0, padding: 0, closeBtn: false}); $('.bxslider').bxSlider({auto: true,controls: false,pager: false});">
This code works just fine when opening the fancybox for the first time but when I close the fancybox and open it again the boxslider is not working anymore like it is supposed to. It will skip some photo's and won't slide smoothly.
Any suggestions on how to fix this?
Like I mentioned in my comment, you need to move the fancybox init out of the inline click handler, in into your JS file.
$(document).ready(function() {
// Attach fancybox to every .image-spacer div
$("img-spacer").fancybox({
href : '#portfolio-1',
width: 1040,
margin: 0,
padding: 0,
closeBtn: false,
onUpdate: function() {
alert('update!');
},
onCancel: function() {
alert('cancel!');
},
onPlayStart: function() {
alert('play start!');
},
onPlayEnd: function() {
alert('play end!');
},
beforeClose: function() {
alert('before close!');
},
afterClose: function() {
alert('after close!');
},
beforeShow: function() {
alert('before show!');
},
afterShow: function() {
alert('after show!');
},
beforeLoad: function() {
alert('before load!');
},
afterLoad: function() {
alert('after load!');
}
});
// On clicking a .img-spacer div, attach a bxSlider
$(".portfolio").click(function(){
$('.bxslider').bxSlider({
auto: true,
controls: false,
pager: false
});
});
});
And for the HTML
<div class="img-spacer"></div>
Give this a shot and let me know how it went. If you place it on the live site I can take a look at it there.
I have to get access to the following the mp3 file names in a DOM element using PHP. I have got all script elements using getElementsByTagName but am unable to get the file name.
<script type="text/javascript">
//<![CDATA[
$(document).ready(function () {
$("#jquery_jplayer_1").jPlayer({
ready: function () {
$(this).jPlayer("setMedia", {
mp3: 'http://d2ik8svv2swg1p.cloudfront.net/courses/39T.mp3'
});
},
ended: function (event) {
$("#jquery_jplayer_1").jPlayer("play", 0);
},
swfPath: "/js",
supplied: "mp3",
cssSelectorAncestor: "#jp_interface_1"
})
.bind($.jPlayer.event.play, function () {
$(this).jPlayer("pauseOthers");
});
this will get ugly...
<?php
error_reporting(E_ALL);
header("content-type: text/plain;charset=utf8");
$html=base64_decode('IDxzY3JpcHQgdHlwZT0idGV4dC9qYXZhc2NyaXB0Ij4NCiAgICAvLzwhW0NEQVRBWw0KICAgICQoZG9jdW1lbnQpLnJlYWR5KGZ1bmN0aW9uICgpIHsNCiAgICAgICAgJCgiI2pxdWVyeV9qcGxheWVyXzEiKS5qUGxheWVyKHsNCiAgICAgICAgICAgIHJlYWR5OiBmdW5jdGlvbiAoKSB7DQogICAgICAgICAgICAgICAgJCh0aGlzKS5qUGxheWVyKCJzZXRNZWRpYSIsIHsNCiAgICAgICAgICAgICAgICAgICAgbXAzOiAnaHR0cDovL2QyaWs4c3Z2MnN3ZzFwLmNsb3VkZnJvbnQubmV0L2NvdXJzZXMvMzlULm1wMycNCiAgICAgICAgICAgICAgICB9KTsNCiAgICAgICAgICAgIH0sDQogICAgICAgICAgICBlbmRlZDogZnVuY3Rpb24gKGV2ZW50KSB7DQogICAgICAgICAgICAgICAgJCgiI2pxdWVyeV9qcGxheWVyXzEiKS5qUGxheWVyKCJwbGF5IiwgMCk7DQogICAgICAgICAgICB9LA0KICAgICAgICAgICAgc3dmUGF0aDogIi9qcyIsDQogICAgICAgICAgICBzdXBwbGllZDogIm1wMyIsDQogICAgICAgICAgICBjc3NTZWxlY3RvckFuY2VzdG9yOiAiI2pwX2ludGVyZmFjZV8xIg0KICAgICAgICB9KQ0KLmJpbmQoJC5qUGxheWVyLmV2ZW50LnBsYXksIGZ1bmN0aW9uICgpIHsgDQogICAgJCh0aGlzKS5qUGxheWVyKCJwYXVzZU90aGVycyIpOw0KfSk7DQo=');
$domd=#DOMDocument::loadHTML($html);
$ele=$domd->getElementsByTagName("script");
$ele=$ele[0];
$matches=array();
$i=preg_match_all('/mp3\s*\:[^\\\']*\\\'([^\\\']*)/i',$ele->textContent,$matches);
$url=$matches[1][0];
$name=basename($url);
var_dump($name,$url,$matches,$i);
your name is now in $name
I'm trying to create a gallery group that mixes images and video, with the video using JWPlayer6.
I have each working as separate groups, but I can't workout how to integrate the two.
<!-- FancyBox to display images -->
<script type="text/javascript">
$(document).ready(function() {
$(".fancybox").fancybox({
helpers : {
title : { type : 'inside' }
}, // helpers
beforeLoad: function(){
}
});
});
<!-- FancyBox to display videos -->
<script type="text/javascript">
$(document).ready(function() {
$(".fancybox-video").fancybox({
content: '<div id="video_container" style="">Loading video...</div><br>',
autoSize: true,
helpers : {
title : { type : 'inside' }
}, // helpers
beforeLoad: function(){
this.title = $(this.element).attr('caption');
},
afterShow: function(){
jwplayer("video_container").setup({
flashplayer: "/static/js/libs/jwplayerjwplayer.flash.swf",
file: this.href,
autostart: 'true'
}); // jwplayer setup
} // afterShow
}); // fancybox
}); // on
</script>
Ok, I'm not sure this is what JFK was suggesting but this seems to work, although there must be a more efficient way to do it:
<style type="text/css">
.fancybox-nav {
height: 80%;
}
</style>
<script type="text/javascript">
$(document).ready(function() {
$(".fancybox").fancybox({
autoSize: true,
helpers : {
title : { type : 'inside' }
}, // helpers
beforeLoad: function(){
if($(this.element).attr('containertype')=='video'){
this.content = '<div id="video_container" style="">Loading the player ... </div><br>';
};
},
afterShow: function(){
if($(this.element).attr('containertype')=='video'){
jwplayer("video_container").setup({
flashplayer: "jwplayer.flash.swf",
file: this.href,
autostart: 'true'
}); // jwplayer setup
};
}// afterShow
}); // fancybox
}); // on
</script>
And the HTML:
<a class="fancybox" rel="group" title="Video 1" data-fancybox-type="anything" containertype="video" href="1.flv"><img src="1.png"/></a>
<a class="fancybox" rel="group" title="Image 2" href="2.png"><img src="2.png"/></a>
How can I show a confirm box after sound end? I use jPlayer HTML5 Audio player to play sound. I have something like:
$(document).ready(function() {
$("#jquery_jplayer_1").jPlayer({
ready: function(event) {
$(this).jPlayer("setMedia", {
mp3: "http://mysite.com/sound.mp3"
});
},
swfPath: "http://www.jplayer.org/2.1.0/js",
supplied: "mp3"
});
});
use ended event:
$(document).ready(function() {
$("#jquery_jplayer_1").jPlayer({
ready: function(event) {
$(this).jPlayer("setMedia", {
mp3: "http://mysite.com/sound.mp3"
});
},
swfPath: "http://www.jplayer.org/2.1.0/js",
supplied: "mp3",
ended: function() {
confirm('The sound ended?');
}
});
});
I am currently working with jPlayer to give the user some audio playback, if they wish to hear an audio sample, there is a slight complication in that the user first all creates a search, that can return a variable amount of audio files on the results page.
I have looked at the docs for jPlayer and it looks like you need to create a jPlayer instance for each audio file you wish to play, their examples are hard coded, which is great if you know that you will get the same number of results everytime you search for a sample. However for me 1 search could return 1 clip while another search could return 60 clips.
I have tried to implement multiple instances of jplayer like this, but to no avail as I get no audio output.
$('.jp-audio').each(function(index) {
var count = index+1;
$(this).attr("id", "jp_container_"+count)
$(".jp-stop").hide();
$("#jquery_jplayer_"+index+1).jPlayer({
ready: function () {
$(this).jPlayer("setMedia", {
mp3:$(this).find('a.jp-play').attr('rel'),
wav:$(this).find('a.jp-play').attr('rel')
});
},
play: function() { // To avoid both jPlayers playing together.
$(this).jPlayer("pauseOthers");
},
swfPath: "/media/js/jPlayer",
solution: "flash, html",
supplied: "mp3, wav",
wmode: "window",
preload: "auto"
});
$('body').append("<div id='jquery_jplayer_"+count+"' class='jp-jplayer'></div>");
});
How can I create a new jplayer instance for each of my audio clips? Below is the example from the Docs,
$("#jquery_jplayer_1").jPlayer({
ready: function () {
$(this).jPlayer("setMedia", {
m4a: "http://www.jplayer.org/audio/m4a/Miaow-08-Stirring-of-a-fool.m4a",
oga: "http://www.jplayer.org/audio/ogg/Miaow-08-Stirring-of-a-fool.ogg"
});
},
play: function() { // To avoid both jPlayers playing together.
$(this).jPlayer("pauseOthers");
},
repeat: function(event) { // Override the default jPlayer repeat event handler
if(event.jPlayer.options.loop) {
$(this).unbind(".jPlayerRepeat").unbind(".jPlayerNext");
$(this).bind($.jPlayer.event.ended + ".jPlayer.jPlayerRepeat", function() {
$(this).jPlayer("play");
});
} else {
$(this).unbind(".jPlayerRepeat").unbind(".jPlayerNext");
$(this).bind($.jPlayer.event.ended + ".jPlayer.jPlayerNext", function() {
$("#jquery_jplayer_2").jPlayer("play", 0);
});
}
},
swfPath: "../js",
supplied: "m4a, oga",
wmode: "window"
});
$("#jquery_jplayer_2").jPlayer({
ready: function () {
$(this).jPlayer("setMedia", {
m4a: "http://www.jplayer.org/audio/m4a/Miaow-02-Hidden.m4a",
oga: "http://www.jplayer.org/audio/ogg/Miaow-02-Hidden.ogg"
});
},
play: function() { // To avoid both jPlayers playing together.
$(this).jPlayer("pauseOthers");
},
repeat: function(event) { // Override the default jPlayer repeat event handler
if(event.jPlayer.options.loop) {
$(this).unbind(".jPlayerRepeat").unbind(".jPlayerNext");
$(this).bind($.jPlayer.event.ended + ".jPlayer.jPlayerRepeat", function() {
$(this).jPlayer("play");
});
} else {
$(this).unbind(".jPlayerRepeat").unbind(".jPlayerNext");
$(this).bind($.jPlayer.event.ended + ".jPlayer.jPlayerNext", function() {
$("#jquery_jplayer_1").jPlayer("play", 0);
});
}
},
swfPath: "../js",
supplied: "m4a, oga",
cssSelectorAncestor: "#jp_container_2",
wmode: "window"
});
$("#jquery_jplayer_3").jPlayer({
ready: function () {
$(this).jPlayer("setMedia", {
m4a: "http://www.jplayer.org/audio/m4a/Miaow-07-Bubble.m4a",
oga: "http://www.jplayer.org/audio/ogg/Miaow-07-Bubble.ogg"
});
},
play: function() { // To avoid both jPlayers playing together.
$(this).jPlayer("pauseOthers");
},
swfPath: "../js",
supplied: "m4a, oga",
cssSelectorAncestor: "#jp_container_3",
wmode: "window"
});
$("#jplayer_inspector_1").jPlayerInspector({jPlayer:$("#jquery_jplayer_1")});
$("#jplayer_inspector_2").jPlayerInspector({jPlayer:$("#jquery_jplayer_2")});
$("#jplayer_inspector_3").jPlayerInspector({jPlayer:$("#jquery_jplayer_3")});
taken from the source at,
http://jplayer.org/latest/demo-03/
in your case you only need one instance of jPlayer. If your Search Results HTML looked like this:
<ul>
<li data-m4a-path="http://www.example.com/track.m4a">Artist - Track</li>
< ... >
</ul>
then you could add this javascript to play the track:
$("li[data-m4a-path]").click(function () {
$("#jquery_jplayer_1").jPlayer("setMedia", {m4a: $(this).attr("data-m4a-path")});
});
use this: http://kolber.github.io/audiojs/
i have this on my portfolio website i'm working on and it's working very fine until now
and i need this a lot on a soundtrack portfolio
hope it helps