Use the YouTube API with JSP

    The YouTube allows web developers to access public content through its developer API. This API is REST-based, so the ordinary HTTP request will return some XML data the developer can parse and use extracted data in own applications. This article demonstrates the usage of YouTube Data API. We will get video data right from YouTube and show them on our own site.

YouTube API is described here. To see how this works, try to access this URL for example:
 


http://gdata.youtube.com/feeds/api/standardfeeds/most_viewed

in your web browser. This request returns a list of the most frequently viewed videos on YouTube. The response looks so (at the time we wrote this and showing the first entity only):
 


<?xml version='1.0' encoding='UTF-8'?>
<feed xmlns='http://www.w3.org/2005/Atom' xmlns:openSearch='http://a9.com/-/spec/opensearchrss/1.0/' xmlns:gml='http://www.opengis.net/gml' xmlns:georss='http://www.georss.org/georss' xmlns:media='http://search.yahoo.com/mrss/' xmlns:yt='http://gdata.youtube.com/schemas/2007' xmlns:gd='http://schemas.google.com/g/2005'>
<id>http://gdata.youtube.com/feeds/api/standardfeeds/most_viewed</id>
<updated>2008-04-25T01:23:33.000-07:00</updated>
<category scheme='http://schemas.google.com/g/2005#kind' term='http://gdata.youtube.com/schemas/2007#video'/>
<title type='text'>Most Viewed</title>
<logo>http://www.youtube.com/img/pic_youtubelogo_123x63.gif</logo>
<link rel='alternate' type='text/html' href='http://www.youtube.com/browse?s=mp'/>
<link rel='http://schemas.google.com/g/2005#feed' type='application/atom+xml' href='http://gdata.youtube.com/feeds/api/standardfeeds/most_viewed'/>
<link rel='self' type='application/atom+xml' href='http://gdata.youtube.com/feeds/api/standardfeeds/most_viewed?start-index=1&max-results=25'/>
<link rel='next' type='application/atom+xml' href='http://gdata.youtube.com/feeds/api/standardfeeds/most_viewed?start-index=26&max-results=25'/>
<author>
<name>YouTube</name>
<uri>http://www.youtube.com/</uri>
</author>
<generator version='beta' uri='http://gdata.youtube.com/'>YouTube data API</generator>
<openSearch:totalResults>94</openSearch:totalResults>
<openSearch:startIndex>1</openSearch:startIndex>
<openSearch:itemsPerPage>25</openSearch:itemsPerPage>
<entry>
<id>http://gdata.youtube.com/feeds/api/videos/dMH0bHeiRNg</id>
<published>2006-04-06T14:30:53.000-07:00</published>
<updated>2008-04-25T13:18:26.000-07:00</updated>
<category scheme='http://gdata.youtube.com/schemas/2007/keywords.cat' term='Dancing'/>
<category scheme='http://schemas.google.com/g/2005#kind' term='http://gdata.youtube.com/schemas/2007#video'/>
<category scheme='http://gdata.youtube.com/schemas/2007/keywords.cat' term='comedy'/>
<category scheme='http://gdata.youtube.com/schemas/2007/categories.cat' term='Comedy' label='Comedy'/>
<title type='text'>Evolution of Dance</title>
<content type='text'>The funniest 6 minutes you will ever see! Remember how many of these you have done! Judson Laipply is dancing - http://www.evolutionofdance.com - for more info including song list!
</content>
<link rel='alternate' type='text/html' href='http://www.youtube.com/watch?v=dMH0bHeiRNg'/>
<link rel='http://gdata.youtube.com/schemas/2007#video.responses' type='application/atom+xml' href='http://gdata.youtube.com/feeds/api/videos/dMH0bHeiRNg/responses'/>
<link rel='http://gdata.youtube.com/schemas/2007#video.related' type='application/atom+xml' href='http://gdata.youtube.com/feeds/api/videos/dMH0bHeiRNg/related'/>
<link rel='self' type='application/atom+xml' href='http://gdata.youtube.com/feeds/api/standardfeeds/most_viewed/dMH0bHeiRNg'/>
<author>
<name>judsonlaipply</name>
<uri>http://gdata.youtube.com/feeds/api/users/judsonlaipply</uri>
</author>
<media:group>
<media:title type='plain'>Evolution of Dance</media:title>
<media:description type='plain'>The funniest 6 minutes you will ever see! Remember how many of these you have done! Judson Laipply is dancing - http://www.evolutionofdance.com - for more info including song list!
</media:description>
<media:keywords>comedy, Dancing</media:keywords>
<yt:duration seconds='360'/>
<media:category label='Comedy' scheme='http://gdata.youtube.com/schemas/2007/categories.cat'>Comedy
<media:content url='http://www.youtube.com/v/dMH0bHeiRNg' type='application/x-shockwave-flash' medium='video' isDefault='true' expression='full' duration='360' yt:format='5'/>
<media:content url='rtsp://rtsp2.youtube.com/ChoLENy73wIaEQnYRKJ3bPTBdBMYDSANFEgGDA==/0/0/0/video.3gp' type='video/3gpp' medium='video' expression='full' duration='360' yt:format='1'/>
<media:content url='rtsp://rtsp2.youtube.com/ChoLENy73wIaEQnYRKJ3bPTBdBMYESARFEgGDA==/0/0/0/video.3gp' type='video/3gpp' medium='video' expression='full' duration='360' yt:format='6'/>
<media:player url='http://www.youtube.com/watch?v=dMH0bHeiRNg'/>
<media:thumbnail url='http://img.youtube.com/vi/dMH0bHeiRNg/2.jpg' height='97' width='130' time='00:03:00'/>
<media:thumbnail url='http://img.youtube.com/vi/dMH0bHeiRNg/1.jpg' height='97' width='130' time='00:01:30'/>
<media:thumbnail url='http://img.youtube.com/vi/dMH0bHeiRNg/3.jpg' height='97' width='130' time='00:04:30'/>
<media:thumbnail url='http://img.youtube.com/vi/dMH0bHeiRNg/0.jpg' height='240' width='320' time='00:03:00'/>
</media:group>
<yt:statistics viewCount='83120037' favoriteCount='436714'/>
<gd:rating min='1' max='5' numRaters='307223' average='4.65'/>
<gd:comments>
<gd:feedLink href='http://gdata.youtube.com/feeds/api/videos/dMH0bHeiRNg/comments' countHint='146840'/>
</gd:comments>
</entry>
<entry>
...
</entry>
</feed>

