Articles IT Web Multimedia Playing HD/HQ YouTube Videos using the JW FLV Player in Joomla

Playing HD/HQ YouTube Videos using the JW FLV Player in Joomla

Sunday, 18 January 2009 00:00

London Fireworks in High DefinitionYou can now play High Definition/High Quality YouTube videos with the JW FLV Player in Joomla, however it is nowhere near as easy as it sounds!

 I am in the process of updating this article. Please read these extremely relevant articles in the meantime, they are completely up-to-date and will help you. 1) Forget downloading from YouTube, use Amazon S3 instead and 2) Here we go again! Did the PHP files for viewing HD/HQ YouTube videos in the JW FLV Player stop working? Updated 4/17/2010.

 

There are 2 elements that make it harder than it should be. First YouTube doesn't officially support embedding HD/HQ on other FLV players (they support their own player only) so documentation and examples are only available (if at all) from the user community. And second, unique to Joomla, you cannot put an apersand (&) in a link without it being changed from & to &amp ; so a link such as http://www.youtube.com/v=xyz12345&fmt=18 will become http://www.youtube.com/v=xyz12345&amp ;fmt=18 and will no longer work. There is a workaround to prevent Joomla from replacing a & with &amp ; but it involves changing a core Joomla component, and you would have to change this component again everytime you do a Joomla upgrade. 

There is a better way however, one that gives you the HD/HQ video formats from YouTube in the JW FLV Player without having to modify a core Joomla component. This better way involves creating a PHP page for each of the different YouTube HD formats. This solution is largely based on the forum tread http://www.longtailvideo.com/support/forum/Setup-Problems/15114/HQ-video-thorugh-YouTube-API-JW-player- but doesn't tackle the unique Joomla issue of a & being replaced with a &amp ;.

As a reminder, the YouTube HD/HQ formats are below:

Format #

Type

Resolution

Aspect Ratio
6 HQ FLV 480x360 4:3
18 HQ MP4   480x270 16:9
22 HD MP4   1280x720 16:9
35 HQ MP4   640x360 16:9

Below is an example HD video from YouTube, it's format 22. You particularly notice the fact that it's HD when you make the video full screen.

Adding HD/HQ YouTube videos to your JW FLV Player on your Joomla website.

Perform the following steps to add HD/HQ YouTube videos to your JW FLV Player.

  1. Download the PHP files that will be needed from here. You will find 4 PHP files (one for each format) as well as an example JW FLV Player config file.
  2. Upload the PHP files to a directory on your web server. I uploaded mine to a directory named embed.
  3. Add the below code to any page (Joomla Article, Module, etc) you want to display the JW FLV Player in. You just need to pay attention to the items in bold below. First you need to make sure that the path is correct (below I saved all the files in a directory named embed). Second you will want to change the YouTube video (G8sPADP2UU0). And third you may want to change the format (youtube_format22.php). If you find that the video doesn't play (it just appears to be loading), change the format to 6 (youtube_format6.php) or 18 (youtube_format18.php), the video may not be available in the format you have set. Also bear in mind that the majority of your website visitors may not have a very fast broadband connection, so you may want to opt for format 18 as your default (see Introducing the NEW HD/HQ YouTube Video Formats for more information on download size comparisons between the 4 formats).

<script src="/http://ajax.googleapis.com/ajax/libs/swfobject/2.1/swfobject.js" type="text/javascript"></script>
<script type="text/javascript"><!--
      var flashvars =
      {
        'config':               '/embed/flvplayer_config.xml',
        'file':                 encodeURIComponent('youtube_format22.php?v=G8sPADP2UU0'),
        'image':                '/images/whyadvocare_splash01.jpg'
      };

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

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

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

If you don't want to use a JW FLV Player config file, alternatively you can use the below code instead. 

<script type="text/javascript" src="/http://ajax.googleapis.com/ajax/libs/swfobject/2.1/swfobject.js"></script>
<script type="text/javascript"><!--
      var flashvars =
      {
        'file':                 encodeURIComponent('youtube_format22.php?v=G8sPADP2UU0'),
        'image':                '/images/whyadvocare_splash01.jpg',
        'type':                 'video',
        'controlbar':           'over',
        'displayclick':         'play',
        'icons':                'true',
        'stretching':           'fill',
        'autostart':            'true',
        'bufferlength':         '5',
        'plugins':              'googlytics-1'
      };

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

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

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

 If you're interested in comparing the different YouTube HD/HQ formats side by side, see Introducing the NEW HD/HQ YouTube Video Formats.

You might also be interested in the articles Using a 'Watch in HD' link with the JW FLV Player, and How to add HD/HQ YouTube videos to a Playlist for use with the JW FLV Player.

Please leave me a comment if you found this article useful or if you have any questions. 

Comments (24)

