Can't load Javascript Playlist

 
Functioning Test Page here: http://willswonders.myip.org:8074/JavaScript Playlist.html

 
This is NOT a download link.

It is a link to load jquery from Google's CDN every time the page is loaded by a client.

This also applies to jquery and any other libraries that you can load from Google's CDN.

The advantages of using swfobject v2.x loaded from Google's CDN:

    Loading from Google AJAX Libraries API:

        http://pipwerks.com/journal/2008/11/11/swfobjectjs-finds-a-home-on-google-servers/

    How & Why You Should Use Google CDN:

        http://webmuch.com/how-why-you-should-use-google-cdn/

Mouse pointers come from the CSS. http://www.w3schools.com/CSS/pr_class_cursor.asp

Actually I meant the jquery.js script file that I downloaded from the javascript playlist tutorial here: http://www.longtailvideo.com/support/tutorials/Playlist-Tutorial

Though I am still facing the problem of loading the preview image. I am using this flashvar, but it doesn't seem to work.

so.addVariable('image','images/programs/W/Images/warrenmiller.jpg');

 
When you use a playlist, all of the File Properties flashvars must come from the playlist, with the exception of streamer, which may be global.

Reference: http://developer.longtailvideo.com/trac/wiki/FlashVars#Fileproperties

Thanks... once I provided the image thumbnail in the playlist, I got it working the way I wanted after a few tweaks.

I have one more problem though.

I am calling the player through

<div id='player1' style="display:block;border:1px solid #CCCCCC; float:left;"></div>

Now I want that border only to be around the player, but it encapsules the playlist within it as well. Is there a way I can only get it around the player?

Thanks

 
You have to use a separate HTML element positioned on top of the player with CSS (absolute positioning) for the border and the Adobe Flash Player has to be in wmode=opaque and you have to set the z-index of the player and the HTML, with the HTML on a higher z-index than the player.

Search this Forum for "z-index"

There are lots of examples that show exactly how to position HTML content overlaid on the Flash content.

***EDIT***

Disregard the nonsense above; I forgot that you were using the JavaScript Playlist.

Just put a border around the object, embed elements (like you already have).

where is the embed or object being specifically called?

I entered the css but no change.

the call from the javascript is so.write('player1') and then this div is called <div id='player1'></div>

is player1 calling the embed code?

SWFObject creates the object/embed elements and writes them to the innerHTML of the element with an id of 'player1'.

for some reason

didn't work for me.

here is the link to the website

http://tinyurl.com/ycg4tcm

 
There is no border in the object, embed styling in the CSS file that I downloaded from your site: http://www.highfidelityhdtv.ca/rushhd/playlist.css

Should be:

    ...more...

Also, I think the CSS should be before the JS links, so it's available when they are loaded and run.

Hi Lost,

I have been reading this forum for almost a week now. All I want is the jw player using the javascript playlist. Thought it would be quicker than trying to learn javascript enough to code without it.

This forum is great, know a lot more, but with all the different styles, I'm confused.

Tried the code in your first post, this thread. Get 'SWFObject undefined'. I have used full URL's for everything.

This page is using your code - http://lifes-healthy-choices.com/How-to-Apply-the-Ultimate-Applicator.html

The links you give at WillsWonders are all broken links. There have been quite a few that I have tried this past week.

Your help would be wonderful,

Thank you,
Jane

 
This line has invalid chracters for the double quotes:<script src="http://lifes-healthy-choices.com/videos/jw/js/jquery.playlist.js"></script>

You are loading swfobject v2.1 from google's CDN, yet your player embedding code is for SWFObject v1.5.

This should be in the head element of your HTML document:

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

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

      swfobject.embedSWF('http://lifes-healthy-choices.com/videos/player.swf', 'player', '710', '280', '9.0.124', false, flashvars, params, attributes);
    </script>

This should be in the body element 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>
Style the division element with a class of "playercontainer" to position the player.

