Order Now AdSolution Sign Up | Login » Bits on the Run Sign Up | Login »

Forums

JW Player
/
Setup Issues and Embedding

Basic set up help

8 replies [Last post]
Posted: Tue, 2009-10-06 02:03 Lenny
Anonymous's picture

I am a beginner and just get confused reading about the set -up issues.
I am trying to create a page that will play audio music samples one at a time when they are clicked on a list on a web page.

I have downloaded all the swfg, flv and js files and loaded both on my server and in my practice folder on my computer.

I ran the set up wizard and ended up with the code:
<script type='text/javascript' src='swfobject.js'></script>

<div id='mediaspace'>This text will be replaced</div>

<script type='text/javascript'>
var so = new SWFObject('player.swf','mpl','470','20','9');
so.addParam('allowfullscreen','true');
so.addParam('allowscriptaccess','always');
so.addParam('wmode','opaque');
so.addVariable('duration','33');
so.addVariable('file','http://www.longtailvideo.com/jw/upload/bunny.mp3');
so.addVariable('backcolor','CCCC00');
so.write('mediaspace');
</script>

Here is where I get confused
1. I gather I need to replace 'http://www.longtailvideo.com/jw/upload/bunny.mp3'
with a location unique to my files , but what is that supposed to be?
- Is it the address of the html page on the web that will list the audio files?
- Whatever it is , will it be different on the page I use for practice on my computer ( that sounds weird)

2. Also how do I get the mp3 link on my html page to reference the JVL player? Does that happen automatically, or does there need to be something special about how the link is written . I'm using Dreamweaver 2004 and it just launches a property box where I pick what my Link is.

Lenny

Posted: Tue, 2009-10-06 02:22 Lenny  
Lenny's picture

One more thing. When I create my link on my html page with the songs listed it just creates a line of code like this

<a href="MyTune.mp3" target="_blank">

Is that line all I need?

The tune is playing, but not using the JVL player and it plays the same way even without the JVL code on the page.

Lenny

Posted: Tue, 2009-10-06 11:01 lost  
lost's picture

 
To load files from links on the same page, you need to use the JW FLV Player's JavaScript API.

Here are the blocks of code that you need to place in the head element of your HTML document:

1) load the JavaScript file swfobject.js from Google's CDN:

    <script src="http://ajax.googleapis.com/ajax/libs/swfobject/2.2/swfobject.js"></script>

2) embed the Flash content (the JW FLV Player) using swfobject v2.2:

    <script type="text/javascript">
      var flashvars =
      {
        'file':                                  'song.mp3',
        'playlist':                              'bottom',
        'playlistsize':                          '60',
      //...optional skin
      //'skin':                                  'bright',
        'frontcolor':                            '86C29D', // text & icons                  (green)
        'backcolor':                             '003367', // playlist background           (blue)
        'lightcolor':                            'C286BA', // selected text/track highlight (red)
        'screencolor':                           'FFFFFF', // screen background             (black)
        'playlist.thumbs':                       'true',   // works v4.4.139
        'id':                                    'playerID',
        'autostart':                             'false',
      };

      var params =
      {
        'allowfullscreen':                       'false',
        'allowscriptaccess':                     'always',
        'bgcolor':                               '#FFFFFF'
      };

      var attributes =
      {
        'id':                                    'playerID',
        'name':                                  'playerID'
      };

      swfobject.embedSWF('player.swf', 'player', '400', '80', '9.0.124', false, flashvars, params, attributes);
    </script>

Adjust the colors and the size to suit your needs.

3) enable the JW FLV Player's JavaScript API:

    <script type="text/javascript">
      var player   =  null;

      function playerReady(obj)
      {
        player = gid(obj.id);
      };

      function gid(name)
      {
        return document.getElementById(name);
      };
    </script>

4) place this code in the body of your HTML document where you want the player to appear:

    <div id="playercontainer" class="playercontainer"><a id="player" class="player" href="http://www.adobe.com/shockwave/download/download.cgi?P1_Prod_Version=ShockwaveFlash">Get the Adobe Flash Player to see this video.</a></div>

5) use links like this to load the MP3 files:

      <a href="#" onclick="player.sendEvent('LOAD', {'file':'song1.mp3', 'title':'Song 1'}); return false;">LOAD Song 1</a>

Get all of this code into a Test Page, then post a link to that Test Page if you need more help.

Posted: Tue, 2009-10-06 16:21 Lenny  
Lenny's picture

Lost,
Thanks for the in depth reply, but I’m embarrassed to say my code skills are too low to understand all you said, though I’m not entirely incompetent. BTW I am on a MAC running 10.5.4

It seems like maybe you are suggesting something more complex than what I need . All I want is a simple pop up window to play an mp3 song when one clicks on that that song title in my web page.

I got into this by trying to fix a site for a friend because his stopped playing mp3’s and his designer was no longer available. That site had been using the “soundpop.js” player I think designed by David Bettino and described on his O’Reilly Blog. Unfortunately that no longer works on Int Explorer. That used just a simple line or 2 of code referencing the soundpop player above the header and in the body a basic <a href> line of code for the mp3 link.

I have fixed everything now so it works with quicktime files (and just uses the <a href> in the body ) but then we have to ask people on PC’s to download Quicktime. Better if we could use a Flash player that was ubiquitous. However I have been having a devil of a time getting that to work. I have tried to make the JW player work and also tried the free “Premiumbeat Flash player “

My symptoms:
Currently inside my computer if I just use the <a href> link code and no special player a separate black page will appear and a small player will run either the quicktime or mp3 files. Its not as pretty as a pop up window but it does work. However if I put the files online the QT files play fine but the mp3’s display a QT logo with a question mark inside. Actually I haven’t tried to see if a PC without quicktime will play the mp3’s - I doubt it.

I have tried to follow the directions for the JW FLV player and also the Premiumbeat Flash player and they should be making a pop-up window play an mp3. However at least inside my computer it is always the same, I get a full blackpage with a small player in it. Its the same thing I get if I don’t have either player installed in my code. ( I think it may be quicktime playing the mp3 as sometimes a short QT logo appears first.)

I understand that Flash may be doing something weird that blocks testing inside your home computer as I got warnings about this and though I always thought I was giving permission. However when I put the JW player online on my site I had still the same problem - QT would try to play the mp3 and fail - no pop-up.

I don’t think I need to change the location information of the players and SWFobject if they are in the same folder as my HTML document do I? TI’cve trie dmp3’s in a separate folder and loose in the same folder as the HTML.

So what’s going on? I must be making some dumb -assed mistake as it can’t be this hard.

Lenny

Posted: Thu, 2009-10-15 19:57 Heidi  
Heidi's picture

Dear Lost,

I am also a novice with this player and with javascript in general, so I followed your advice to Lenny and I have a working page, with adjusted script details.

http://www.justfaith.org/test/news/media_audio.html

My questions are:

