Best way to use multiple players across a site

Phil Coyne

unread,

Nov 14, 2011, 1:25:40 PM11/14/11

to jpl...@googlegroups.com

I'm attempting to build a site for a musician with multiple players across it.

Every time I try to add a new player in to the jQuery, it breaks all of the other ones. Your installation guide doesn't actually give any examples of how the script should be structured, so I'm finding it hard to work out how to mix and match single players, playlists etc on to one site. Is this possible? And if so, could someone post the code to make it happen?

Thanks.

Simone Gentili

unread,

Nov 14, 2011, 2:14:45 PM11/14/11

to jpl...@googlegroups.com

wi-ki wi-ki wi-ki wi-ki wi-ki wi-ki wi-ki

2011/11/14 Phil Coyne <ph...@wildilk.com>:

> --
> You received this message because you are subscribed to the Google Groups
> "jPlayer: HTML5 Audio & Video for jQuery" group.
> To view this discussion on the web visit
> https://groups.google.com/d/msg/jplayer/-/ePLAWkIPM1YJ.
> To post to this group, send email to jpl...@googlegroups.com.
> To unsubscribe from this group, send email to
> jplayer+u...@googlegroups.com.
> For more options, visit this group at
> http://groups.google.com/group/jplayer?hl=en.
>

--
¡demo! is ...
yiinotes: http://www.yiinotes.com (it/en)
pindariol: http://www.pindariol.com

Dustin Blake

unread,

Nov 15, 2011, 1:49:03 PM11/15/11

to jpl...@googlegroups.com

Each instance of jPlayer requires its own cssAncestorSelector container and its own DOM object

Go to http://www.jplayer.org/latest/demo-03-video/

This demonstrates multi-instances of jPlayer on one page

Beneath each instance, you'll see a link to show jPlayer Inspector, click that and it will display a bunch of information specific to that jPlayer Instance, take a look at the Constructor options and you'll see each on starts out like