Electricity is getting scarce and expensive here at Playa del Ninguna Parte (first priority is keeping AJAX's Coronas cold), so we usually turn the servers off when they're not being used. Keep trying the links, they will work sometimes.

This is how I had the code before reading this thread. At that point I had the videos working from the buttons.
Able to verify videos actually worked this way.

Like I said, I'm confused, usually, from what I have read on this forum, when someone is using the 1.5v, they are told to upgrade.There was no mention in this thread so I didn't know.

Anyway, corrected the double quotes for jquery.playlist.js. They came with the copy and paste, thought I had found and replaced all of them.

Replaced the code in the head portion with what I had, minus some flashvars to match your code more closely.

Replaced the code in the body portion with what I had, matches yours, except I include the image.

The SWFObject undefined error is gone, but the playlist is still not getting loaded to the right of the player. Don't know why, but now the buttons do not work. Pretty much the same as I had prior to the 1.5v coding.

I have looked over and cannot find any missing or extra characters. Thank you very much for your help.

Jane

 
Your playlist is invalid. Download a fixed playlist from here: http://willswonders.myip.org:8074/playlist_lifes-healthy-choices.xml I used the same image for every track just for testing; adjust the URIs to point to the correct image files on your server.

Your player code has too many mistakes to list in detail. You can see the correct code functioning here: http://willswonders.myip.org:8074/lifes-healthy-choices.html Grab the page source to use on your page. I would recommend that you copy & paste the chunks of JavaScript, then adjust to use your player, playlist, and skin.

DO NOT use the JavaScript API code!

The equivalent code is contained in jquery.playlist.js, so having it twice prevents the JavaScript API from functioning.

The playlist is offset and bordered because I changed my CSS file to demonstrate that the playlist is separate from the player, which is the whole point of using the JavaScript playlist, along with being able to use CSS styling on the playlist elements.

Thank you ever so much.

Guess my code verified I was confused. :}

I got rid of the playlist for the JavaScript playlist by setting width and height to 0 in the css. The skin includes a playlist that I set to the right. I had two playlists for a little while. For now it was easier than playing around in the css.

In the var params, 'allowscriptaccess', why do I see some setting it to 'always' and others to 'sameDomain'?

willswonders worked for both links today.

If I should ever need help again, what hours of the day is the forum monitored? This has got to be the best forum for quick responses!!

Allo,

I wondered if it was possible to choose where the playlist is loaded like the player with that code. Like:

<div id="player"></div>

<div id="playlist"></div>

And not load the playlist div after the player.

 
The location of the playlist is controlled by this CSS from playlist.css.

Hi
I have been trying to move the playlist away from the player on my page using the javascript above and the css file given but it's not working. It doesn't seem to be picking up the css file. I have tried copying your html code and still when i change the css file, the changes aren't displayed. Help please!!

 
Post a link to your Test Page so we can help you. Can't guess very well today.

I can't actually post a link as it's a corporate site and i'm just working on it locally on my PC before i publish it live. I'll post my html here if you could take a look. The playlist.css is in the same folder as my html file

I've also put in alerts in the jquery.playlist.js methods and they do appear but then the formatting in the css isn't applied and in my css file, the div headers show up in grey in my editor whereas other working divs show up as navy. It looks like the javascript isn't picking up the styles in playlist.css

 
You have to be testing online, from an HTTP server, for the JavaScript API to work, due to Adobe Flash Player security restrictions.

Here's your code with my default playlist.css

    http://willswonders.myip.org:8074/player5/Cinderella.html

Here are a couple of examples where I've adjusted the CSS so you can see the changed position of the playlist.

    http://willswonders.myip.org:8074/player5/Cinderella-1.html

    http://willswonders.myip.org:8074/player5/Cinderella-2.html

Thanks for that - i didn't realise that was the case. I can't actually view those links (could be a firewall issue) - would you be able to post the html for one of the examples where you changed the position of the playlist please? I'd really appreciate it as i am up against a deadline and running out of time! Thanks