1. How do I adjust the javascript to add additional audio MP3s the same page (I want to add additional players below the first one that's there).

2. What are the browser requirements for this script/code (i.e. it works in my browser, Mac/Safari, but are there going to be issues in others?)?

Thanks in advance,
Heidi

Posted: Thu, 2009-10-15 20:09 miltown  
miltown's picture

How many additional players do you want to add?
2 or 3 players on a page isn't unreasonable. Just duplicate the code with unique names and ids for each player. Beyond that, the page load and resource consumption require different methods. Try searching this Forum for "multiple players" to see how it is done. Using the JavaScript API is a bit tricky because you need to get a player reference object for each player, but the multiple player examples show how it is done.

The swfobject v2.2 code is cross-browser and cross-operating system compatible with only an occasional glitch as the browsers and/or the Flash player are updated.

Give it a try with a couple of additional players, then post back here if you get stuck. A link to your Test Page is the best (and almost only) way to get useful and effective help.

Posted: Fri, 2009-10-16 08:55 Heidi  
Heidi's picture

Dear Miltown,

Thanks for your response. There are several clips (total 5) that are from the same radio program as the first one; I'd like to have a text description (not part of the player) for each, then the clips underneath. The players should all look the same.

Here's the live page I'm referencing:
http://www.justfaith.org/test/news/media_audio.html

When you say duplicate the code, does that mean have an additional full script in the <head> area (with flashvars, parameters, attributes) for each player on the page? It seems like overkill if I want the variables to be exactly the same except for the filename. This is the only piece of the script (in var flashvars) that will change on the page I referenced above:

'file':'media/justloveradio_4-2-08_part1.mp3',

Is there a way to isolate that variable without duplicating the rest of the script? I wish I knew more javascript.

Thanks again,
Heidi

Posted: Fri, 2009-10-16 11:08 miltown  
miltown's picture

This should get you started. *** UNTESTED *** — So watch for typOs!

    <script type="text/javascript">
      var params =
      {
        'allowfullscreen':             'false',
        'allowscriptaccess':           'always',
        'bgcolor':                     '#ffffff'
      };

      var flashvars1 =
      {
        'file':                        'media/justloveradio_4-2-08_part1.mp3',
        'playlist':                    'top',
        'playlistsize':                '60',
      //...optional skin
        'skin':                        'bright',
        'frontcolor':                  'cccccc', // text & icons
        'backcolor':                   '442288', // playlist background
        'lightcolor':                  'ffffff', // selected text/track highlight
        'screencolor':                 'ffffff', // screen background
        'playlist.thumbs':             'true',
        'id':                          'playerID1',
        'autostart':                   'false'
      };

      var attributes1 =
      {
        'id':                          'playerID1',
        'name':                        'playerID1'
      };

      swfobject.embedSWF('media/player.swf', 'player1', '400', '18', '9.0.124', false, flashvars1, params, attributes1);

      var flashvars2 =
      {
        'file':                        'media/justloveradio_4-2-08_part1.mp3',
        'playlist':                    'top',
        'playlistsize':                '60',
      //...optional skin
        'skin':                        'bright',
        'frontcolor':                  'cccccc', // text & icons
        'backcolor':                   '442288', // playlist background
        'lightcolor':                  'ffffff', // selected text/track highlight
        'screencolor':                 'ffffff', // screen background
        'playlist.thumbs':             'true',
        'id':                          'playerID2',
        'autostart':                   'false'
      };

      var attributes2 =
      {
        'id':                          'playerID2',
        'name':                        'playerID2'
      };

      swfobject.embedSWF('media/player.swf', 'player2', '400', '18', '9.0.124', false, flashvars2, params, attributes2);

      var flashvars3 =
      {
        'file':                        'media/justloveradio_4-2-08_part1.mp3',
        'playlist':                    'top',
        'playlistsize':                '60',
      //...optional skin
        'skin':                        'bright',
        'frontcolor':                  'cccccc', // text & icons
        'backcolor':                   '442288', // playlist background
        'lightcolor':                  'ffffff', // selected text/track highlight
        'screencolor':                 'ffffff', // screen background
        'playlist.thumbs':             'true',
        'id':                          'playerID3',
        'autostart':                   'false'
      };

      var attributes1 =
      {
        'id':                          'playerID3',
        'name':                        'playerID3'
      };

      swfobject.embedSWF('media/player.swf', 'player3', '400', '18', '9.0.124', false, flashvars3, params, attributes3);

      var flashvars4 =
      {
        'file':                        'media/justloveradio_4-2-08_part1.mp3',
        'playlist':                    'top',
        'playlistsize':                '60',
      //...optional skin
        'skin':                        'bright',
        'frontcolor':                  'cccccc', // text & icons
        'backcolor':                   '442288', // playlist background
        'lightcolor':                  'ffffff', // selected text/track highlight
        'screencolor':                 'ffffff', // screen background
        'playlist.thumbs':             'true',
        'id':                          'playerID4',
        'autostart':                   'false'
      };

      var attributes4 =
      {
        'id':                          'playerID4',
        'name':                        'playerID4'
      };

      swfobject.embedSWF('media/player.swf', 'player4', '400', '18', '9.0.124', false, flashvars4, params, attributes4);

      var flashvars5 =
      {
        'file':                        'media/justloveradio_4-2-08_part1.mp3',
        'playlist':                    'top',
        'playlistsize':                '60',
      //...optional skin
        'skin':                        'bright',
        'frontcolor':                  'cccccc', // text & icons
        'backcolor':                   '442288', // playlist background
        'lightcolor':                  'ffffff', // selected text/track highlight
        'screencolor':                 'ffffff', // screen background
        'playlist.thumbs':             'true',
        'id':                          'playerID5',
        'autostart':                   'false'
      };

      var attributes5 =
      {
        'id':                          'playerID5',
        'name':                        'playerID5'
      };

      swfobject.embedSWF('media/player.swf', 'player5', '400', '18', '9.0.124', false, flashvars5, params, attributes5);
    </script>

  <script type="text/javascript">
      var player1    = null;
      var player2    = null;
      var player3    = null;
      var player4    = null;
      var player5    = null;
      var playlist1  = null;
      var playlist2  = null;
      var playlist3  = null;
      var playlist4  = null;
      var playlist5  = null;

      function playerReady(obj)
      {
        switch(obj.id)
        {
          case: 'playerID1'
            player1 = gid(obj.id);
            break;
          case: 'playerID2'
            player2 = gid(obj.id);
            break;
          case: 'playerID3'
            player3 = gid(obj.id);
            break;
          case: 'playerID4'
            player4 = gid(obj.id);
            break;
          case: 'playerID5'
            player5 = gid(obj.id);
            break;
        }

        if((player1 != null) && (player2 != null) && (player3 != null) && (player4 != null) && (player5 != null))
        {
          addListeners();
        }
      };

      function addListeners()
      {
        playlist1 = player1.getPlaylist();
        playlist2 = player2.getPlaylist();
        playlist3 = player3.getPlaylist();
        playlist4 = player4.getPlaylist();
        playlist5 = player5.getPlaylist();

        if(((playlist1 !== null) && (playlist1.length > 0)) && ((playlist2 !== null) && (playlist2.length > 0)) && ((playlist3 !== null) && (playlist3.length > 0)) && ((playlist4 !== null) && (playlist4.length > 0)) && ((playlist5 !== null) && (playlist5.length > 0)))
        {
          player1.addModelListener('STATE', 'stateMonitor');
          player2.addModelListener('STATE', 'stateMonitor');
          player3.addModelListener('STATE', 'stateMonitor');
          player4.addModelListener('STATE', 'stateMonitor');
          player5.addModelListener('STATE', 'stateMonitor');
        }
        else
        {
          setTimeout("addListeners();", 100);
        }
      };

      function stateMonitor(obj)
      {
        if(obj.id != 'playerID1')
        {
          player1.sendEvent('STOP');
        }
        if(obj.id != 'playerID2')
        {
          player2.sendEvent('STOP');
        }
        if(obj.id != 'playerID3')
        {
          player3.sendEvent('STOP');
        }
        if(obj.id != 'playerID4')
        {
          player4.sendEvent('STOP');
        }
        if(obj.id != 'playerID5')
        {
          player5.sendEvent('STOP');
        }
      };
      

      function gid(name)
      {
        return document.getElementById(name);
      };
</script>

You may re-use the params, but swfobject v2.2 won't let you re-use the flashvars or attributes.

I know it's a bunch of code, that's why I mentioned that if you were going to have more than a few players, there are better techniques for embedding multiple players.
This site has over 100 players on some pages: http://www.editorschoicemusic.com/ Look at the page source to see how it's done.

After you have completed testing, before you go into production, you should move the JavaScript to a separate file, run it through the Yahoo minifier (http://developer.yahoo.com/yui/compressor/) then load it like this. The JavaScript will load and run better and faster

<script src="http://www.domain.com/path/player.js"></script>
Posted: Sun, 2009-10-18 12:14 Heidi  
Heidi's picture

Dear Miltown,

Thank you so much for the starter code and your patience. My goal with the page was to get the 5 players working there as soon as possible. Then I will learn a better technique, as you suggested, for display of multiple players on a page.

I had success!
http://www.justfaith.org/test/news/media_audio.html

At first only 2 of the 5 players showed up in the page, then I discovered a small numeric error where "var attributes1" should have been "var attributes3" and it all clicked into place.

I still have not run it through the Yahoo minifier but hope to do that soon.

Thanks again for your great help. I will probably be looking for more assistance when I tackle the more elegant solution. :)

Best,
Heidi

  • Locked