- Search for video by channel name or keyword from the YouTube API
- Use the Titanium HTTP client for async XML requests and response handling
- Retrieve video results from YouTube and display thumbnail & text in a table
- Create a WebView window and use it to display YouTube video player
- Hand-off YouTube video links to the OS for external playback
All in all, following this tutorial, you should be able to perform the basic functions you would need to build an app that front-ended video content stored on YouTube.
First, we declare our variables:
//this is the main app window
var win = Titanium.UI.currentWindow; var toolActInd = Titanium.UI.createActivityIndicator(); var tableview; var data = []; var webModal; var webModalView; var currentLink; var xhr = Ti.Network.createHTTPClient(); |
Now you need to declare a function that knows how to play YouTube videos on iOS and Android. Every YouTube video has a GUID (globally unique id – or at least unique for YouTube) and a title. You pass those two values to this function and it will either launch the YouTube player directly (Android) or display a thumbnail with playbutton that the user can launch (iOS).
function playYouTube (vtitle, vguid) { if (Titanium.Platform.name == ‘iPhone OS’) { var ytVideoSrc = “http://www.youtube.com/v/” + vguid; var thumbPlayer = ‘<html><head><style type=”text/css”> body { background-color: black;color: white;} </style></head><body style=”margin:0″><br/><br/><center><embed id=”yt” src=”‘ + ytVideoSrc + ‘” type=”application/x-shockwave-flash” width=”100%” height=”75%”></embed></center></body></html>’; showHTMLContent(vtitle,’http://www.youtube.com/watch?v=’ + vguid,thumbPlayer); |
The reason you show an embedded YouTube thumbnail player on iOS, is that it will allow the video to play inside of the app without leaving the context of the app. This was more a problem on the non-multitasking iOS 3.x, and is still an issue on the iPad until iOS 4.2.
In the function above, there is a showHTMLContent() function call. This function is not built-in, and is just a way to simplify the common need to show some bits of HTML markup within your app. The arguments for the function are a title of the page, an optional URL to the source content of the page, and the direct HTML markup content to display.
function showHTMLContent(wTitle, wUrl, wHTMLContent) { //store the link for later use //create the window to hold the web view //set the orientation modes for basically any which way //create the webview aka the embedded web browser (webkit/safari) //add the web video to the modal window //set the title of the window //if you are using a tab UI in the app, this will open the window //set the HTML to display to the markup passed into the function }; |
Great, so now we have the ability to display a YouTube player within our app using an embedded WebView. Pretty awesome so far, and hopefully you see how might use components like WebView for other mashups of native and web content in your apps.
Now we need to demonstrate how to get the data from YouTube on what videos are available. For this, we create another function called “doYouTubeSearch()”. This function takes two parameters: you can specify the channel name to retrieve videos from, or you can specify a search term, and you can combine these as well, to search videos from a specific channel only.
function doYouTubeSearch (channel, searchTerm) { //first show a “loading” spinning indicator to the user win.setToolbar([toolActInd],{animated:true}); toolActInd.show(); //use the xhr http client object to do an HTTP GET request to the URL |
That was all pretty straightforward, right? You build up a URL, and you make the request using it for data from YouTube. Now, how you receive the response to that request is our next step. To do this, you must define an “onload” function for the ‘xhr’ object.
It is in this function that you will receive the data back from YouTube (usually in JSON or XML format), and you can process it to display in your app.
xhr.onload = function() { try { //the doc object holds the response structure var doc; //check whether the data coming back is in XML format or not if (!this.responseXML) //now we can easily get a list of items from teh results //some simple variables for tracking the loop //now just loop through the response array to see what videos we have for (c=0;c<items.length;c++) //get the text for the video title tag using standard DOM XML calls //build up a summary string to display below the title //get the link to the youtube video if (item.getElementsByTagName(“link”)) //now here is where we perform a trick //now we can use that guid to load up a thumbnail image //okay we have all the data we need for that item //create the row item and set the height to 80 pixels //set parameters for the row so we can get the youtube data out later //create a label for displaying the title and add it to the row //create a label for the summary and add it to the row //create an image from the thumbnail, and add it to the row //add the row to the data array } //if tableview has been created, reset the data on the table //if table has not been created, build it up with the data array //add the table to the current window for display //add a ‘click’ listener so that when someone taps on a row } } //hide the spinning ‘loading’ widget |
Okay, so that was a lot I know, but go back through it a few times, and you will see it is not so hard. First, we get XML back from YouTube. Then, we turn that XML into an array of items. Them we loop through those items and build up an array of rows. Then, we set the table with that array, and display the table. Finally, we handle the ‘click’ or touch events on the row, and display the YouTube player in the embedded webview. Ta-da! You now have a customizable YouTube search and player app.
Now here are three examples how you might kick off all this activity.
First, in this case, we are doing a search for any video in the ‘NYSenate’ YouTube channel.
doYouTubeSearch(‘NYSenate’,”); |
In this example, we are searching all of YouTube for a “skateboard dog”.
doYouTubeSearch(”,’skateboard dog’); |
Finally, in this example, we are
doYouTubeSearch(‘NYSenate’,’Brooklyn’); |
In review, this lesson has showed you how to display HTML web content, how to create YouTube players embedded in that content, how to make HTTP requests to web services and APIs, how to parse the XML returned from those services, and how to display data in a Table format.
This example was built upon code that comes from the open-source project located here: http://github.com/nysenatecio/NYSenateMobileApp so go grab the code there and use it as a basis of your own app!
I owe you a beer, saved me a ton of R&D – thanks! great work.
Glad to be of assistance!
Hi: Thanks for the post. How long did it take to develop the NYSenate app in Titanium?
About four weeks off and on, or 80 hours, including iPhone and Android debugging.
Thanks for the post Nathan. Discovered your site recently. Trying to adapt your code to display just the favorites from my SFFMedia Youtube Channel using the gdata feed below.
However, the videos have been added as favourites, rather than uploaded by the channel user, so they won't appear with a standard channel search.
I feel like it should be easy, but have tried over the last week and can't work it out.
Here's my feed:
http://gdata.youtube.com/feeds…
If you have a time to take a look 🙂 Either way, thanks for the code. Great work. Cheers John.
Worked it out finally! Cheers. John
God amongst men!
Thanks for the post. And you are doing good work so keep up with this type of work. How did develop this application?
Hi,
Firstly, thanks for posting such an awesome tutorial!
I've tried the code but when I click on the thumbnail, on the iPhone, it doesn't load.
I've tried in on the Android and it loads perfectly.
Do you know why this might be happening?
Hai thanks for the post. but the link you provided to github is not valid link. can you provide the link to source code