Subscribe to this comment's feed
...
0
Hey, thanks very much for the explanation it helped me ALOT!!!!

I just have a question, is there any way to play also playlists in there? I tried to do so but I could figure out how - I am also using joomla with AllVid Realoaded component - I would like to use the playlist feature - can you tell me if this is possible?

Thanks so much for your help I am already telling everyone of my friends about this cool explenation!

Thanks in advance...

Michael
Michael , February 21, 2009
...
0
Hey smilies/wink.gif

Do you have an idea when you will publish the instractions for a playlist?

Thanks a lot

Regards
Michael
Michael , March 09, 2009
...
0
Hi Michael,

I am already overdue for writing an article on using a playlist for HD videos with the JW FLV Player. I am going to try and get it done this weekend. Will email you when it's done.

Thanks for your patience Mate.

Gareth
Gareth , March 11, 2009 | url
...
0
Hey Gareth, ok thanks smilies/wink.gif appreciate it !

Have a nice weekend,

Mike
Michael , March 13, 2009
...
0
Mike,

Here's the article, I hope this was what you were looking for Mate.

http://www.garethhooper.com/articl...ayer-.html

Gareth
Gareth , March 15, 2009 | url
...
0
Hi, Gareth! Thanks for sharing this so valuable info, I come from the related longtail post and it's a relief finding a place that resumes the exact way to do it on Joomla!

Anyway, I'm still a bit confused about how to configure HQ videos on my JW Media Player module. I'm using the module designed by: Gabre Cameron
website: http://pxjunkie.blogspot.com
support: http://groups.google.com/group/px-junkie

but I can't realise how to attach the code you give in your tutorial. I'm afraid that if I modify any of the module files, these changes would affect all the other copies of this module.

I hope you can help me!
Marc , May 03, 2009 | url
...
0
Hi! Sorry about the double-posting, but I begun modifying the flv player module in order to automatize this proces and I would like you to check the code because I can't figure out how to call your PHP files on my config file. Here it is the part of the code that sets the params for a youtube video:


$youTube = 'Necessites tenir el Reproductor Flash instal·lat per tal de veure el vídeo.


