How to add HD/HQ YouTube videos to a Playlist for use with the JW FLV Player

Sunday, 15 March 2009 16:34

playlist_teaser Adding HD/HQ YouTube videos to a playlist for use with the JW FLV Player is relatively straightforward. First, if you haven’t already, you will need to implement the YouTube related PHP files I detail in Playing HD/HQ YouTube Videos using the JW FLV Player in Joomla. The playlist that you will be using/creating below will reference those PHP files.

The JW FLV Player supports many playlist formats, but for the purpose of this article I’m going to use the XSPF format.

The Player below is using an XSPF playlist with 3 HD/HQ videos on YouTube. The thumbnails for the videos are also from YouTube.

If the movie isn’t playing, download a new ADOBE FLASH PLAYER.

Below is the Javascript code used to create the above player and playlist. I have put the JW Player and all associated files in a directory named embed so if your files aren't in that directory, change the path accordingly.

I did come across one GOTCHA! If you specify a 'type' in your configuration, whether it be in a config file like I use, or specified along with the javascript, the playlist won't work. It took me over an hour to work that out by a process of elimination. I like using a config file so I can use constant setting for all players across my websites, so I created another config file for use with just playlists. The only difference between the config files was the type was removed.

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

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

swfobject.embedSWF('/embed/player.swf', 'player1', '640','540', '9.0.124', false, flashvars, params, attributes);
// --></script>
<div id="playercontainer" class="playercontainer"><a align="center" id="player1" class="player">If the movie isn’t playing, download a new ADOBE FLASH PLAYER.</a></div>

I'm sure you will want to customize the size and location of the playlist, as a reminder, you'll find the parameter choices at LongTail Video.

I suggest you start off by using my Sample Playlist first to make sure the Playlist displays and works correctly on your pages. Once you've verified that its working correctly, you can then start creating your own playlists.

Creating your own Playlists

Below is the sample playlist used with the above player.

<?xml version='1.0' encoding='UTF-8'?>
<playlist version='1' xmlns='http://xspf.org/ns/0/'>
<title>YouTube High Quality Video Playlist</title>
<creator>Gareth Hooper</creator>
<trackList>
    <track>
      <title>New Star Trek Trailer</title>
      <annotation>The new Star Trek Trailer that came out in March. Full HD (fmt=22).</annotation>
      <meta rel="captions">none</meta>
      <location>http://garethhooper.com/embed/youtube_format22.php?v=P0xaCB2nLS0</location>
      <image>http://img.youtube.com/vi/P0xaCB2nLS0/0.jpg</image>
      <meta rel="type">video</meta>
      <duration>136</duration>
</track>
    <track>
      <title>Gran Torino Trailer</title>
      <annotation>Gran Torini Trailer in HQ (fmt=18)</annotation>
      <meta rel="captions">none</meta>
      <location>http://garethhooper.com/embed/youtube_format18.php?v=t2BiE0bwC1M</location>
      <image>http://img.youtube.com/vi/t2BiE0bwC1M/0.jpg</image>
      <meta rel="type">video</meta>
      <duration>150</duration>
</track>
<track>
      <title>Radiohead - Reckoner</title>
      <annotation>Radiohead - Reckoner LIVE in Tokyo Oct 2008. In Full HD(fmt=22)</annotation>
      <meta rel="captions">none</meta>
      <location>http://garethhooper.com/embed/youtube_format22.php?v=uSvhtIbyucQ</location>
      <image>http://img.youtube.com/vi/uSvhtIbyucQ/0.jpg</image>
      <meta rel="type">video</meta>
      <duration>323</duration>
</track>
</trackList>
</playlist>

I use Notepad to edit and create my playlists. If you also use Notepad, you MUST save the file as UTF-8 Encoded. This is NOT the default encoding, so you must change it to UTF-8 at the bottom of the Save As window.

Note on img.youtube.com

Anyone who has uploaded a video on to YouTube knows that YouTube will automatically create 3 different thumbnails for you to choose from, when selecting which thumbnail will represent your video. Most people however don't know that YouTube makes these 3 video thumbnails available for anyone to use. The naming convention is the following:

http://img.youtube.com/vi/videoid/thumbnail.jpg - where videoid is the Video ID you're used to using, and thumbnail is the thumbnail selection based on the table below.

Thumbnail #	Description
1	Thumbnail 1 of Video. 128 x 96 px in size.
2	Thumbnail 2 of Video. 128 x 96 px in size.
3	Thumbnail 3 of Video. 128 x 96 px in size.
0	Thumbnail 2 of Video. 320 x 240 px in size.

That's it! That's all you should need. Please leave me a comment if you found this article useful or if you have any questions.

Comments (31)

...

