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

Forums

JW Player
/
Setup Issues and Embedding

RSS Player with Playlist

12 replies [Last post]
Posted: Mon, 2009-11-09 12:05 Mark White
Anonymous's picture

I've tried to get this going for hours so now is the time for advice!

(I'm a musician not a coder!)

I practiced by embedding the simple single video player (successfully) but now need a player with playlist as I have several flv vids.

My site is at www.markwhitemedia.com, I'm happy to take it one step at a time so have left the default playlist in.

I'm sure it's an easy one for the clever people here so any advice please help,...then I'll need to know about where the xml playlist goes in the code etc

my code is:

<script type='text/javascript' src='http://www.markwhitemedia.com/Media/swfobject.js'></script>

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

<script type='text/javascript'>
var so = new SWFObject('player.swf','ply','470','470','9','#');
so.addParam('allowfullscreen','true');
so.addParam('allowscriptaccess','always');
so.addParam('wmode','opaque');
so.addVariable('file','http://gdata.youtube.com/feeds/api/standardfeeds/recently_featured');
so.addVariable('playlist','bottom');
so.addVariable('frontcolor','cccccc');
so.addVariable('lightcolor','66cc00');
so.addVariable('skin','http://www.markwhitemedia.com/Media/stylish.swf');
so.addVariable('backcolor','111111');
so.addVariable('playlistsize','200');
so.write('mediaspace');
</script>

Any help greatly appreciated

Mark

Posted: Mon, 2009-11-09 12:33 hobbs  
hobbs's picture
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

<html lang="en">

  <head>

    <script src="http://www.markwhitemedia.com/Media/swfobject.js"></script>

  </head>

  <body>

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

<script type='text/javascript'>
  var so = new SWFObject('http://www.markwhitemedia.com/Media/player.swf',  'ply',  '470',  '470',  '9.0.124', '#FFFFFF');
      so.addParam('allowfullscreen',     'true');
      so.addParam('allowscriptaccess',   'always');
      so.addVariable('file',             'http://gdata.youtube.com/feeds/api/standardfeeds/recently_featured');
      so.addVariable('playlist',         'bottom');
      so.addVariable('playlistsize',     '200');
      so.addVariable('skin',             'http://www.markwhitemedia.com/Media/stylish.swf');
      so.addVariable('frontcolor',       'CCCCCC');
      so.addVariable('backcolor',        '111111');
      so.addVariable('lightcolor',       '66CC00');
      so.write('mediaspace');
</script>

  </body>

</html>

Posted: Mon, 2009-11-09 12:43 Mark White  
Mark White's picture

Thanks Hobbs...this forum really is 1st class....I won't ask what the problem was....it'll only confuse me.

Next step (if you don't mind)...

1. Which line of the code directs to MY playlist, is it:

so.addVariable('file', 'http://gdata.youtube.com/feeds/api/standardfeeds/recently_featured');

Do I change it to http://markwhitemedia.com/Media/playlist.xml

2. I know it's been asked a thousand times but I cannot find an example of playlist coding for videos. I undertand the basics but if somebody could give me the first paragrapah (annotation, vid location, title, description etc.) and the opening and closing lines I can cut and paste and do the rest myself, or is there an example I can cut & paste and then change accordingly.

Thanks Again

Mark

Posted: Mon, 2009-11-09 15:04 Mark White  
Mark White's picture

This is where I'm up to......

(Thanks to Hobbs) I've got the following code...

...worked fine with the default video link but now I've put in my playlist it doesn't work

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

<html lang="en">

<head>

<script src="http://www.markwhitemedia.com/Media/swfobject.js"></script>

</head>

<body>

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

<script type='text/javascript'>
var so = new SWFObject('http://www.markwhitemedia.com/Media/player.swf', 'ply', '470', '470', '9.0.124', '#FFFFFF');
so.addParam('allowfullscreen', 'true');
so.addParam('allowscriptaccess', 'always');
so.addVariable('file', 'http://markwhitemedia.com/Media/playlist.xml');
so.addVariable('playlist', 'bottom');
so.addVariable('playlistsize', '200');
so.addVariable('skin', 'http://www.markwhitemedia.com/Media/stylish.swf');
so.addVariable('frontcolor', 'CCCCCC');
so.addVariable('backcolor', '111111');
so.addVariable('lightcolor', '66CC00');
so.write('mediaspace');
</script>

</body>

</html>

This is my playlist text (saved in Mac's Text Edit as unicode 8)

<?xml version='1.0' encoding='UTF-8' ?>
<playlist version='1' xmlns='http://xspf.org/ns/0/'>
<trackList>
<track>
<creator>Mark White</creator>
<title>Bold</title>
<location>http://markwhitemedia.com/Media/bold.flv</location>
<image>http://markwhitemedia.com/Media/bold.jpg</image>
<info>http://markwhitemedia.com/</info>
</track>
<track>
<creator>Artist's Name</creator>
<title>Media Title</title>
<location>http://domain/path/video.flv</location>
<image>http://domain/path/image.jpg</image>
<info>http://domain/</info>
</track>
</trackList>
</playlist>

any help would be great....go easy I'm a bit crap at this stuff

Cheers
Mark

Posted: Tue, 2009-11-10 00:33 hobbs  
hobbs's picture

 
First of all, the playlist documentation — with examples of each format is here:

    http://developer.longtailvideo.com/trac/wiki/FlashFormats#XMLPlaylists

Second, you have your playlist URI in the right place.

Third, your playlist validates and the image and video files for the first track are OK.

So that's it!

<?xml version="1.0" encoding="UTF-8"?>
<playlist xmlns="http://xspf.org/ns/0/" version="1">
  <trackList>
    <track>
      <creator>Mark White</creator>
      <title>Bold</title>
      <location>http://markwhitemedia.com/Media/bold.flv</location>
      <image>http://markwhitemedia.com/Media/bold.jpg</image>
      <info>http://markwhitemedia.com/</info>
    </track>
    <track>
      <creator>Artist's Name</creator>
      <title>Media Title</title>
      <location>http://domain/path/video.flv</location>
      <image>http://domain/path/image.jpg</image>
      <info>http://domain/</info>
    </track>
  </trackList>
</playlist>

If the page doesn't work, post a link to it, and I'll help you sort it out.

OK, I found it here:

    http://www.markwhitemedia.com/Home_files/widget0_markup.html

(It would save me lots of time if you would post a full, direct URI to the page.)

The problem is simple to solve, but first, you have to read this "boilerplate" krap.

Adobe Flash Player same domain security restrictions require that the movie (mediaplayer.swf or player.swf or imagerotator.swf) and all data files (playlist.xml, captions.xml, skin.swf, plugin, etc.) MUST come from the EXACT same domain unless you put a cross-domain policy file on the root of the server that is serving the data files.

Reference: http://kb.adobe.com/selfservice/viewContent.do?externalId=tn_14213

Therefore, you must either:

1) serve the data file(s) (playlist.xml, captions.xml, skin.swf, plugin, etc.) from the same domain as the movie (mediaplayer.swf or player.swf or imagerotator.swf),

2) or serve the data files through a proxy at the same domain as the movie, so it appears that they both come from the same domain,

3) or place a cross-domain policy file on the root of the server that is hosting the data file(s).

