YOU NEED A DEVICE TO RUN THIS CODE, IT DOES NOT WORK IN SIMULATOR!
THIS CODE HAS BEEN TESTED ON iOS 4.2 AND WORKS PERFECTLY.
Well I've seen a few people ask about embedding youtube videos on this forum and the links people have provided have either led to out of date code or tutorials on using locally stored videos.
This brief tutorial will provide you with the code to embed YouTube videos on multiple pages using the Tab Bar controller and show you how to modify the background image beyond the default white/transparent one that comes with the UIWebView.
Ultimately it will look something like this:
First thing you need to do is start a new project and pick window based application (although it won't really matter as we'll be building new classes from scratch). Name it whatever you want.
Keep the two appdelegate classes and delete the two view controllers.
Ensure that the UIToolkit is in frameworks, if not right click and choose 'add existing frameworks' and add it to the project.
Ok, click on your appdelegate.h and erase everything in it and replace it with:
Code:
#import <UIKit/UIKit.h>
@interface YourProjectAppDelegate : NSObject <UIApplicationDelegate> {
UIWindow *window;
UITabBarController *rootController;
}
@property (nonatomic, retain) IBOutlet UIWindow *window;
@property (nonatomic, retain) IBOutlet UITabBarController *rootController;
@end
Make sure you change YourProjectAppDelegate to match whatever yours is called.
Next open appdelegate.m and delete everything, replace with the following:
Code:
#import "YourProjectAppDelegate.h"
@implementation YourProjectAppDelegate
@synthesize window;
@synthesize rootController;
- (void)applicationDidFinishLaunching:(UIApplication *)application {
// Override point for customization after application launch
[window addSubview:rootController.view];
[window makeKeyAndVisible];
}
- (void)dealloc {
[rootController release];
[window release];
[super dealloc];
}
@end
These two bits of code set up a tab bar controller as your root view controller. Simple stuff, they're provided in as a template but I prefer to do them from scratch just to be sure.
Now that's done. In the side view, find MainWindow.xib and double click it (you can delete the other .xib) close the iPhone window that appears and open the library. In objects select Tab Bar Controller and drag it to the MainWindow.xib box along with all of the other icons.
An iPhone window with tabs will appear. If you click the menu bar of the window the connections inspector will show you the list of pages (there are two by default) you can click the + and - to add or remove pages, just stick with two for now for simplicity.
EDIT: In order to change the background of your UIWebView, in the Media library drag a view into the window (not an image view - which will break the code) you can then add labels and texts to this view and change the background color to suit.
Ok back in xcode create two new classes. Rename them to PlayYouTubeInWebViewController.m PlayYouTubeInWebViewController.h and
PlayYoutTubeInWebViewController2.m PlayYouTubeInWebViewController2.h respectively.
In the two .h files delete all of the code and replace with this:
Code:
#import <UIKit/UIKit.h>
@interface PlayYouTubeInWebViewController : UIViewController {
}
@end
Remembering to add a '2' to PlayYouTubeInWebViewController when adding this code to the second .h file.
Then in the .m files replace all of the code with this:
Code:
#import "PlayYouTubeInWebViewController.h"
@interface PlayYouTubeInWebViewController (Private)
- (void)embedYouTube:(NSString *)urlString frame:(CGRect)frame;
@end
@implementation PlayYouTubeInWebViewController
- (void)viewDidLoad {
[super viewDidLoad];
[self embedYouTube:@"http://www.youtube.com/watch?feature=player_detailpage&v=7GoTB9MnFh8" frame:CGRectMake(20, 20, 70, 70)];
[self embedYouTube:@"http://www.youtube.com/watch?v=nTasT5h0LEg&feature=player_detailpage" frame:CGRectMake(20, 120, 70, 70)];
}
- (void)embedYouTube:(NSString *)urlString frame:(CGRect)frame {
NSString *embedHTML = @"\
<html><head>\
<style type=\"text/css\">\
body {\
background-color: transparent;\
color: transparent;\
}\
</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, urlString, frame.size.width, frame.size.height];
UIWebView *videoView = [[UIWebView alloc] initWithFrame:frame];
[videoView loadHTMLString:html baseURL:nil];
[self.view addSubview:videoView];
[videoView release];
}
- (void)didReceiveMemoryWarning {
// Releases the view if it doesn't have a superview.
[super didReceiveMemoryWarning];
// Release any cached data, images, etc that aren't in use.
}
- (void)viewDidUnload {
// Release any retained subviews of the main view.
// e.g. self.myOutlet = nil;
}
- (void)dealloc {
[super dealloc];
}
@end
Again remembering to add a '2' to all instances of PlayYouTubeInWebViewController in the second .m file.
Okay lets take a look at this code. You can clearly see where the youtube links are placed. You can replace these with whatever youtube page you like. The CGRect co-ordinates determine the position of the youtube thumbnail and the location on the page. When we're finished you can play with these as much as you want and you will see what happens.
The CSS information in red simply deals with the style and appearance of the WebView and the controller for loading the video window. The default will load the video in fullscreen and when the video is finished or closed the window will release and the user will find themselves back on the thumbnail page...pretty neat huh?
If you want to add more videos simply repeat the line:
Code:
[self embedYouTube:@"http://www.youtube.com/watch?feature=player_detailpage&v=7GoTB9MnFh8" frame:CGRectMake(20, 20, 70, 70)];
Just replace the URL and adjust the co-ordinates or it will overlap a thumbnail in the existing position.
Ok, now to get the app working.
Open up MainWindow.xib to get back into the interface builder. Your Tab view should load by default. Select the first tab (again making sure the button is completely highlighted and not just the text) and open the inspector. Select the last tab in the inspector. There's a box which let's you choose a class from the drop down box. Select PlayYouTubeInWebViewController then highlight the second tab in the iPhone window and select PlayYouTubeInWebViewController2 in the same place in the inspector.
This will tell the app to load the WebView with the thumbnails when the tab button is pressed if you look in the CSS code for the YouTube code you will see the color and background color is set to transparent which allows the background imageview you made earlier to still be seen when the thumbnails load. I recommended a weird color just so you can be 100% sure you're seeing the imageview in the background and not a default color defined by the WebView class.
You might wonder why you can't change the transparent to another color and thus alter the background...well I'm not 100% sure why but it doesn't work like that. It took me a bit of time to realise I could just use a view as a background.
Now all you need to do is compile and run this on your device.
Hope this all makes sense. Have fun.
[Tutorial] Embedding YouTube vids
Linear Mode