each entity here describes one record on YouTube site. You can see title, description, direct reference to the player and even the links to rtsp streams for the mobile video.

Now let us go to JSP.

Coldtags suite provides a custom JSP taglib lets you easily incorporate the above mentioned data into your own site. For example:
 


<%@ taglib uri="taglib.tld" prefix="y" %>

<y:YouTubeData uri="http://gdata.youtube.com/feeds/api/standardfeeds/most_recent" id="A" />

here tag requests data feed from YouTube and saves the parsed data in the page scope. The structure for the feed url is described here. For example:
 

News:
http://gdata.youtube.com/feeds/videos/-/News
Most recent:
http://gdata.youtube.com/feeds/api/standardfeeds/most_recent

etc.

You can cache the requested data. An optional tag's attribute ttl describes a caching time in the seconds. So all the subsequent requests (it is an application level cache) for the same url will be served right from cache. E.g. the following code will request YouTube once per 5 minutes:
 


<%@ taglib uri="taglib.tld" prefix="y" %>

<y:YouTubeData uri="http://gdata.youtube.com/feeds/api/standardfeeds/most_recent" ttl="300" id="A" />

attribute id describes a page scope variable with the parsed data from YouTube. Now you can loop over the requested data and do some processing.

Tag ForEachVide iterates over the requested data. On the each loop's step you can access to the page scope variable described in the parameter video. This variable describes one entry in YouTube data feed. The following code demonstrates access to the various attributes of video entries:
 



<y:ForEachVideo data="A" id="vb">
  <p><a href="<%=vb.getMedia().getPlayer()%>" target="_blank"><%=vb.getTitle()%></a>
  <br> By <%=vb.getAuthor().getName()%> Hits: <%=vb.getStatistics()%>
  <br> <%=vb.getContent()%>
</y:ForEachVideo>

Attribute data describes the name for the page scope variable with the parsed data. And attribute id here describes a name for the page scope variable with the current entity (video). The code above just prints some data from YouTube feed and link to the player. So you will get some like this:
 

Evolution of Dance
By judsonlaipply Hits: 83120037
The funniest 6 minutes you will ever see! Remember how many of these you have done! Judson Laipply is dancing - http://www.evolutionofdance.com - for more info including song list!
...

You can use this as example and request by the similar manner the attributes you need in your application. The names for functions are mnemonically, so getPlayer() returns URL for the player, getTitle() returns title for the video etc. Of course, you can use EL here: ${vb.title} etc.

And by the way the same taglib could be used by the Coldfusion developers too.

On practice you can see components using this approach in our mashups directory

See also for Java web components: