We are very fortunate at Google to have amazing people come in to speak to us on many interesting topics. We record these talks and make them available on Google Video.
We recently added a feature on the Google Code website that displays recent videos from our tech talk series.
You could do this directly using the Video Bar or the Video Search Control which have wizards to make implementation trivial.
In our case, we wanted to make the bottom right portlet fit in with the look and feel of the rest of the site, so we decided to go a little more low level.
The resulting code was simple. At its heart we:
- Told the searcher to give us the most recent searches via
videoSearch.setResultOrder(GSearch.ORDER_BY_DATE)(as opposed to the default 'most relevant' setting)
- Told the searcher that we would handle generating the HTML ourselves via
- Do the work of creating the HTML from the results after the results come back. We track this with
We used this to dynamically create the HTML and then inserted it into the DOM with innerHTML.
var result = videoSearch.results[x];
var nicerDate = new Date();
var dateFormatted = (nicerDate.getMonth()+1) + '/' + nicerDate.getDate()
+ '/' + nicerDate.getFullYear();
output += '<div class="featured"><div class="project"><div '
+ 'class="screenshot"><a href="' + result.url
+ '" rel="nofollow"><img src="' + result.tbUrl + '" alt="'
+ result.titleNoFormatting + ' Screenshot" width="129" height="110" '
+ '/></a></div><div class="info"><div '
+ 'class="name"><a href="' + result.url + '" rel="nofollow">'
+ result.titleNoFormatting + '</a></div><div '
+ 'class="author videodateformat">Recorded on ' + dateFormatted
+ '</div><div class="duration">Duration: '
+ parseInt( result.duration / 60) + ' mins</div></div><p '
+ 'class="videosnippet">' + result.content
What is important to know, is that the AJAX Search API is a powerful beast. On the one hand you can run a wizard and get results that you can copy and paste onto your web pages. On the other hand you can get low level and query the backend which returns simple JSON for you to manipulate.
The AJAX Search team seems to release something new on just about a weekly basis, so subscribe to the Google AJAX Search API Blog to follow along.