hi noodle,
I managed to view the links - they look identical, the playlist is in the same position on each link. Also, i have copied your html into a test page and put it live and it still doesn't separate the playlist. Maybe it's an issue with my css file although i copied it directly from the tutorial.

Cinderella.html

<html>

  <head>

    <link rel="stylesheet" href="playlist.css" />

    <script src="http://www.google.com/jsapi"></script>

    <script>
      google.load('jquery',    '1.3.2');
      google.load('swfobject', '2.2');
    </script>

    <script src="jquery.playlist.js"></script>

    <script type="text/javascript">
      var flashvars =
      {
        'file':                      'playlist.xml',
        'playlist':                  'right',
        'playlistsize':              '270',
        'id':                        'playerID',
        'autostart':                 'false'
      };

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

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

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

  </head>

  <body>

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

  </body>

</html>

playlist.css

.jw_playlist_playlist 
{
/*
  position:                 relative;
  top:                         216px;
  left:                            0;
  float:                        left;
*/

  position:                 absolute;
  bottom:                         5%;
  right:                         10%;

  width:                       280px;
  height:                      290px;
  overflow-y:                   auto;
  overflow-x:                 hidden;
  border:          2px solid #FF119D;
  padding:             5px 5px 0 5px;
  cursor:                    pointer;
  <!--[if gte IE 6]>
  float:                       right;
  <![endif]-->
}

.jw_playlist_image 
{
  width:                        75px;
  height:                       56px;
}

.jw_playlist_image_div 
{
  border:          1px solid #000000;
  padding:                     0 5px;
  margin:                      0 5px;
  float:                        left;
  background-color:            white;
}

.jw_playlist_item 
{
  padding:                 10px 20px;
}

.clear
{
  clear:                        both;
  height:                          0;
}

.jw_playlist_title
{
  font-weight:                  bold;
}

.jw_playlist_description 
{
  height:                       60px;
  overflow-y:                 hidden;
  overflow-x:                 hidden;
/*border:          1px solid #FF119D;*/
}

.jw_playlist_itemeven
{
  background-color:          #EEEEEE;
}

.jw_playlist_itemodd
{
  background-color:          #FFFFFF;
}

.jw_playlist_itemplaying
{
  background-color:           yellow;
}

Cinderella-1.html

<html>

  <head>

    <link rel="stylesheet" href="playlist-1.css" />

    <script src="http://www.google.com/jsapi"></script>

    <script>
      google.load('jquery',    '1.3.2');
      google.load('swfobject', '2.2');
    </script>

    <script src="jquery.playlist.js"></script>

    <script type="text/javascript">
      var flashvars =
      {
        'file':                      'playlist.xml',
        'playlist':                  'right',
        'playlistsize':              '270',
        'id':                        'playerID',
        'autostart':                 'false'
      };

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

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

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

  </head>

  <body>

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

  </body>

</html>

playlist-1.css

.jw_playlist_playlist 
{
  position:                 relative;
  top:                         216px;
  left:                         50px;
  float:                        left;

/*
  position:                 absolute;
  bottom:                         5%;
  right:                         10%;
*/

  width:                       280px;
  height:                      290px;
  overflow-y:                   auto;
  overflow-x:                 hidden;
  border:          2px solid #FF119D;
  padding:             5px 5px 0 5px;
  cursor:                    pointer;
  <!--[if gte IE 6]>
  float:                       right;
  <![endif]-->
}

.jw_playlist_image 
{
  width:                        75px;
  height:                       56px;
}

.jw_playlist_image_div 
{
  border:          1px solid #000000;
  padding:                     0 5px;
  margin:                      0 5px;
  float:                        left;
  background-color:            white;
}

.jw_playlist_item 
{
  padding:                 10px 20px;
}

.clear
{
  clear:                        both;
  height:                          0;
}

