Building a Youtube playlist queue with php and jQuery

Sunday, 6 December 2009


This post looks at how you can use php and jQuery to build a Youtube playlist queue, be the envy of your friends at your next party and allow your friends to search and drag items to a Youtube playlist.

As a Youtube playlist refreshes each time the page refreshes there is no need to call a page refresh each you add items, once the current video has finished playing the screen refreshes and updates the playlist.




In order to get a working version of my application you will need to do the following steps:
1. Download Zend Gdata package
2. Download my application code
3. Get a Google developer key
4. Extract the Zend Gdata package
5. Extract my application inside the root folder containing the Zend Gdata package, which should look like this:
/ZendGdata-1.9.6/jyt
6. Open /ZendGdata-1.9.6/jyt/operations.php and enter your developer key on line :56 where it says $_SESSION['developerKey'] = '-set your developer key here -';

To begin with this post should be looked at as an introduction to the world of possibilities available with Gdata and php. The demo application provided is very limited, but presents a glimpse at something that could be a great application given a months development work. It should also give you a taste for how easy it is to use Gdata to build applications based on Google authenticated users.

In order to build good quality applications with Google you really need to do a bit of reading, it's not something that you can understand in a day. Google's APIs are large and you will need to read them if you want to take things further.

My demo application uses AuthSub which is the basic method for giving an application permission for using your Google data. You can read more about AuthSub here.

But the main part of the application is ZendGdata. As Zend so gracefully put it: "These packages (ZendGdata) contain everything you need to access Google's Data APIs from your PHP 5 application.". When thinking about Zend and writing small applications you may be tempted to think why bother; it was something that held me back before from looking at integrating Google application data previously. Why would you want to use Zend framework when I just want to list my damn youtube videos? Well it turns out you don't need an entire framework, you just need the ZendGdata package that can be downloaded from here.

ZendGdata works simply like any other third party API or library. It's not too large or overbearing (the library folder currently comes in at around 2MB), so don't be scared of it. But it does contain a whole bunch of useful functions for authenticating and accessing Google data.

The package also contains the documentation and also some sample applications that you can begin playing with, how cool is that.

My application is based on the Youtube application provided with the package. To begin with it generates a link to ask the user to authenticate, if you are signed in to youtube this will ask you to 'allow' or 'deny' the application access to your data.

Once authentication has taken place the application will then go and retrieve and display your first playlist (it is possible for it to display any available playlist, I have just kept things simple). You are then displayed a search box to enter terms and submit.

Once you have searched and found a video you like, simply drag the video on to the target, it will be removed from the search list. Your playlist will then update and the added video will be at the bottom.

Why did I want to build this application? Many years ago I went to a party, it was at a time when Napster was just starting to become popular, I was amazed at the limitless possibilities of what was essentially an infinite jukebox. People could go over to the computer at the party, select the tunes they wanted and they would be queued and played. Allowing anyone to come and choose the tunes they wanted to hear. CD switching was a pain in those days as you had to wait for one song to finish and for the crowed around the stereo to disperse.

So there you have it. I hope this inspires you to Google application building greatness.

Enjoy!

blog comments powered by Disqus