$('#jquery_jplayer_1').jPlayer({ <- first

$('#jquery_jplayer_2').jPlayer({ <- second

etc...

As well, also take a look at the cssSelectorAncestor option for each instance in the same jPlayer Inspector section, and youll see it looks like:

cssSelectorAncestor: '#jp_container_1', <-first

cssSelectorAncestor: '#jp_container_2', <-second

etc..

Hope that helps

Message has been deleted

2-XIte AG

unread,

Mar 4, 2012, 10:44:10 AM3/4/12

to jpl...@googlegroups.com

Hi to All,

Im sorry that I still have to beg for this little help, but Im trying for days to put more player on one page without any success.

Getting almost frustrated from it...

Could some one tell me where do I have to edit the instances?

$('#jquery_jplayer_1').jPlayer({ <- first

$('#jquery_jplayer_2').jPlayer({ <- second

Thank you a lot for help,

Kindest,

2-Xite AG

Op dinsdag 15 november 2011 19:49:03 UTC+1 schreef Dustin Blake het volgende:

Dustin Blake

unread,

Mar 4, 2012, 11:56:19 PM3/4/12

to jpl...@googlegroups.com

Have you read the quick start guide as well as looked at the demo for multiple audio player instances?

http://jplayer.org/latest/quick-start-guide/

http://jplayer.org/latest/demo-03/

On Sunday, March 4, 2012 10:38:33 AM UTC-5, 2-XIte AG wrote:

Op maandag 14 november 2011 19:25:40 UTC+1 schreef Phil Coyne het volgende:

Message has been deleted

2-XIte AG

unread,

Mar 5, 2012, 3:38:46 AM3/5/12

to jpl...@googlegroups.com

Thank you for the reaction.

Yes, sure... I did read all this stuff, the only thing is I do not find/get: where to change the cssSelectorAncestor option.

Is that in jquery.jplayer.min.js?

If so, from what line to what? Every time I change there, one player does not play at all.

Thank you for the little help,

Kindest,

2-Xite

Op maandag 5 maart 2012 05:56:19 UTC+1 schreef Dustin Blake het volgende:

Utz

unread,

Mar 5, 2012, 5:28:33 AM3/5/12

to jPlayer: HTML5 Audio & Video for jQuery

I just almost finished a multi page layout (4 pages in 1 html) for a
musician here:
http://mobil.axel-glenn-mueller.de

I am using only 1 playlist, but i need to stop/play the music also on
the other pages.
For that i have used the same cssSelectorAncestor on four positions
(which is NOT allowed, but works)

Can somebody tell me, how to do it the correct way?
To me it looks like i would have tom make copies of the playlist,
right?

Thanks in advance for your help and thank you very much for this nice
player!

Dustin Blake

unread,

Mar 5, 2012, 9:15:55 PM3/5/12

to jpl...@googlegroups.com

You don't need to edit the jPlayer source files to use cssSelectorAncestor because its an option.

http://jplayer.org/latest/developer-guide/#jPlayer-option-set-cssSelectorAncestor

The multi-instance audio demo has the information your looking for http://jplayer.org/latest/demo-03/

Under each player there is a button/link for showing jPlayer inspector which gives you the code for that specific players instance.

On Monday, March 5, 2012 3:37:34 AM UTC-5, 2-XIte AG wrote:

Op maandag 14 november 2011 19:25:40 UTC+1 schreef Phil Coyne het volgende:

I'm attempting to build a site for a musician with multiple players across it.

2-XIte AG

unread,

Mar 6, 2012, 2:30:27 AM3/6/12

to jpl...@googlegroups.com

Hi Dustin,

Thank you a lot for your input!

I did follow all the steps from this quick guide:

http://jplayer.org/latest/quick-start-guide/step-8-audio/

But I did not found any information about where to put/change the inspector's code for that specific players instance. Did I really miss some steps from the guide? The source is below.

Could you give me another hint, please? Because I still do not get it... Sorry...

Many thanks,

Kindest,

2-Xite

My source looks like this:

<html>
<head>

$(document).ready(function(){

$("#jquery_jplayer_1").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"

});

},

swfPath: "/js",

supplied: "m4a, mp3"

});

</script>

$(document).ready(function(){

$("#jquery_jplayer_2").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"

});

},

swfPath: "/js",

supplied: "m4a, mp3"

});

</script>

</head>
<body>

<li><a href="javascript:;" class="jp-pause" tabindex="1">pause</a></li>

</ul>

</div>

</div>

<ul>

</ul>

</div>

<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></p>

<br>

<li><a href="javascript:;" class="jp-pause" tabindex="1">pause</a></li>

</ul>

</div>

</div>

<ul>

</ul>

</div>

<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></p>

</div>

</body>

</html>

Op dinsdag 6 maart 2012 03:15:55 UTC+1 schreef Dustin Blake het volgende:

Utz

unread,

Mar 6, 2012, 9:40:35 AM3/6/12

to jPlayer: HTML5 Audio & Video for jQuery

Hi Dustin,
thanks a lot, i'll read the demo once more...

On 6 Mrz., 03:15, Dustin Blake <circuitbomb...@gmail.com> wrote:
> You don't need to edit the jPlayer source files to use cssSelectorAncestor
> because its an option.
>

> http://jplayer.org/latest/developer-guide/#jPlayer-option-set-cssSele...
>
> The multi-instance audio demo has the information your looking forhttp://jplayer.org/latest/demo-03/

Message has been deleted

2-XIte AG

unread,

Mar 17, 2012, 7:15:25 PM3/17/12

to jpl...@googlegroups.com

Greetings to all,

Im so sorry to keep repeating, but I do really miss a short guide how to make possible to put multiple players on one single page.

Im not stupid, but as a really amateur need hard a short step by step guide, like this perfect and clear one:

http://www.jplayer.org/latest/quick-start-guide/

I did really search for info here and read the demo's here: http://www.jplayer.org/latest/demo-01/

but still it gives me not enough information what to do.

Every time I add a new instance, all the players work as one single player.

Could someone help me out?

At least, what file do I have to edit: the main html or other and short "how to".

Many thanks and greets from Holland,

2-Xite

Op maandag 14 november 2011 19:25:40 UTC+1 schreef Phil Coyne het volgende:

I'm attempting to build a site for a musician with multiple players across it.

Anthony Darden

unread,

Apr 21, 2012, 11:45:49 PM4/21/12

to jpl...@googlegroups.com

Was this ever resolved? I am having the same problems and keep coming up short. None of the suggestions on this thread have helped. A simple code chunk to show how jp_container_2 and how ever many more you want to repeat on the same page will use the same cssancestor class from the the first player would be helpful! Thanks :)

2-XIte AG

unread,

Apr 23, 2012, 11:19:52 AM4/23/12

to jpl...@googlegroups.com

Hi Anthony,

none of the suggestions worked here either. I did ask more times here the same, I even pasted some code to make easy people to suggest, but after all my messages were just deleted by someone and I still have the same probs. If they think I'm a spammer, but I'm really not... just need some help too…

Anyway, some help would be very nice...

Greets,

2-Xite

Op zondag 22 april 2012 05:45:49 UTC+2 schreef Anthony Darden het volgende:

Message has been deleted

Anthony Darden

unread,

Apr 23, 2012, 12:17:20 PM4/23/12

to jpl...@googlegroups.com

I actually got this working. See my code below. In hindsight, Dustin Blake was on the mark, but it didn't click with me on where his code was meant to be placed. There are defaults assigned to each instance of the player such as which cssAncestorSelector is being used (#jp_container_1), the size of the player, the volume, etc. In my first player instance below I show you where those go. These are optional and don't need to be stated however you can change the values and watch the results unfold. The 2nd player is where I assign a new cssAncestorSelector value to use. Excuse my terminolgy if I'm phrasing things wrong, but I'm from COBOL land, lol. Anyway, you don't need to modify the 'js' file in anyway. If you want to add a 3rd player, 4th, etc., just keep assigning a new cssAncestorSelector name.

Hope this help!

Tony

         $("#jquery_jplayer_1").jPlayer({
               ready: function () {
                   $(this).jPlayer("setMedia", {

                          m4v: "http://www.jplayer.org/video/m4v/Big_Buck_Bunny_Trailer_480x270_h264aac.m4v",
                          ogv: "http://www.jplayer.org/video/ogv/Big_Buck_Bunny_Trailer_480x270.ogv",
                          poster: "http://www.jplayer.org/video/poster/Big_Buck_Bunny_Trailer_480x270.png"
                    });
               },
               play: function () { // To avoid both jPlayers playing together.
                     $(this).jPlayer("pauseOthers");
               },
               size: { width: "480px", height: "270px", cssClass: "jp-video-270p" },
               volume: "0.8",
               swfPath: "/Scripts",
               supplied: "m4v, ogv"
           });

           $("#jquery_jplayer_2").jPlayer({
              ready: function (event) {
                    $(this).jPlayer("setMedia", {
                        mp3: "http://www.jplayer.org/audio/mp3/TSP-01-Cro_magnon_man.mp3",
                        oga: "http://www.jplayer.org/audio/ogg/TSP-01-Cro_magnon_man.ogg"
                     });
               },
              play: function () { // To avoid both jPlayers playing together.
                    $(this).jPlayer("pauseOthers");
               },
             swfPath: "/Scripts",
             supplied: "mp3, oga",
             cssSelectorAncestor: "#jp_container_2"
         });
      });