Domains must be EXACTLY the same. "www.domain.com" and "domain.com" are not exactly the same.

so.addVariable('file', 'http://<strong>www.</strong>markwhitemedia.com/Media/playlist.xml');

Always use the www.

Posted: Tue, 2009-11-10 10:31 Mark White  
Mark White's picture

Thanks again!

Apologies for not posting full links for you to check, I think I just asssumed it was a 'mac' thing and that the HTML code cannot be found/viewed outside of the actual web design program.

I'll get onto it with the full playlist (if I can get these damn flash files not to be so big post-conversion!) and post result...as I'd like o do a few more tweaks if possible.

Thanks again

mark

Posted: Wed, 2009-11-11 17:20 Mark White  
Mark White's picture

Right!.....some progress but still some problems....

I fixed the problem mentioned (hobbs) so made that change. The player works in my design program but not live...it shows the 2048 error.

all files are at www.markwhitemedia.com/Media except this - widget0_markup.html which is at www.markwhitemedia.com/home/

Code for the player

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

<html lang="en">

<head>

<script src="http://www.markwhitemedia.com/Media/swfobject.js"></script>

</head>

<body>

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

<script type='text/javascript'>
var so = new SWFObject('http://www.markwhitemedia.com/Media/player.swf', 'ply', '370', '470', '9.0.124', '#FFFFFF');
so.addParam('allowfullscreen', 'true');
so.addParam('allowscriptaccess', 'always');
so.addVariable('file', 'http://www.markwhitemedia.com/Media/playlist.xml');
so.addVariable('playlist', 'bottom');
so.addVariable('playlistsize', '200');
so.addVariable('skin', 'http://www.markwhitemedia.com/Media/stylish.swf');
so.addVariable('frontcolor', '999999');
so.addVariable('backcolor', 'FFFFFF');
so.addVariable('lightcolor', '333333');
so.write('mediaspace');
</script>

</body>

</html>

....and the playlist (again at www.markwhitemedia.com/Media/playlist.xml)

