In my previous post, we have embedded movie player in our application which played the movie in fullscreen mode. However, the great part about the MPMoviePlayerController enhancements in iOS 4 is that you can now specify a custom display size for playback within your own view controllers. To take advantage of this, modify the playMovie: method as follows:
[moviePlayerController.view setFrame:CGRectMake(30, 100, 250, 170)];
[self.view addSubview:moviePlayerController.view];
//moviePlayerController.fullscreen = YES;
[moviePlayerController play];
On first line we create a custom frame size for the movie playback with the CGRectMake function. The values I have entered were taken from Interface Builder and match the origin, height, and width of the custom UIButton we use to play the movie. Note that I also commented out the fullscreen command.
If you build and go with your project code now, you should see that clicking the button will now play the video within our custom view controller, right on top of the UIButton. This works well enough, but what if you want to move the button around a bit to find the right look? It’s a bit cumbersome to constantly copy the literal CGRect values all the time. Update the playMovie method to do this dynamically:
-(IBAction)playMovie:(id)sender
{
UIButton *playButton = (UIButton *) sender;
NSString *filepath = [[NSBundle mainBundle] pathForResource:@"sample-movie-clip" ofType:@"m4v"];
NSURL *fileURL = [NSURL fileURLWithPath:filepath];
MPMoviePlayerController *moviePlayerController = [[MPMoviePlayerController alloc] initWithContentURL:fileURL];
[[NSNotificationCenter defaultCenter] addObserver:self
selector:@selector(moviePlaybackComplete:)
name:MPMoviePlayerPlaybackDidFinishNotification
object:moviePlayerController];
[moviePlayerController.view setFrame:CGRectMake(playButton.frame.origin.x,
playButton.frame.origin.y,
playButton.frame.size.width,
playButton.frame.size.height)];
[self.view addSubview:moviePlayerController.view];
//moviePlayerController.fullscreen = YES;
[moviePlayerController play];
}
On third line, we typecast the “sender” parameter to a UIButton object as we know that is the kind of object that will be sending this message to our view controller. We then access this object directly to get the X and Y origin of the button as well as the button width and height. With the code above implemented, we are free to move the UIButton anywhere on the canvas and not have to worry about constantly updating our CGRectMake function call.
Rotating our Video
Our video player should support both landscape as well as portrait orientation. For this purpose just add this code in the controller:
// Override to allow orientations other than the default portrait orientation.
- (BOOL)shouldAutorotateToInterfaceOrientation:(UIInterfaceOrientation)interfaceOrientation {
// Return YES for supported orientations
return YES;
}
A word on Scaling Mode
When displaying video in a custom rectangle, you will sometimes need to modify the scalingMode property of the MPMoviePlayerController object. Setting this property will determine how the movie image adapts to fill the playback size you have defined. The available scaling mode settings are as follows:
* MPMovieScalingModeNone
* MPMovieScalingModeAspectFit
* MPMovieScalingModeAspectFill
* MPMovieScalingModeFill
Each of the above options functions as you might expect, with MPMovieScalingModeAspectFill and MPMovieScalingModeFill likely being the two most commonly used modifications. The default scaling mode is MPMovieScalingModeAspectFit.
To experiment with this property in our code, insert the following line just before the [moviePlayerController play] statement:
moviePlayerController.scalingMode = MPMovieScalingModeFill;
You will see that our video now fills all available space in the playback rectangle.
This provides you a fundamental ntroduction to using the MPMoviePlayerController class with the MediaPlayer framework. The MPMoviePlayerController class has additional options that we haven’t covered here, but I’ll leave the exploration of those as an exercise for the reader. With the foundation from this tutorial in place, you should be able to begin experimenting on your own!
Happy Coding!