.jw_playlist_title
{
  font-weight:                  bold;
}

.jw_playlist_description 
{
  height:                       60px;
  overflow-y:                 hidden;
  overflow-x:                 hidden;
/*border:          1px solid #FF119D;*/
}

.jw_playlist_itemeven
{
  background-color:          #EEEEEE;
}

.jw_playlist_itemodd
{
  background-color:          #FFFFFF;
}

.jw_playlist_itemplaying
{
  background-color:           yellow;
}

Cinderella-2.html

<html>

  <head>

    <link rel="stylesheet" href="playlist-2.css" />

    <script src="http://www.google.com/jsapi"></script>

    <script>
      google.load('jquery',    '1.3.2');
      google.load('swfobject', '2.2');
    </script>

    <script src="jquery.playlist.js"></script>

    <script type="text/javascript">
      var flashvars =
      {
        'file':                      'playlist.xml',
        'playlist':                  'right',
        'playlistsize':              '270',
        'id':                        'playerID',
        'autostart':                 'false'
      };

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

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

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

  </head>

  <body>

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

  </body>

</html>

playlist-2.css

.jw_playlist_playlist 
{
  position:                 relative;
  top:                         120px;
  left:                        250px;
  float:                        left;

/*
  position:                 absolute;
  bottom:                         5%;
  right:                         10%;
*/

  width:                       280px;
  height:                      290px;
  overflow-y:                   auto;
  overflow-x:                 hidden;
  border:          2px solid #FF119D;
  padding:             5px 5px 0 5px;
  cursor:                    pointer;
  <!--[if gte IE 6]>
  float:                       right;
  <![endif]-->
}

.jw_playlist_image 
{
  width:                        75px;
  height:                       56px;
}

.jw_playlist_image_div 
{
  border:          1px solid #000000;
  padding:                     0 5px;
  margin:                      0 5px;
  float:                        left;
  background-color:            white;
}

.jw_playlist_item 
{
  padding:                 10px 20px;
}

.clear
{
  clear:                        both;
  height:                          0;
}

.jw_playlist_title
{
  font-weight:                  bold;
}

.jw_playlist_description 
{
  height:                       60px;
  overflow-y:                 hidden;
  overflow-x:                 hidden;
/*border:          1px solid #FF119D;*/
}

.jw_playlist_itemeven
{
  background-color:          #EEEEEE;
}

.jw_playlist_itemodd
{
  background-color:          #FFFFFF;
}

.jw_playlist_itemplaying
{
  background-color:           yellow;
}

jquery.playlist.js

playerReady = function(obj)
{
  player = document.getElementById(obj.id);

//for(var j in obj)
//{
//  alert(j + ': ' + obj[j]);
//}

  checkPlaylistLoaded();
}

function checkPlaylistLoaded()
{
  var jsPlaylist  = player.getPlaylist();

//alert('Player ID: ' + player.id + '\njsPlaylist: ' + jsPlaylist + '\nConfig: ' + player.getConfig().file);

  if(jsPlaylist.length > 0)
  {
    var playlist = createPlaylist();
    populatePlaylist(player, jsPlaylist, playlist);
    player.addControllerListener('PLAYLIST',  'playlistHandler');
    player.addControllerListener('ITEM',      'itemHandler');
  }
  else
  {
    setTimeout(function(){checkPlaylistLoaded()}, 150);
  }
}

function createPlaylist()
{
  var playerDiv = $('#' + player.id);
  playerDiv.after('</div><div class="jw_playlist_playlist"></div>');
  return playerDiv.next();
}

function populatePlaylist(player, jsPlaylist, playlist)
{
  playlist.empty();

  for(var i in jsPlaylist)
  {
    var jsItem = jsPlaylist[i];
    var alternate = 'even';

    if(i % 2)
    {
      alternate = 'odd';
    }

    playlist.append('<div class="jw_playlist_item' + alternate + '">' + dump(jsItem) + '</div>');
  }

  var playlistItem = 0;

  playlist.children().each(function()
  {
    var currentItem = playlistItem;
    $(this).click(function()
    {
      player.sendEvent('ITEM', currentItem);
    });
    playlistItem++;
  });
}

