The web page produced by the AOL Video Search AJAX API example application consists of a "Hello World" heading followed by 10 lines that represent Madonna-related videos currently available on the Web.
That's a nice illustration that the Video Search API can make calls, receive information back, and display something on a web page. But what if you'd like to customize and extend that basic application, just a little bit? I decided to try to host the Video Search AJAX API on one of my own pages (using my key) and add the following features:
- search for a type of video of my own choosing
- include additional information about each video
- add simple formatting to organize the added information
- add capability to view the videos
The AOLVideoSearch object
The AOLVideoSearch object is presented on the front page of the Video Search AJAX API Reference Documentation. This object is the workhorse of the AJAX API. Understanding what it offers can give you everything you need to create a video search site that offers users enormous interactive flexibility. Not that I'll be demonstrating those interactive capabilities in this post, but just from browsing the methods and attributes in the reference documentation, you can see that crafting a truly interactive video search capability awaits only your creative engineering effort. The tools are there.
The getVideos() method
Meanwhile, I decided to search for videos about some topic other than Madonna (not that I don't like her music, mind you). What is searched for is defined using the getVideos() method.
getVideos() accepts two optional arguments:
- query: what you'd like to search for (which can be a complex statement with Booleans, etc.)
- start: the starting position for the returned results (can be used for a page where you let the user select "view more selections," for example)
To change the search topic, I simply placed the text 'Cute Chihuahua' into my getVideos() call, which is located in function handleVSLoad():
function handleVSLoad() {
AOLVS.getVideos('Cute Chihuahua');
}
The VideoSet data object
The getVideos() method responds with a VideoSet data object (among others). This object is a container that holds information about the query, its result, and information about each video returned by the query. Hence, the VideoSet data object became my source for creating an enhanced information display for my returned list of videos.
The handleUpdate() function is used in AOL's demonstration application to write inner HTML using the results returned from the getVideos() call. I modified this code, replacing "Hello World" with a heading identifying my video search query. And I extended the inner HTML to include the source channel for each video (for example, YouTube, AOL Video, Yahoo!) and the description text for the video. Here's my revised handleUpdate():
Fine, nice data about videos. Now how about letting me see those chihuahuas?
Good point. What's a video search page good for if you can't click and watch the videos?
Notice that line near the bottom that includes AOLVS.VideoSet.embedTag. This is a data element that consists of HTML text that embeds a set of clickable thumbnails from each video that was returned from the search. How convenient!
Here's how my web page implementing the new code looked right after I uploaded my revised and enhanced code:
If you'd like to visit the actual web page, so you can watch the returned videos of cute chihuahuas, go to diyincite.com/aol/video and click on the scrolling images at the bottom of the page.
The complete "Cute Chihuahua" video search application
My complete modified and enhanced code is listed below. Note that to implement this (or something similar) on your own web page, you'll have to register and get your own appid by registering for your own AOL Video Search API account.
Here's my complete AOL Video Search "Cute Chihuahua" listing:
-- Kevin Farnham
O'Reilly Media