<?xml version='1.0' encoding='UTF-8' ?>
<playlist version='1' xmlns='http://xspf.org/ns/0/'>
<trackList>
<track>
<creator>Mark White</creator>
<title>Santander - Lewis Hamilton</title>
<location>http://www.markwhitemedia.com/Media/santander.flv</location>
<image>http://www.markwhitemedia.com/Media/santander.jpg</image>
<info>http://www.markwhitemedia.com/</info>
</track>
<track>
<creator>Mark White</creator>
<title>Bold Washing Gel</title>
<location>http://www.markwhitemedia.com/Media/bold.flv</location>
<image>http://www.markwhitemedia.com/Media/bold.jpg</image>
<info>http://www.markwhitemedia.com/</info>
</track>
<track>
<creator>Mark White</creator>
<title>X-Box</title>
<location>http://www.markwhitemedia.com/Media/xbox.flv</location>
<image>http://www.markwhitemedia.com/Media/xbox.jpg</image>
<info>http://www.markwhitemedia.com/</info>
</track>
<track>
<creator>Mark White</creator>
<title>Skype</title>
<location>http://www.markwhitemedia.com/Media/skype.flv</location>
<image>http://www.markwhitemedia.com/Media/skype.jpg</image>
<info>http://www.markwhitemedia.com/</info>
</track>
<track>
<creator>Mark White</creator>
<title>JPMorgan</title>
<location>http://www.markwhitemedia.com/Media/jpmorgan.flv</location>
<image>http://www.markwhitemedia.com/Media/jpmorgan.jpg</image>
<info>http://www.markwhitemedia.com/</info>
</track>
<track>
<creator>Mark White</creator>
<title>Theatre Music - The jungle Book, The Lion, the Witch and the Wardrobe, Alice in Wonderland</title>
<location>http://www.markwhitemedia.com/Media/theatre.flv</location>
<image>http://www.markwhitemedia.com/Media/theatre.jpg</image>
<info>http://www.markwhitemedia.com/</info>
</track>
<track>
<creator>Mark White</creator>
<title>Video Games Music</title>
<location>http://www.markwhitemedia.com/Media/videogames.flv</location>
<image>http://www.markwhitemedia.com/Media/videogames.jpg</image>
<info>http://www.markwhitemedia.com/</info>
</track>
<track>
<creator>Mark White</creator>
<title>Access All Areas - Jazz Playalong Book</title>
<location>http://www.markwhitemedia.com/Media/accessallareas.flv</location>
<image>http://www.markwhitemedia.com/Media/accessallareas.jpg</image>
<info>http://www.markwhitemedia.com/</info>
</track>
<track>
<creator>Mark White</creator>
<title>Obama Dance Remix</title>
<location>http://www.markwhitemedia.com/Media/obamadanceremix.flv</location>
<image>http://www.markwhitemedia.com/Media/obamadanceremix.jpg</image>
<info>http://www.markwhitemedia.com/</info>
</track>
</trackList>
</playlist>

(no photos up yet so don't worry about jpegs, but the vids are all there)

Any ideas....is it because the widget thing is in a different place to the other files in 'Media'

Thanks in advance

Mark

Posted: Wed, 2009-11-11 18:44 hobbs  
hobbs's picture

 
2048 translates into the player screaming, "Help, I can't find a valid playlist!!!"

Yet, I'm playing your playlist, your files, your images, with your player & skin here:

    'http://www.markwhitemedia.com/Media/playlist.xml'

Note that I've subverted the player's normal behavior, so it may look a little weird, especially the scrubbing while paused.

OK, what's wrong?

Are you testing with Firefox?

Are you clearing Firefox's cache everytime that you change the playlist?

Firefox tenaciously hangs onto image and XML files, so even a hard refresh won't get a new file from the server.

Your playlist, of course, is fine.

Same with your player and skin files, because I'm using them in the Test Page.

So the caching of an old, invalid playlist is all that I can think of.

Sure enough, it plays fine for me at:

    http://www.markwhitemedia.com/Home.html

so it's the caching thingy...

Posted: Fri, 2009-11-13 06:31 Mark White  
Mark White's picture

Thanks to advice here...Hobbs, the player is coming on.

One small thing, I'd like to add a description for the video. I believe this is an <annotation> in the other format but is called a <description> for the rss playlist.

I have read a few other forums but do not completely understand the playlist formats....this is my code...

<creator>Mark White</creator>
<title>Santander</title>
<description>A new advertising campaign featuring Lewis Hamilton in a world of Scaletrix. The advert required music with a fast, exciting pace</description>
<location>http://www.markwhitemedia.com/Media/santander.flv</location>
<image>http://www.markwhitemedia.com/Media/santander.jpg</image>
<info>http://www.markwhitemedia.com/</info>
</track>

(Once I know I can get the player to do all the things I need and I know I have the technical ability to keep it maintained I'm going to get a licence)

Posted: Fri, 2009-11-13 09:37 hobbs  
hobbs's picture

 
The code that you posted is for the XSPF format playlist, which uses the annotation element for the description.

The Rosetta Stone for playlists is here: http://developer.longtailvideo.com/trac/wiki/FlashFormats#XMLPlaylists

Posted: Fri, 2009-11-13 09:37 Mark White  
Mark White's picture

Also....why does my timer for playhead get stuck at 0:09?
....weird

Posted: Fri, 2009-11-13 10:44 Mark White  
Mark White's picture

Oh that was simple enough, I avoided annotation because I thought it was for a different type of playlist.

Great, thanks again.

Any ideas about the timer sticking...not really worried though

Posted: Fri, 2009-11-13 14:24 hobbs  
hobbs's picture

 
A little "spritz" of WD-40 will fix the elapsed time display.

Actually, you need to use one of the tools like FLVMDI or flvtool2 to create and inject the metadata array of time/byte-position. Then your videos will display the correct elapsed time, duration, and the scrubbar will show & progress correctly as the video plays.

  • Locked