Google Groups

Re: Best way to use multiple players across a site


Anthony Darden May 8, 2012 8:16 PM
Posted in group: jPlayer: HTML5 Audio & Video for jQuery
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!

On Tuesday, May 8, 2012 10:49:08 AM UTC-4, 2-XIte AG wrote:

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:
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 id="jquery_jplayer_1" class="jp-jplayer"></div>
  <div id="jp_container_1" 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>
        </ul>
        <div class="jp-progress">
          <div class="jp-seek-bar">
            <div class="jp-play-bar"></div>
          </div>
        </div>
        <div class="jp-volume-bar">
          <div class="jp-volume-bar-value"></div>
        </div>
      </div>
      <div class="jp-title">
        <ul>
        </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>
    </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">
          <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>
        </ul>
        <div class="jp-progress">
          <div class="jp-seek-bar">
            <div class="jp-play-bar"></div>
          </div>
        </div>
        <div class="jp-volume-bar">
          <div class="jp-volume-bar-value"></div>
        </div>
      </div>
      <div class="jp-title">
        <ul>
        </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>
    </div>
  </div>
</div>

On Tuesday, May 8, 2012 5:22:16 AM UTC-4, 2-XIte AG wrote:

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:


<script type="text/javascript">
     $(document).ready(function () {

          $("#jquery_jplayer_1").jPlayer({
               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"
                     });
               },
               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>




Op maandag 7 mei 2012 23:02:49 UTC+2 schreef Anthony Darden het volgende:
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 :)

On Sunday, May 6, 2012 12:52:25 PM UTC-4, 2-XIte AG wrote:

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">
<!-- =================================================================================================================== -->

<link type="text/css" href="/skin/jplayer.blue.monday.css" rel="stylesheet" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6/jquery.min.js"></script>
<script type="text/javascript" src="js/custom.js"></script>
<script type="text/javascript" src="/js/jquery.jplayer.min.js"></script>
<script type="text/javascript">
    $(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"
            });
               },
               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>
<style type="text/css" media="screen">
body {
    background-image: url(illustraties/background_05.jpg);
    }
    .style1 {font-size: 80%}
.style3 {font-size: x-small}
</style>
</head>

<body>
<div id= "wrapper">
  <div align="center">
    <div class="menubutton" id="menu2">
    <ul>
    </ul>
    </div>
    <div id="blok1"></div>
    <div id="blok2"></div>
    <div id="blok3"></div>
    </div>
    </div>
   
    <div id="titelblok1"><img src="http:http://2-xite.com/illustraties/background_05.jpg" width="605" height="30" border="0"></div>
    <div class="bodytekst style3" id="tekstblok11">
     
          <td>&nbsp;</td>
        </tr>
      </table>
      <div id= "wrapper">
  <div align="center">
    <div class="menubutton" id="menu2">
    <ul>
    </ul>
    </div>
    <div id="blok1"></div>
    <div id="blok2"></div>
    <div id="blok3"></div>
 
     
          <td>&nbsp;</td>
        </tr>
      </table>
         </div>
    </div>
 <div id="jquery_jplayer_1" class="jp-jplayer"></div>
  <div id="jp_container_1" 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>
        </ul>
        <div class="jp-progress">
          <div class="jp-seek-bar">
            <div class="jp-play-bar"></div>
          </div>
        </div>
        <div class="jp-volume-bar">
          <div class="jp-volume-bar-value"></div>
        </div>
      </div>
      <div class="jp-title">
        <ul>
        </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>
        <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>
        </ul>
        <div class="jp-progress">
          <div class="jp-seek-bar">
            <div class="jp-play-bar"></div>
          </div>
        </div>
        <div class="jp-volume-bar">
          <div class="jp-volume-bar-value"></div>
        </div>
      </div>
      <div class="jp-title">
        <ul>
        </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>
    </div>
  </div>
</div>
</div>
</body>
</html>




Op zondag 6 mei 2012 02:06:08 UTC+2 schreef Anthony Darden het volgende:
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>

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

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

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

                       

                        <!-- comment out any of the following <li>s to remove these buttons -->

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

                   

                    <!-- you can comment out any of the following <div>s too -->

                    <div class="jp-progress">

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

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

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

            </div>

        </div>

 

 

 

 

On Saturday, May 5, 2012 5:29:22 AM UTC-4, 2-XIte AG wrote:

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>
<link type="text/css" href="/skin/jplayer.blue.monday.css" rel="stylesheet" />
 <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6/jquery.min.js"></script>
<script type="text/javascript" src="js/custom.js"></script>
<script type="text/javascript" src="/js/jquery.jplayer.min.js"></script>
<script type="text/javascript">
     $(document).ready(function () {

          $("#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>
</head>

<body>
      <p> <div id="jquery_jplayer_1" class="jp-jplayer"></div>
  <div id="jp_container_1" 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>
        </ul>
        <div class="jp-progress">
          <div class="jp-seek-bar">
            <div class="jp-play-bar"></div>
          </div>
        </div>
        <div class="jp-volume-bar">
          <div class="jp-volume-bar-value"></div>
        </div>
      </div>
      <div class="jp-title">
        <ul>
        </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></p>
      <br>
        <br>
       
      <p> <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>
        </ul>
        <div class="jp-progress">
          <div class="jp-seek-bar">
            <div class="jp-play-bar"></div>
          </div>
        </div>
        <div class="jp-volume-bar">
          <div class="jp-volume-bar-value"></div>
        </div>
      </div>
      <div class="jp-title">
        <ul>
        </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></p>
    </div>
  </div>
</div>
</div>
</body>
</html>






Op maandag 23 april 2012 18:17:20 UTC+2 schreef Anthony Darden het volgende:
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

<script type="text/javascript">
     $(document).ready(function () {
          $("#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>

On Monday, April 23, 2012 11:19:52 AM UTC-4, 2-XIte AG wrote:

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

On Saturday, March 17, 2012 7:15:25 PM UTC-4, 2-XIte AG wrote:

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.

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.