function playlistHandler()
{
  var jsPlaylist  = player.getPlaylist();
  var playerDiv   = $('#' + player.id);
  var playlist    = playerDiv.next();
  populatePlaylist(player, jsPlaylist, playlist);
}

function itemHandler(obj)
{
  var item         = obj['index'];
  var playlist     = $('#' + obj['id']).next();
  var currentItem  = 0;

  playlist.children().each(function()
  {
    if(currentItem == item)
    {
      $(this).addClass('jw_playlist_itemplaying');
    }
    else
    {
      $(this).removeClass('jw_playlist_itemplaying');
    }
    currentItem++;
  });
}

function dump(arr)
 {
  var output     = '<div class="jw_playlist_image_div"><img src="${image}" class="jw_playlist_image" /></div><div class="jw_playlist_title">${title}</div><div class="jw_playlist_description">${description}</div><div class="clear"></div>';
  var variables  = getVars(output);

  for(var j = 0; j < variables.length; j++)
  {
    var variable  = variables[j];
    var varName   = variable.replace('${', '').replace('}', '');
    var value     = arr[varName];

    if(!value)
    {
      value = '';
    }

    output = output.replace(variable, value);
  }
  output = output.replace('<div class="jw_playlist_image_div"><img src="" class="jw_playlist_image" /></div>', '');
  return output;
}

function dumpText(arr)
 {
  var dumped_text = '';

  if(typeof(arr) == 'object')
  {
    for(var item in arr)
    {
      var value = arr[item];    

      if(typeof(value) == 'object')
      {
        dumped_text += '<div class="' + item + '">';
        dumped_text += dump(value);
        dumped_text += '</div>';
      }
      else
      {
        dumped_text += '<div class="' + item + '">' + value + '</div>';
      }
    }
  }
  else
  {
    dumped_text += arr + ' (' + typeof(arr) + ')';
  }
  return dumped_text;
}

function getVars(str)
{
  return str.match(/\$\{(.*?)\}/g);
}

Thanks noodle for posting all that code. I still can't get it to work - i'm just gonna give up and do a playlist in html or something. Thanks for your help

 
Let me guess — you're testing in Internet Explorer?

There are a couple of problems with Internet Explorer and the way that swfobject v2.2 replaces the whole target element and the jquery.playlist.js code.

The target element that the code in jquery.playlist.js is looking for ceases to exist after swfobject has created the object element to embed your Flash content.

A quick fix (while I figure out a better way) is to make three changes to jquery.playlist.js.

…and…

function itemHandler(obj)
{
  var item         = obj['index'];
//var playlist     = $('#' + obj['id']).next();
  <strong>var playlist     = $('#playercontainer').next();</strong>
  var currentItem  = 0;
  …

Comment out the existing code and replace it with the lines in bold.

Nope, i'm using firefox. Thanks. I'll take another look and see if i can get it working. I also was looking at the tutorial http://www.longtailvideo.com/support/tutorials/Playlist-Tutorial and am confused about the following as you don't have it in your code. Is this structure needed?
Thanks again

 
The structure shown in the Tutorial is what jquery.playlist.js creates to display the separate playlist.

If you use debugging tools, you can see the HTML elements that have been added to your page.

The Google Chrome browser has a selection in the right-click menu, "Inspect Element", which will show you the page structure without having to install any debugging tools.

The HTML elements for the separate playlist are created immediately after the "playercontainer" div, which is what was causing you problems. It worked fine for me in Firefox 3.5 and Google Chrome 3.0, but failed in Internet Explorer 7.0.

There's also an issue where your HTML isn't valid. Try getting your HTML to validate as that may solve the issue.