</script>

2-XIte AG

unread,

Apr 25, 2012, 8:36:58 AM4/25/12

to jpl...@googlegroups.com

Hi Anthony,

1001 thanks for sharing this information and your code here.

I did not try yet the solution, due of lack of time, but this weekend I have some hours free to test it.

I'll tell you how it works.

Looking forward to make it working here too!

Really thanks again,
Greetings from Holland,

2-Xite

Op maandag 23 april 2012 18:17:20 UTC+2 schreef Anthony Darden het volgende:

Message has been deleted

2-XIte AG

unread,

May 5, 2012, 5:29:22 AM5/5/12

to jpl...@googlegroups.com

Hi Anthony,

would you please take a look at the script below?

I dit try it, but still there is something wrong: the upper player works, the lower not at all. Both of of status bars show one, the same level of the clip, or better to say works as one player.

Really hope to hear something...

Thank you great for assistance,
Kindest,

2-Xite

the complete code here, I think the problem is in the body of the script (the text maybe needs to be unfold the to see the whole code):

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>test</title>

<link href="css/main.css" rel="stylesheet" type="text/css" media=all>
<link href="css/menu.css" rel="stylesheet" type="text/css" media=all>
<link href="css/layout.css" rel="stylesheet" type="text/css" media=all>

</div>
</div>
</div>
</body>
</html>