man you are my hero smilies/cheesy.gif

thanks so much!!!! This description is very good!!!!!

Thanks so much!!!

Michael , March 17, 2009

...

Man i gotta try this I love your demo. Im being pulling my hair off trying to figure this thing out. I may need lil help but hopelly i will get it running. Thanks for this tutorial article

water , March 22, 2009

...

Thanks for the feedback! I appreciate it

Just let me know if you need any help.

Gareth

Gareth , March 22, 2009 | url

...

Great work.

However, does this work strictly in Joomla? I've had no luck with this so far. Paths look to be in order, files moved in the correct directories, etc, but no luck...

Aaron , March 24, 2009

...

Aaron, what editor are you using? Some editors do not allow javascrip in the code and take it out after you save. So either try JCE or disable EDITOR in backend config and then type the javascript code in the content, you will see it works smilies/wink.gif

Another quesion or PROBLEM

. YouTube videos do not play anymore, neither in your nor in my site, no YT-Video are availale, do you know what the prob. could be? Maybe YouTube itself? Changed coding or something like that??

THanks in advance
MIke

Michael , March 27, 2009

...

Guys I found an alternative:

I found this site:
http://www.youtubemp4.com/

And now I will tell you how we can use this site with the script that Gareth gave us to play YouTUbe Vids.

So You first take the script, and change the `file`to this:

http://www.youtubemp4.com/video/(YT-VIDEO-ID-GOES-HERE).mp4
take a look on the sample below (bold)
====================================================

If the movie isn’t playing, download a new ADOBE FLASH PLAYER.
===================================================
Then after this you of course need to fit this for your server, for example change "config.xml" file or the player, I changed the script a little bit for me.

--------------------------------------
But this a temporary solutiun, I hope we can make a script again, but I dont know what the problem is.

Tell me if you managed to do or have any questions.

THanks, Mike!

Michael , March 27, 2009

...

Oops the script does not appear in the comment, you just need to change the 'file': to

'file': 'http://www.youtubemp4.com/video/VmCGljsvls8.mp4',

then it will work. and dont forget to costumize the rest (config, player, etc.)

Greetings, MIke

Michael , March 27, 2009

...

Thanks Guys, I appreciate it.

It must have stopped working in the last 24 hrs. It was working fine yesterday. I'll look into it. Youtube must have changed it's API.

Gareth

Gareth , March 27, 2009 | url

...

Mannnnn my HD video stopped working too today. They were working last night. if anybody find a fix please let us Know. Thanks

water , March 27, 2009

...

Sorry about the preview comment. i just looked up and saw the temp fix. It does work. but will be happy if the first script can be fix. Thanks guy for your work on this.

water , March 27, 2009

...

Guys,

I changed the PHP files so you no longer need a workaround. Basically YouTube changed the url you use to lookup the CORRECT video token.

See http://www.garethhooper.com/articl...king-.html

Please leave a comment if it works for you. It adds third party credibility to the article and other visitors might be more inclined to use it.

Thanks Guys!

Gareth

Gareth , March 29, 2009 | url

...

hello i have a problem. Im using the HD code i got from here and its working fine on one of my site but on the one using the same template as this one its not working!!!! any suggestion ? I tried every single codes i seeing here and none of them work. its very estrange because i have it working on one site and i tried copying everything exactly the same just changing the path but it doesn't even show the player. Hmmm

Water , April 21, 2009

...

Water,

Can you give me the url to the site that is not working. I'll take a look.

Are you using the same hosting company for the other website? It's possible there PHP setup on the other website is more restricted.

Gareth

Gareth , April 21, 2009 | url

...

@ Gareth

Sure the website im trying to use it is www.sajomacity.com and you are right bout the hosting im using two different hosting server. The one that its working its hostmonter and the not working one is Dreamhost. Since like 3 days ago i started having problem with Dreamhost it look like they update their server and maybe added more security file since my playlist generator its now taking really long to load and some time it wont even load. I had to disable the playlist auto generator and use manually crated xml file to load my music player. But any way if you can check that for me so the site im having problem its www.sajomacity.com and the one that its working its www.kallejero.com

Thanks

Oh i have the HD player disable on the site since its not loading let me know if you want me to add the code and the player to the site

water , April 23, 2009

...

Hello Gareth ok i had enable the player on the maing page. if you look underneath the Chatango box you will see the message

(If the movie isn’t playing, download a new ADOBE FLASH PLAYER.)

(HD Videos of the Week)

this is the Embed where the player goes.

Thanks again

water , April 24, 2009

...

sorry forgot to add the link to the site again

www.sojomacity.com

water , April 24, 2009

...

Hi Water,

There are a few things wrong.

