Video On The iPhone Tutorial Part 1

I’m currently working on a project at work that needs to have multiple small videos playing in an iPhone app all at one time. So in this series of tutorials I’m going to go through the process of playing video using the MediaPlayer Framework, starting with the simplest implementation of just pulling a video
In this tutorial I’m going go through the process of playing video on the iPhone, starting with the simplest implementation of streaming a video from a server with the default player, through to a fully modified series of players all playing different sequences of video from a local directory.
At the bottom of each tutorial you’ll find the finished project, feel free to have a look at the code while you’re following along.

Part 1
So we’re going to start off by hooking up a UIButton in Interface Builder that when touched immediately adds the video player and starts streaming the video.
The first thing to do is open Xcode and create a new project, I’ve started with a new “View Based Project” from the default templates and called it “iPhoneVideoTut”.
Make sure you add the MediaPlayer.framework library in the Build Phases of your project, otherwise you’ll get some crazy errors and it won’t build.

First we’ll set up the IBOutlets for the UIButton, so open the iPhoneVideoTutViewController.h file and get it looking something like this.

#import <UIKit/UIKit.h>
#import <MediaPlayer/MediaPlayer.h>

@interface iPhoneVideoTutViewController : UIViewController {
   
    IBOutlet UIButton *playVideoButton;
    MPMoviePlayerController *moviePlayer;
    
}

@property (readwrite, retain) MPMoviePlayerController *moviePlayer;
@property (nonatomic, retain) IBOutlet UIButton *playVideoButton;

-(IBAction)playMovieButtonPressed:(id)sender;

@end
}

You’ll notice in the above code I’ve already added the MPMoviePlayerController and declared the function playMovieButtonPressed. I’ll go over these in more detail in a moment.
In your project you should have two .xib files, one is MainViewController.xib and the other is iPhoneVideoTutViewController.xib
Select iPhoneVideoTutViewController.xib and in Interface Builder drag a UIButton onto the view, double click on it and give it a name, something like “Play Video”.
Command click, or right click on the button and drag a new referencing outlet from the UIButton to the files owner and hook it up to IBOutlet in our code.
Also drag a new outlet from the button’s “touchUpInside” to the file’s owner and connect it to our playMovieButtonPressed method.
That’s all there is to do with the UI side of things.

Now open up the iPhoneVideoTutViewController.m file and getting it looking something like this:

#import "iPhoneVideoTutViewController.h"

@implementation iPhoneVideoTutViewController

@synthesize moviePlayer, playVideoButton;

- (void)dealloc
{
    [playVideoButton release];
    [moviePlayer release];
    [super dealloc];
}

-(IBAction)playMovieButtonPressed:(id)sender{
    
    NSURL *movieURL = [NSURL URLWithString:@"http://www.samkeeneinteractivedesign.com/videos/littleVid3.mp4"];
	// Initialize a movie player object with the specified URL
	self.moviePlayer = [[[MPMoviePlayerController alloc] initWithContentURL:movieURL]autorelease];
    self.moviePlayer.controlStyle = MPMovieControlStyleFullscreen;
    [self.moviePlayer.view setFrame:self.view.bounds];
    [self.view addSubview:self.moviePlayer.view];
    [self.moviePlayer play];
    
}


@end

So first off, the playMovieButtonPressed is called when we select the button we previously created in IB.
This method starts off by declaring an NSURL of the video’s location, currently on my server.
We then instantiate a new instance of the MPMoviePlayerController that we declared in the header file, we pass into this the NSURL we just created.Notice that because we’ve alloc’d the moviePlayer object we need to autorelease it, and because we’ve retained it in the .h file we still need to release in the dealloc method.
We set the controlStyle to full screen, thus allowing a fullscreen button.
We set the size of the moviePlayer to be the size of the screen.
We still need to add the video player to the active view
and then we set it to play.

It’s that simple we don’t need to touch the app delegate at all. This is pretty much the minimum you need to do to get a video playing in iOS. In the next tutorials I’ll show you how we can customise the player to add a spinning loader for when the player is buffering and a replay button when it finishes.

Download the project files here