YouTube APIs + iPhone = Cool mobile apps
Posted by Kuan Yong, YouTube APIs and Tools Team
The YouTube APIs Terms of Service permits commercial use of the APIs under certain conditions, and in most cases, as long as you play fair, you are free (and highly encouraged) to develop great iPhone apps using the YouTube APIs and sell them in the iTunes App Store.
An iPhone app that uses the YouTube APIs typically needs to do two things:
- Call the YouTube API Data API to search videos, get video metadata, etc. You should use our Objective C client library instead of trying to construct the HTTP request or parse the response by hand.
- Invoke the native YouTube player on the iPhone to play videos.
Method 1: Open the YouTube play page URL (Easier)
1. Grab the video url from the
http://www.youtube.com/v/
If you don't see the c and d parameters in the URL, it's because you are not passing in your developer key and client ID in the request. While they are not mandatory for read requests, we highly recommend that you provide them in every API request.
2. Open the URL in your app by calling the openURL method on your UIApplication instance:
[[UIApplication sharedApplication] openURL:[NSURL URLWithString:@"http://www.
When your app calls openURL, it will quit and launch the full native YouTube app on the phone. After the video stops playing, the user remains in the YouTube app. The user has no easy way of getting back to your app.
Method 2: Embed the YouTube player in a UIWebView
No, the iPhone still doesn't do Flash, but if you haven't already noticed, the Safari browser on the iPhone is clever enough to turn any YouTube embed into a clickable thumbnail that launches the native YouTube player app on the phone. You can take advantage of this feature in your app by using a UIWebView. Here's how:
1. Set up a UIWebView in your app. You can make it part of a xib or create it programmatically. Size the UIWebView according to how large you want the clickable thumbnail to be.
2. Grab the video url using the same method as the one described above.
3. Call the loadHTMLString:baseURL: method on the UIWebView instance with some carefully constructed HTML that contains the YouTube embedded player code snippet and some supporting HTML to make sure that the video thumbnail appears correctly. Set the base URL to the URL of your website (it doesn't do anything here -- ordinarily UIWebView uses it to handle relative URL links correctly).
The best way to illustrate this is with a code snippet. Note the use of the viewport HTML meta parameter and the consistent use of width and height parameters throughout.
// webView is a UIWebView, either initialized programmatically or loaded as part of a xib.
NSString *htmlString = @"<html><head>
<meta name = \"viewport\" content = \"initial-scale = 1.0, user-scalable = no, width = 212\"/></head>
<body style=\"background:#F00;margin-top:0px;margin-left:0px\">
<div><object width=\"212\" height=\"172\">
<param name=\"movie\" value=\"http://www.youtube.com/v/oHg5SJYRHA0&f=gdata_videos&c=ytapi-my-clientID&d=nGF83uyVrg8eD4rfEkk22mDOl3qUImVMV6ramM\"></param>
<param name=\"wmode\" value=\"transparent\"></param>
<embed src=\"http://www.youtube.com/v/oHg5SJYRHA0&f=gdata_videos&c=ytapi-my-clientID&d=nGF83uyVrg8eD4rfEkk22mDOl3qUImVMV6ramM\"
type=\"application/x-shockwave-flash\" wmode=\"transparent\" width=\"212\" height=\"172\"></embed>
</object></div></body></html>";
[webView loadHTMLString:htmlString baseURL:[NSURL URLWithString:@"http://www.your-url.com"]];
One of the biggest benefits of this approach is that your app does not have to quit in order for the video to start playing. In fact, the iPhone will keep your app running in the background while it fires up the YouTube player to play the video. After the video finishes playing (or when the user hits "Done"), the user is automatically taken back to your app. This experience is very similar to watching embedded YouTube videos in the iPhone Safari browser and is just as seamless.
Have fun writing the next killer iPhone app, and don't forget to list your app in the YouTube Project Gallery once it goes live in the App Store!
Coming up: Adding YouTube content to Android apps
41 comments:
a few things for those who can't make it work (method 2):
1) if you have stuff in your UIWebViewDelegate methods (like NSLog(@"something") it will crash so remove it.
2) do not expect this to work in the simulator.
my 5 cents, took me 2 hours to figure out.
-t
I had no idea you can launch the YouTube app without leaving your app. I'm going to add this to Anthem Music Videos now. Thanks for the tip!
don't forget the iPhone web apps too :).. I've integrated the Youtube Search API into both of my iphone apps:
http://imusicmash.com and
http://imoviemash.com
thanks youtube!
A
Anthem Music Videos now uses this technique: http://bit.ly/FsggN.
Anthem is like Pandora, but for music videos. Choose an artist, and it retrieves videos from that artist and similar artists. Enjoy! It's free for a limited time.
So, what if I have an RSS feed displaying a certain user's vids and want each vid's thumbnail to display alongside the vid title? How might I do that with the API?
This works great! Thanks!
One thing I'm still trying to figure out:
I'm including one of these youtube UIWebViews in each cell in a table, and a tap on the UIWebView successfully plays the video. But I also want a tap in the rest of the UITableViewCell to play the video, but I haven't found a way to programatically start the video playing.
Is there some javascript I could use to start playing the video? Or is a real user tap the only way to play the video?
Thanks!
Hello, i have one problem, i tried with the next code, but the simulator didn't show me the video:
The comment don't allow html code, for this i hide this part.
--------------------------
NSString* htmlString =
@"HTML CODE";
[self.window addSubview:webView];
[webView loadHTMLString:htmlString baseURL:[NSURL URLWithString:@"http://www.google.com"]];
------------------------
SECOND TRY
--------------------------
NSString *htmlString = [NSString stringWithFormat:
@ "HTML CODE"];
[webView loadHTMLString:htmlString baseURL:[NSURL URLWithString:@"http://www.google.com"]];
---------------------------
Thanks!!
PD: The goal for my, is to play only youtube videos in my app and return to my app to rate the video or see more,...
If u have one mail of contact, i can send u the html code too.
OK, so I copied the first method verbatim and I get "Youtube not available" when running on a 2.2 iPhone. What gives?
Does this still work in the OS3 beta? I just get a grey rectangle with a cross over the play button in the middle and the YouTube icon in the bottom right.
whoever sees this I just want to put it out there that youtube isint always fair. My friend is an amazing singer, better than anyone ive ever heard, she will kick any other singer off the stage. she would win americna idol in a heratbeat, and im not just saying that. But, no one can hear her becasue no one can find her videos unles she gives us the link. If someone sees this can they wirte back and tell me what i should help her do.
sorry, i know this isint a blog for this type of stuff. i just need help from my previous comment becasue i dont know where else to say this stuff or who to tell this too
Hi,
Well mostly people inspire from the condition of cell phone and functions which are in cell phone.
Method 2 will cause a crash if the user taps on the gray "play" button before the thumbnail image is fetched from the server. The backtrace looks like this:
#0 0x3147876c in spin_lock ()
#1 0x3026d4d6 in CFRunLoopSourceSignal ()
#2 0x344cce00 in -[YTImageLoader(Internal) _loadImageURL:videoID:] ()
#3 0x344cc6ec in -[YTImageLoader imageForURL:videoID:loadIfAbsent:] ()
#4 0x344d32a0 in -[YTVideo thumbnailLoadIfAbsent:] ()
#5 0x006dd664 in dyld_stub_time ()
#6 0x344d0594 in -[YTSearchRequest didProcessDocument] ()
#7 0x344d0594 in -[YTSearchRequest didProcessDocument] ()
#8 0x344ca724 in -[XMLHTTPRequest connectionDidFinishLoading:] ()
#9 0x306a6366 in -[NSURLConnection(NSURLConnectionReallyInternal) sendDidFinishLoading] ()
#10 0x306a62e4 in _NSURLConnectionDidFinishLoading ()
Any ideas for a fix/workaround?
Im having same issue as Manu Iyengar.
Sometimes my app crashes when the user tries to see the first video.
I've noticed that in the console you can always read this:
warning: Unable to read symbols for "/Developer/Platforms/iPhoneOS.platform/DeviceSupport/2.2/Symbols/System/Library/Internet Plug-Ins/YouTubePlugIn.webplugin/YouTubePlugIn" (file not found).
Is there a way to remove this warning (and hopefully avoid the crash)?
Is there a way to at least wrap it around a try catch and avoid the app crash?
Thanks in advance.
Gonso
hi guys,
What mechanism are you using to dismiss the webview that shows the play button ?
I have a UI view which has a button, on clicking the button the webview is shown but after the view is shown how can I dismiss it.
Thanks
We are using a YouTube AS3 API that is from march of last year.
The API works for making calls to YouTube without having to login or
anything. Unfortunately, the login piece of the API has since been
changed by YouTube.
Do you have a YouTube AS3 API that is using the latest YouTube protocol? If so, we would be willing to pay you just For the code. Otherwise we need someone to write this piece of the API!
The scope of our request would be to login, upload, and search YouTube user videos and metadata. And to that we would only need the functions or protocols. We would be doing the GUI interface most likely unless you can do that too.
Please let us know if you are available to do this immediately.
respond to my craigslist post at:
http://chicago.craigslist.org/chc/cpg/1212718866.html
so has anyone figured this out?
It would be awesome if at least someone could figure out how to make this embedded object useable. No one has succeeded in this yet?
Is anyone else running into an issue where the thumbnail does not display? Sometimes it works correctly. Other times it just shows the play button with YouTube logo, even though I have network access. Can't find any rhyme or reason.
I am running into the thumbnail issue as well. Sometimes it displays, sometimes it doesn't. Even with network access. Any tips on how to address this would be greatly appreciated.
Hi Guys,
Does anyone one know is there any call back function so that we can know when the current you tube video ends?
Hi in my iPhone App i have to get videos from youtube,i am uploading videos as private.is it possible to get those private get those private videos from my youtube account.
I get it to work fine with the supplied HTML, but can someone direct me to info on how to convert a straight YouTube URL into the fancy one they use?
The post says to "use the API."
hi all, am new to this...
actually i need to display a youtube video. i chose the 2nd method..
i jus did wats has given here... am using xcode 3.1.2, if i run it shows me a red color screen with a missing image icon("?" icon) at the top and i got this error message
2010-01-29 17:34:55.906 Utube[1485:20b] Error loading /Developer/Platforms/iPhoneSimulator.platform/Developer/SDKs/iPhoneSimulator3.1.2.sdk/System/Library/Internet Plug-Ins/YouTubePlugIn.webplugin/YouTubePlugIn: dlopen(/Developer/Platforms/iPhoneSimulator.platform/Developer/SDKs/iPhoneSimulator3.1.2.sdk/System/Library/Internet Plug-Ins/YouTubePlugIn.webplugin/YouTubePlugIn, 265): Library not loaded: /System/Library/PrivateFrameworks/YouTube.framework/YouTube
Referenced from: /Developer/Platforms/iPhoneSimulator.platform/Developer/SDKs/iPhoneSimulator3.1.2.sdk/System/Library/Internet Plug-Ins/YouTubePlugIn.webplugin/YouTubePlugIn
Reason: image not found
i didnt include any frame work or api's.... pls let me know how to do tat
Can someone tell me what code to put on my website to allow YouTube video to switch to the YouTube app on and iPhone. All I have now are the Not available icon or whatever its called.
Peter
Hi, this technique works and I'm able to open a youtube video without exiting the iphone app.
How can I use this technique with a custom button? (and not the one with a video frame and the play button from youtube)?
Please enlight.
Thanks,
Tee
All was working OK until I uploaded my own youtube video. Now the youtube embedded player icon stays gray and is crossed.
Any idea why?
On a PC web browser, everything works fine, on the iPhone Youtube player everything is fine, but the problem arises in the webview.
The video is: http://www.youtube.com/v/JVqyk0Pcg0c
Try the new MOBILE phone APPLICATION for FREE on www.bump.ac !BackUp your information now!
I m also facing same problem as of brother. any body has any idea??
Yes, it may take up to 24 hours in some cases before the video is available from an iPhone mobile app (via the webview). What you usually see is that the video can be accessed via your PC and via the bative iPhone YouTube client BUT NOT via the webview. Give it some time.
I have read that using your user name as a key to index in the video metadata (terms) can help... Not convinced but did it just in case
Kan, I'm having problems with this method and I hope you can help me out here:
- I'm using the YouTube API to pull videos that are embeddable in 3rd party sites (format=5).
- When I create the HTML to embed some of these videos, I get a the play icon with a line over it and no thumbnail. These videos always fail to play.
- Some videos work fine and show the thumbnail.
What am I doing wrong?
Thanks,
You can Watch your youtube videos on your Blackberry.
Blackberry Pearl 9100 Code Generator
I haven't actually seen any great apps with YouTube. Looks like a lot of hot air
My name is Patricia Chappell I was browsing internet and found your blog. The author did a great job. I will subscribe to your RSS feeds. Thank you for your contribution. I am a web designer myself. And here some examples of the websites that I designed for cash advance payday loans in canada company.
I am using method 2. I would like to know if there is a way to know if the user actually played/watched the video (by touching the play in the webview). I want to add it to a list of watched videos in my app.
From the Apple documentation, it looks like subclassing UIWebView may be off-limits.
thank you very much for this article.
....................
Dissertation Service
Hi, may I have a feature request. It would be useful it was possible to tell the iPhone's YouTube player to display custom overlay controls, to not display the original playback controls and to customize the background. The iPhone's Quicktime player allows for customisations like that. Thanks.
If the youtube ID has an underscore in it, it won't work. Anybody have a clue why?
Is Method 2 still valid with the recent YouTube html5 updates? My app no longer works and the Apple iPhone app is also broken. Is this temporary or is this permanent?
There are many videos in Youtube that does not provide us application/x-shockwave-flash type URL.
How do we playback such videos?
Post a Comment