* API : Application programming Interface
Two years ago, I had to do a video section for our in-house website, indonesiaclubbing.com. We already had our own YouTube channel. So everytime I was uploading a video on YouTube, I had to add it once again on indonesiaclubbing database (using a home-made admin panel) so users would be able to view videos directly from our website, without having to visit our YouTube channel.
Adding the info for a video on our website was taking us a few minutes. But two years and 200+ videos later, you can imagine that we have to find a way to avoid this “double-add” process. Time is money.
When I’m not at the office, I’m always looking for new ways to enhance our websites, learn new things, so they can be used by our clients. So let’s consider indonesiaclubbing as the perfect site to test new things in terms of programming.
My idea was simple : using the YouTube API to grab content of my channel directly from YouTube, and display it on my website, so I would not have to care about adding my videos to my own database too everytime I upload a video on YouTube.
YouTube API is “simple”. You call a YouTube URL with some parameters, YouTube send you back a list of videos matching your criterias. Then you have to “transform” the data received in good-looking HTML.
For my tests, I did not want to use PHP, since that’s a language I use every day, I wanted to make the work a bit more challenging by using something I barely use : JSON. JSON is not that complicated in fact. It’s just javascript made for data exchange (a bit like PHP serialize() function). To get YouTube feed, I use jQuery $.ajax() function. To display the video (play it), I use swfobjects, a powerful Flash embedding library.
By default, I load the 12 last videos from my channel, and automatically play the latest one. If you click a YouTube thumb, the page will scroll automatically to the Flash YouTube player (if needed) and automatically play the video corresponding to the clicked thumb (scroll using excellent scrollTo jQuery plug-in).
The page navigation is generated only when the page is initialized. Clicking a page will create a nice fade-in / fade-out effect during the loading of the videos corresponding to the clicked page.
There are still improvements to do (I want to get rid of the youtube control bar and add my own external controls for the video, and also display more information for the video, like comments, rating, description, and so on).
Want to see the results ?
check http://www.indoclubbing.tv !
Without jQuery and swfobjects (loaded directly from Google servers), my overall code is 12Kb (including css + html). Considering that everything was done in just an afternoon, I am pretty happy of the results.
