Happy Square Root Day!
Playing a video (of a supported file format) on the iPhone is very easy using the MPMoviePlayerController class. You just create an instance of the class and initialize it with the URL of the video. The controller plays the video in full screen mode and returns back to your application when it’s done.
However, if the URL of the video is recognized by the iPhone as a YouTube URL then the Apple URL Scheme mechanism kicks in and launches the YouTube app. In this scenario control will not return to your app after the video has played. (The behavior is equivalent of calling [UIApplication openURL:] with the video URL.)
One workaround is to use a UIWebView and load it with the video URL. The drawback with this approach is that the user will see the rather ugly YouTube mobile web site and has to find and tap on the link of the video to play it.
Another, visually more appealing, option is to create a small UIWebView on your screen and load it with the YouTube embed code. The result is a small button like image that shows the YouTube play button above a screen image from the video. When the user taps the image, the iPhone video player opens in full screen mode as usual, and when the video is done control is returned back to this screen.
Here’s the code:
- (void)embedYouTube:(NSString*)url frame:(CGRect)frame {
NSString* embedHTML = @"\
<html><head>\
<style type=\"text/css\">\
body {\
background-color: transparent;\
color: white;\
}\
</style>\
</head><body style=\"margin:0\">\
<embed id=\"yt\" src=\"%@\" type=\"application/x-shockwave-flash\" \
width=\"%0.0f\" height=\"%0.0f\"></embed>\
</body></html>";
NSString* html = [NSString stringWithFormat:embedHTML, url, frame.size.width, frame.size.height];
if(videoView == nil) {
videoView = [[UIWebView alloc] initWithFrame:frame];
[self.view addSubview:videoView];
}
[videoView loadHTMLString:html baseURL:nil];
}
Tip of the hat to joehewitt.
Update: A complete working Xcode project has been posted here.
January 20th, 2010 at 00:09
@Nick: Thanks a lot for your advice. We want to sell our app in the iTS. Youtube’s terms of usage prohibit any commercial use of the youtube-channel. I am not sure, whether linking to a youtube video is commercial usage of youtubes contents.
January 20th, 2010 at 00:19
btw: Nice app WDYK!
February 17th, 2010 at 09:37
So this is excellent…however i am a noob, would someone be able to copy the code again in a comment and put in brackets where certain info goes.
I am trying to work on an iphone app and website but i’m extremely noob, and i dont know where i need to change information. Maybe even some one could make a really quick working example, so i can see where i can change things…
Sorry for the noobery 🙂
February 17th, 2010 at 12:27
@Curious: You can download complete working code from this post.
February 17th, 2010 at 09:42
if that wasn’t clear in the example of C#
Console.WriteLine(“[Put text hear for output]”);
I have trouble looking at that since i am noob and distinguishing reserved words from places i’m supposed to supply info (such as height, width, actual url)..
Thanks guys!
February 18th, 2010 at 16:19
Hi all, Thanks for the great info above.
Regarding a video end event: I’ve been successful using the UIWindowDidBecomeVisibleNotification notification to signal when the video has finished playing or when the user has indicated that they are done.
February 18th, 2010 at 23:31
Thank you very much!
I can’t thank you enough. I could play video without modification!!!!!!!
Norio
February 19th, 2010 at 08:50
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
March 17th, 2010 at 02:49
As for starting play automatically –
http://blog.lemonadestand.com.au/post/auto-playing-a-youtube-video-inside-webuiview-iphone-objective-c-sdk/23
March 18th, 2010 at 19:34
@Alexander: This is the same solution (and blog post) as pointed to in comment #61. While it may work for now, I still have the same reservations as earlier.
March 18th, 2010 at 06:09
You may also find issues with playing youtube videos on Vodafone Iphones.
You can find the fix here :
http://www.fir3net.com/iPhone/iPhone/vodafone-iphone-youtubeerror-cannot-play-back-not-supported.html
Great site by the way …. :o)
March 20th, 2010 at 19:34
hi i am not able to play youtube videos on my iphone. whenever i launch the youtube application it says it cannot connect to server. moreover i am not able to play even using safari. can anybody help me please 🙂
April 5th, 2010 at 06:51
Hi,
I am trying to play youtube vedio in iphone with out using the webview. But it is not playing. It is giving a warning in the console like
” Warning: MPMoviePlayerController may not support file of type ”
Please help me to avoid this problem.
April 5th, 2010 at 11:06
@Satya: The iPhone is very finicky about the video file formats it will play. If the file you want to play is not supported then, short of writing your own video player, there is not much you can do in code to change that. Try to find a video file that will play in Safari, then use that with your code to make sure your code is working. When you know your code is fine, and a particular video file still refuses to play, then you’ll have to re-enecode that video file to a format the iPhone does play.
April 12th, 2010 at 22:37
Hi, the above code works fine in the iPhone/iPod but when I use this code in iPad the video starts playing in the webview itself showing an option to maximize the screen. Now my question is, Can I start the playback in full screen from the beginning like it does for the iPhone and stop playback in the webview itself ?
April 25th, 2010 at 21:33
my problem is still not resolve.I am just asking how to play YouTube video in I phone
June 18th, 2010 at 02:46
Video appears but not playing try this:
htmlvideo is the uiwebview…
[htmlVideo setUserInteractionEnabled:YES];
July 14th, 2011 at 00:42
its not working in my project
August 8th, 2011 at 01:21
Hey Nick,
I did this, and the video does not seem to run. I got a blank view on iphone simulator.
August 12th, 2011 at 07:56
@VanDat: Videos do not play in the simulator. You have to test this on a device.
September 2nd, 2011 at 01:26
Hi. This code is great and it works for all of my YouTube videos apart from one. The link is good if I open in safari but in the app the play button is crossed out. There is no error. Any ideas?
Thanks
October 17th, 2011 at 11:25
I think the way Youtube embed video has changed and they are using iframe instead of embed tag. So, embedHTML string will be more like this.
NSString* embedHTML = @”\
\
\
body {\
background-color: transparent;\
color: white;\
}\
\
\
\
“;
Great post anyways. Helped me a lot!
October 17th, 2011 at 11:27
It looks my code snippet got corrupted when posting. I will repost…
NSString * embedHTML = @”body {background-color:blue;color:white;}”;
October 17th, 2011 at 11:30
One last try…
NSString * embedHTML = @”<html><head><style type=’text/css’>body {background-color:blue;color:white;}</style></head><body style=’margin:0′><iframe width=’%f’ height=’%f’ src=’%@’ frameborder=’0′ allowfullscreen></iframe></body></html>”
October 17th, 2011 at 18:58
Anyone had any luck getting the “Next” button to work for a playlist link using this technique? Works in Safari on my mac or on the YouTube app, but not in UIWebView as far as I’ve been able to determine. Plays the first video in the playlist only
November 17th, 2011 at 08:39
Does anybody know how to make the function similar to iPhone Youtube App?
For example, the youtube video will play automatically after clicking the navigation cell and click the “Done” button or the video finishes the playing and will go back to navigation cell
December 17th, 2011 at 20:35
I got this working, which is great. but here is what I was looking for. When the user clicks on the play video, then I dont want it to go full screen, how can i get that going.
July 12th, 2013 at 15:51
My thumbnail button was showing a good size bar at the top. the src url needs this change.
src="http://www.youtube.com/embed/%@?controls=0&showinfo=0"
February 25th, 2014 at 13:00
HI!
What is this data? videoView?
I put the code in my project and when I tried to run, Xcode tell me that “Use undeclared of identifier ‘videoView’ “