Op maandag 23 april 2012 18:17:20 UTC+2 schreef Anthony Darden het volgende:

Anthony Darden

unread,

May 5, 2012, 7:00:05 PM5/5/12

to jpl...@googlegroups.com

Do you have a link to the site in question? Curious to see the behavior. Your scripts look good, so this has to be something small we're just not seeing yet.

Anthony Darden

unread,

May 5, 2012, 8:06:08 PM5/5/12

to jpl...@googlegroups.com

Give this a try...these are my DIVs - I couldn't get yours to behave right on my test site, so might me something there...I know we are close!

<div id="jp_container_1" class="jp-video ">

<div class="jp-type-single">

<div id="jquery_jplayer_1" class="jp-jplayer"></div>

<div class="jp-gui">

<div class="jp-video-play">

<a href="javascript:;" class="jp-video-play-icon" tabindex="1">play</a>

</div>

<div class="jp-interface">

<div class="jp-progress">

<div class="jp-seek-bar">

<div class="jp-play-bar"></div>

</div>

<div class="jp-current-time"></div>

<div class="jp-duration"></div>

<div class="jp-controls-holder">

<ul class="jp-controls">

<li><a href="javascript:;" 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-volume-bar">

<div class="jp-volume-bar-value"></div>

</div>

<ul class="jp-toggles">

<li><a href="javascript:;" class="jp-full-screen" tabindex="1" title="full screen">full screen</a></li>

<li><a href="javascript:;" class="jp-restore-screen" tabindex="1" title="restore screen">restore screen</a></li>

<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 class="jp-title">

<ul>

<li>Big Buck Bunny Trailer</li>

</ul>

</div>

<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>

<br />

<div id="jquery_jplayer_2" class="jp-jplayer"></div>

<div id="jp_container_2" class="jp-audio">

<div class="jp-type-single">

<div class="jp-gui jp-interface">

<ul class="jp-controls">

<li><a href="javascript:;" 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 class="jp-volume-bar">

<div class="jp-volume-bar-value"></div>

</div>

<div class="jp-current-time"></div>

<div class="jp-duration"></div>

</div>

<div class="jp-title">

<ul>

<li>Cro Magnon Man</li>

</ul>

</div>

<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>

Message has been deleted

2-XIte AG

unread,

May 6, 2012, 12:52:25 PM5/6/12

to jpl...@googlegroups.com

Hi Anthony,

first, many thanks: I think you did give me the right hint. Does it have to do with comments of <li>s? Let me show first the old situation:

http://2-xite.com/audio.htm

as you can see there is the problem: second player not appears, all buttons "linked together", both of status bars work as one.

This is the new situation with your script, it still have some visual issues, but it works, (I think it has to do with the CCS script, I believe (it uses the style sheet form old situation):

http://2-xite.com/audio2.htm

What Im looking for, is the solution to put 2 or more audio players on one, like:

http://2-xite.com/audio3.htm

But, as you see, no good results.

I put the whole script here below again.

Do you think is that the problem, because I removed the unwanted functions/buttons from html instead of comment them?

This is the situation with your body-script from the post above:

http://2-xite.com/audio4.htm

I'm very interesting in the solution.

Thank you a lot in advance!!

Kindest,

2-Xite

The script from the situation nr 3:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>test site</title>
<!-- ==============================

===================================================================================== -->
<meta name="GENERATOR" content="composer, music">
<meta name="KEYWORDS" content="composer, music">

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: "/Scripts",
              supplied: "mp3, oga",

cssSelectorAncestor: "#jp_container_1"

          });

           $("#jquery_jplayer_2").jPlayer({
               ready: function (event) {
                     $(this).jPlayer("setMedia", {
                         mp3: "http://www.jplayer.org/audio/mp3/TSP-01-Cro_magnon_man.mp3",
                         oga: "http://www.jplayer.org/audio/ogg/TSP-01-Cro_magnon_man.ogg"
                     });
               },
               play: function () { // To avoid both jPlayers playing together.
                     $(this).jPlayer("pauseOthers");
               },
              swfPath: "/Scripts",
              supplied: "mp3, oga",
              cssSelectorAncestor: "#jp_container_2"
          });
       });
