How I almost had my IM account compromised by a “Man in the Middle” attack, before being saved by ChatSecure…
Category: General
Searching and Playing YouTube Videos using Appcelerator Titanium
- 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’m on a Panel… October 6: the “(NY)TimesOpen 2.0: Open Government Event”
Personal note: It has been a little while since I’ve updated this blog, mostly because I seem to spend my blogging energy updating my beautiful 4-month old daughter’s blog (yay!). Now back to business…
I am excited to be a participating in this series of “Times Open” events hosted by the New York Times. I was invited to join by Derek Willis, The Times’s government API guru, who I met through my work as part of the New York Senate’s CIO Team and our Open Senate effort. Derek is doing brilliant work there, turning the venerable news organization into a true data platform, and helping them redefine what it means to “cover a story”.
Next up in our TimesOpen 2.0 series is an evening about Open Government. Open Government allows for great governmental efficiency, transparency and citizen participation.
We’ve pulled together a lineup that will showcase government data from multiple angles — from the people who are opening up the data, to the developers who are putting the data to use, to how the data is being used in the Times newsroom.
TO2.0: Open Gov will be held Wednesday, October 6 from6:30–10 p.m. at The New York Times.Registration is now open.
Read the full post here: http://open.blogs.nytimes.com/2010/09/24/timesopen-2-0-open-government-event/?emc=eta1