Pages

Wednesday, 15 February 2012

Embed Youtube Native 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.


Happy coding and don't forget to list your app in the YouTube Project Gallery once it goes live in the App Store!

Note: Above method work only on an actual device, not in the iPhone simulator, since it does not have a YouTube player.
Courtesy : Youtube API Blog

4 comments:

youtube html5 player said...

Thanks for sharing your info. I really appreciate your efforts and I will be waiting for your further write ups thanks once again.
html5 converter

swf to html5 converter said...

I agree that HTML5 is too far than flash and also flash is very powerful than HTML5. Below are the few points which I have noticed
1) Video compatibility (youtube html5 player need different format of video for different browsers, which directly impact on storage and bandwidth)
2) Styling (need separate CSS for different browsers)
3) Multiple audio support at one time and simulations
4) Code is not secure
And many more…
But as per my analysis and Adobe Flash acceptance for HTML 5. Seems that after few years HTML 5 will be closer competitor.

prasanna venkatesh said...

Thanks for your comments on pointing me above points, actually i was not aware of impacts on youtube embedding, just i unearth possibilities of doing something with webview. Please share your views too.

swf to html5 converter said...

Thank you for the thoughtful review. The main advantage of html5 music playerseems to be for embedding rich media such as audio and video in modern browsers. Although, the structure elements seem to be useful. CSS3 seems to be headed in the right direction, leaving many possibilities for implementation and creativity,

Post a Comment

Feel Free to Share your Views