</script>

</div>
</div>
</div>
</div>
</body>
</html>

Op zondag 6 mei 2012 02:06:08 UTC+2 schreef Anthony Darden het volgende:

Anthony Darden

unread,

May 7, 2012, 5:02:49 PM5/7/12

to jpl...@googlegroups.com

You're almost there...check out your 'supplied:' in the first script...they don't match the links above it. The 'oga' matches, so I'm thinking the player should go to that, but your typical IIS setup on a Windows Server (just as an example) doesn't auto associate an audio file to an 'ogg' extension unless you have created this association, but otherwise I can see why this is failing. I'd match up your 'Supplied:' and then see what you get :)

2-XIte AG

unread,

May 8, 2012, 5:22:16 AM5/8/12

to jpl...@googlegroups.com

Hi Anthony,

thank you.

I did really check alle the "supplied" and all media-links work correct. But the problem still exists: no multiple sounds.

Would you please check it again? The upper player works, the lower player plays a very short segment of both audio, very strange....:

http://2-xite.com/audio5.htm

I drop the code here as well:

ready: function (event) {
$(this).jPlayer("setMedia", {

mp3: "http://www.fredmomotenko.com/media/Nor_sleep,_nor_wake_fragment.mp3",
oga: "http://www.fredmomotenko.com/media/Nor_sleep,_nor_wake_fragment.ogg"

Op maandag 7 mei 2012 23:02:49 UTC+2 schreef Anthony Darden het volgende:

Anthony Darden

unread,

May 8, 2012, 9:11:21 AM5/8/12

to jpl...@googlegroups.com

Your scripts were correct so that the first mp3 was now properly recognized so I went back to your front end design. Your class definitions were correct, however the divs were jumbled up and causing the problems. Give this a try. Basically you have your main div, and then each player within its own div. This is your code from a prior posting and I just modified the div tags and tested it. Let me know...

    </div>
   </div>
      <br />
      <br />

<div id="jquery_jplayer_2" class="jp-jplayer"></div>
<div id="jp_container_2" class="jp-audio">
    <div class="jp-type-single">
      <div class="jp-gui jp-interface">
        <ul class="jp-controls">

2-XIte AG

unread,

May 8, 2012, 10:49:08 AM5/8/12

to jpl...@googlegroups.com

Anthony, BRAVISSIMO!

YES, YES, YES! It works!!! Everything: buttons, status bar, volume. Fantastic!

I'm so happy, really! I'm trying it for over 2 months, you can not believe it?

So it were DIV's in the body.... Right? I hope that the other newbies (as me) can find this post helpful as well and spare a lot of time.

Again, Antony: 1001 Thanks! You are a great person!

Many regards from NL,

Fred

Op dinsdag 8 mei 2012 15:11:21 UTC+2 schreef Anthony Darden het volgende:

Anthony Darden

unread,

May 8, 2012, 11:16:15 PM5/8/12

to jpl...@googlegroups.com

You're welcome - glad I could help! Yes, the DIVs in your body were not setup correct - easy mistake to have, I went through similar issues when I started out so I completely understand the frustrations and time spent.

Happy coding!

christopher bailiff

unread,

Mar 18, 2016, 5:40:10 PM3/18/16

to jPlayer: HTML5 Audio & Video for jQuery

Hi Anthony and 2-Xlte AG,

I take my hat off to you two. I have been struggling with this exact issue for such a long time. 2-Xlte, your persistence is admirable and Anthony needs an award.

Best regards to you both.

Reply all

Reply to author

Forward