1) The path for the XML files doesn't appear to be correct. I should be able to put http://sajomacity/HDVideos/flvplaylist_config.xml in my browser and see it, just like http://www.garethhooper.com/embed/...onfig.xml. So check the path you put the file in.

2) Similar to 1) above, but I should be able to the playlist path in my browser and see it http://sajomacity/HDVideos/youtubeHD.xml like you can with http://www.garethhooper.com/images...ylist.xml.

3) You need to separate out the parameters correctly.

'file': 'http://sajomacity/HDVideos/youtubeHD.xml&backcolor=43830b&lightcolor=2a5108&frontcolor=ffffff&logo=http://sajomacity/HDVideos/HDvideo.png&skin=http://sajomacity/HDVideos/skin/controlpanel/controlpanel.swf',

SHOULD BE

'file': 'http://sajomacity/HDVideos/youtubeHD.xml,
'backcolor': '43830b',
'lightcolor': '2a5108',
'fontcolor': 'ffffff',
'logo': 'http://sajomacity/HDVideos/HDvideo.png',
'skin': 'http://sajomacity/HDVideos/skin/controlpanel/controlpanel.swf',

4) I haven't used the viral JW flv player, so I assume the path below is correct, I suggest you double check it.

swfobject.embedSWF('http://sajomacity/HDVideos/player-viral.swf'

When I put http://sajomacity/HDVideos/player-viral.swf in my browser I should see something like I do with http://www.garethhooper.com/embed/player.swf

I hope that helps Water!

Good luck!

Gareth

Gareth , April 26, 2009 | url

...

Hello Gareth. Yeah sorry i messed it up on the path forgot to add the .com at the end of site name. but that didn't fix it. you can check again everything with the path should be fine now

http://sajomacity.com/HDVideos/flvplaylist_config.xml

http://sajomacity.com/HDVideos/youtubeHD.xml

http://sajomacity.com/HDVideos/player-viral.swf

http://sajomacity.com/HDVideos/skin/controlpanel/controlpanel.swf

http://sajomacity.com/HDVideos/HDvideo.png

And still not working. i have the same setting on my other site and everything its working fine.
About separate the correct way im going to try that and see if that work but in www.kallejero.com i have it just the way you see it on this www.sajomacity.com site and it work fine there. But i will try with the correct separating code. Thanks again hope we can get to the bottom of this and fix it

water , April 28, 2009

...

How you doing Gareth? well just wondering if you looked at my page? let me know and let me know if you see something wrong with the code

water , May 03, 2009

...

Hi Water,

Sorry I was travelling with work. Can you enable the player on your sajomacity.com website please. That way I can take a look. I couldn't see it on the website when I just looked.

Regards,

Gareth

Gareth , May 05, 2009 | url

...

Guys,

Is any of this legal and YouTube TOS compliant? I am asking because I do not see the YouTube watermark.

My understanding is that YT players (chromed and chromeless) are the only YT TOS compliant ways of displaying YT videos on a site. Both of them display the YT watermark in the bottom right corner.

Please explain.

Regards,
Zdravko

Zdravko , July 03, 2009

...

Hi!

Please can you help with the JW Media Player, I cannot get it work.
it is on the www.uurraahh.com website.
There appears some error.
Here is the playlist file: http://uurraahh.com/modules/mo...aylist.xml

But where should I find the configuration file, please?

Thank you for assistance.

Catrin

Catrin , April 19, 2010 | url

...

Make your life more easy take the personal loans and all you require.

BRIANAWALLER , December 30, 2011 | url

...

I follow you VIA GFC and I love your blog!,http://www.moncleroutletjackor.com

Moncler Outlet , March 13, 2012 | url

...

so pretty.You are a good teacher. Lucky student!,http://www.pandoracharmsforsale.com

Pandora For Sale Australia , March 28, 2012 | url

...

In last weeks Economist, there's a semi-decent article on reading sentiment from large masses of anecdotal data (tweets, mainly).,http://www.2012louisvuittonbags.com

Louis Vuitton Fashion , March 30, 2012 | url

...

For this statement, Jochen Zeitz argued that a considerable part of the product had being through wind and rain to counter the trend of fail for decades,http://www.jordan-chaussures.fr

jordans chaussures , April 01, 2012 | url

...

http://lvhandbagsdiscounted.com/

louis vuitton handbags , April 10, 2012 | url

...

http://monsterbeatsbydre4cheap.com/

beats by dre , April 10, 2012 | url

...

I like you on facebook and follow through google reader!,http://www.charmsforpandora.net

Charms For Pandora , May 07, 2012 | url

...

Thanks, I'm going to have nightmares tonight.,http://www.pascherjordans.fr

Air Jordan Retro , May 08, 2012 | url