var s1 = new SWFObject("'.$modUrl.'player.swf","ply","'.$params->get("width").'","'.$params->get("height").'","9","#'.$params->get("bgColour").'");
s1.addParam("allowfullscreen","true");
s1.addParam("allowscriptaccess","always");
s1.addParam("wmode","transparent", "true");
s1.addVariable("autostart","'.$starton.'");
s1.addVariable("repeat", "'.$repton.'");
s1.addVariable("stretching","'.$params->get("stretching").'");
s1.addVariable("controlbar","'.$params->get("barPosition").'");
s1.addVariable("file", "http://www.youtube.com/watch?v='.$params-s1.addVariable("screencolor", "'.$params->get("bgColour").'");
s1.addVariable("backcolor","'.$params->get("bgColour").'");
s1.addVariable("frontcolor","'.$params->get("btnColour").'");
s1.addVariable("skin","'.$modUrl.'skins/'.$params->get("skin").'.swf");
s1.write("player");
';


This one works flawlessly, and I thought that modifying the "file" variable I could call the proper PHP with the following line:

s1.addVariable("file", encodeURIComponent("youtube_format'.$params->get("quality").'.php?v='.$params-
where "quality" is 6, 18, 22,or 35 depending on the video, and "file" are the youTube final 11 chars. Anyway, the video doesn't show, neither the player. I put the php files on the root folder of the module, where the player.swf file is.

I have never programmed on php before, so this could be some grammar error. Please check this one and tell me if i'm on the right path, thanks!
Marc , May 03, 2009 | url
...
0
Hi Marc,

Sorry for the delay in responding to you, I was travelling with work.

It looks ok actually, but I think I would go through a process of elimination.

Could you tell me if replacing the file variable with the following works or not please, let try simplifying it a bit to try and isolate the problem.

s1.addVariable("file", "http://yourdomainname.com/youtube_format18.php?v=G8sPADP2UU0");

That should work, but if it doesn't could you please leave the player enabled so I can take a look. I'm not travelling with work this week so I can view it without delay.

Gareth
Gareth , May 05, 2009 | url
...
0
Hi! Thanks for your reply, I was also tied up with some work so I couldn't answer until now.

As I'm still developing my new website, I've done the test from the localhost folder, I'm sorry you can't view the results on the web. The changes I made are these:

s1.addVariable("file", "http://localhost/name_of_the_web_folder/youtube_format18.php?v=G8sPADP2UU0");

The player shows on the web, but it gives me a #2048 error.
Then I tried to upload the php files and the player to a temporal hosting, and changed the command like this:

s1.addVariable("file", "http://protosswars.mygamesonline.org/youtube_format18.php?v=G8sPADP2UU0");

But it still doesn't work, it gives me the same error.

Another test I made was to execute from Firefox the next direction:

http://protosswars.mygamesonline.org/youtube_format18.php?v=G8sPADP2UU0

in order to see if the php were well uploaded. Firefox automatically asked me to download the video.mp4 in HQ definition, as well as if I changed the 18 for a 22 I could download it in HD. I could download and play them without problems.

So I assume the problem is just the way the player receives the name of the video, as it seems to work well when queueing to youtube for the correct quality, but not when giving to the player the absolute direction of the video.

I'm sorry I can't show you the web as I haven't uploaded it yet. I'll try to solve this as soon as I can to make revisions easier.

Thanks for all!
Marc , May 08, 2009 | url
...
0
Hi again! I'm still interested in modifying this module in order to make it play HD videos. Just wondering if you had some time to look at it. I'm still trying to upload the webpage for you to see it, but I'm having some FTP transfering problems.

See you!
Marc , May 17, 2009 | url
...
0
Hi Marc,

Did you set the 'Type' to 'Video'? if not could you please.

I tested http://protosswars.mygamesonli...8sPADP2UU0

and it works fine, that's the hardest part.


Regards,

Gareth
Gareth , May 17, 2009 | url
...
0
Hi Gareth!

I suppose you're talking about the module configuration. It has the following ones: single audio, single video (they're for local media), youtube video and youtube playlist. Each one has its own "type" config, and that's what I've been modifying on the youtube one. If it isn't what you were talking about, then please explain it to me.

If that link you tried works, what should I do now?
Marc , May 22, 2009 | url
...
0
Hey Gareth, thanks for your tip! I could solve the problem thanks to your last advice. I just added the variable

s1.addVariable("type", "video");

and then changed the way the module accessed the video like this:

s1.addVariable("file", "youtube_format'.$params->get("quality").'.php?v='.$params-
Once I have finished the web I'll come back to show it to you! Would you be interested in this modified mod of mine that allows you to configure the quality of videos from it? Let me know if you are!

Thanks for all again!
Marc , May 22, 2009 | url
...
0
Wow, worked like a charm, question though, where should I add 2 variables on JWplayer since I have a licensed version?

so.addVariable("abouttext", "My About Text");
s.addVariable("aboutlink","http://www.mylink.com/");

Thank you,
Tom , January 10, 2010
...
0
I would like to ask one important thing. Is it against the youtube TOS not to show the youtube logo?
Thanks your tutorial was awesome
Atul , January 20, 2010
...
0
Sadly, I'm getting the same error as you get since yesterday: 403 Forbidden "Video not found or access denied".

I've been working through the PHP but it looks like the token is no longer valid in combination with the IP, at least I read that might have been the problem in the past.

Any fixes?
Neejoh , March 19, 2010 | url
...
0
Hi Neejoh,

I am not getting that error, everything still appears to work correctly for me.

I know there has been talk about YouTube restricting videos depending on the country you're accessing from (Hulu already does this).

Could you tell me 1) which country you're in, and 2) if you're still consistently getting that error.

That will be a big help! Thanks!

Gareth
Gareth , March 19, 2010 | url
...
0
Hi Gareth,
Yeah I still get that error. I made a screenshot so you can see my problem:
http://i40.tinypic.com/2utotu0.png

I'm from the Netherlands (Europe), but I don't think this is the problem. Thing is, when I use that exact same Youtube video via the "normal" non-PHP way of including it in JWplayer it works like a charm, just not in HD...

This is the output of the debug: http://freetexthost.com/p5aqv3zxfx
Neejoh , March 20, 2010 | url
...
0
Hi Mate,

Yeah, I finally got the same error and I've posted a workaround herehttp://www.garethhooper.com/articl...king-.html
I hope it helps.
Gareth , March 22, 2010 | url
...
0
Thanks a lot for trying Gareth, but unfortunately I was hoping to get both SD and HD to work, for fullscreen purposes. But thanks again for your time.
Neejoh , March 26, 2010 | url
...
0
Hi

can anyone help me, i had the jwplayer working pulling in a video i made and posted to youtube, but it seems to have stopped, it just never loads. Can anyone tell me whats wrong and how to fix it?
http://www.golf-finder.net/golf/golf-course-directory.html it's the burnham and berrow "VIRTUAL TOUR"
dave , May 05, 2010 | url
...
0
JW flv player in joomla is one amoung the popular players its working good and its amuzing.
Thiaghu , January 19, 2011 | url
...
0
Hello ,thanks for all the great information you have shared!
pandora beads , January 27, 2011 | url
...
0
Excellent YouTube player this is very good information.
Flv Player , October 11, 2011 | url

Write comment

feedShow/Hide comment form
smaller | bigger

busy
< Prev   Next >

Like us on Facebook

Recommended Articles