Playing Video on the iPhone and iPad

This article discusses the two classes supported in the iPhone SDK for video playback.

by Wei-Meng Lee

Playing videos is one of the most common tasks on the iPhone. On the iPhone, all videos must be played full-screen. However, on the iPad, this rule has been relaxed -- you can now embed videos within your iPad applications. This makes it possible for you to embed more than one video in any View window. This article discusses the two classes supported in the iPhone SDK for video playback.

Playing Video on the iPhone

Using Xcode, create a new View-based Application (iPhone) project and name it PlayVideo. Drag a sample video into the Resources folder of your Xcode project (see Figure 1). Figure 1. Adding a video to the Resources folder To playback video on your iPhone application, you need to add the MediaPlayer framework to your project. Right-click on Frameworks folder and add the MediaPlayer.framework to your project (see Figure 2). Figure 2. Adding the MediaPlayer framework In the PlayVideoViewController.m file, code the following in bold:

#import "PlayVideoViewController.h"
#import <MediaPlayer/MediaPlayer.h>

@implementation PlayVideoViewController

- (void)viewDidLoad {
    
    NSString *url = [[NSBundle mainBundle] 
        pathForResource:@"Stock_Footage_Demobroadband" 
                 ofType:@"mp4"];

    MPMoviePlayerController *player = 
        [[MPMoviePlayerController alloc] 
            initWithContentURL:[NSURL fileURLWithPath:url]];
    
    [[NSNotificationCenter defaultCenter] 
        addObserver:self
           selector:@selector(movieFinishedCallback:)                                                 
               name:MPMoviePlayerPlaybackDidFinishNotification
             object:player];
    
    //---play movie---
    [player play];    
    [super viewDidLoad];    
}

- (void) movieFinishedCallback:(NSNotification*) aNotification {
    MPMoviePlayerController *player = [aNotification object];
    [[NSNotificationCenter defaultCenter] 
        removeObserver:self
                  name:MPMoviePlayerPlaybackDidFinishNotification
                object:player];    
    [player autorelease];    
}

Basically, you use the MPMoviePlayerController class to control the playback of a video:

MPMoviePlayerController *player = 
        [[MPMoviePlayerController alloc] 
            initWithContentURL:[NSURL fileURLWithPath:url]];

You then use the NSNotificationCenter class to register a notification so that when the movie is done playing (either the movie ends or the user taps on the Done button located on the top left corner of the screen):

 
    [[NSNotificationCenter defaultCenter] 
        addObserver:self
           selector:@selector(movieFinishedCallback:)                                                 
               name:MPMoviePlayerPlaybackDidFinishNotification
             object:player];

When the movie stops playing, you should unregister the notification and then release the player object:

- (void) movieFinishedCallback:(NSNotification*) aNotification {
    MPMoviePlayerController *player = [aNotification object];
    [[NSNotificationCenter defaultCenter] 
        removeObserver:self
                  name:MPMoviePlayerPlaybackDidFinishNotification
                object:player];    
    [player autorelease];    
}

To test the application on the iPhone Simulator, press Command-R. Figure 3 shows the movie playing on the iPhone Simulator in full screen. Figure 3. Playing the movie in landscape mode. In fact, all movies played full-screen on the iPhone. Observe that by default, the movie is always played in landscape mode. To force the movie to be played in portrait mode, you can set the orientation of the player, like this:

[player setOrientation:UIDeviceOrientationPortrait animated:NO]; 

Doing so forces the player to play in portrait mode (see Figure 4). Figure 4. Playing the movie in portrait mode.

Playing Video on the iPad

Playing video on the iPad is similar to that on the iPhone. However, you need to make some modifications to the code, if not the video will not play back correctly. If you now convert the application to run natively on the iPad (see my previous article on how to port your iPhone apps to iPad) and test it on the iPad Simulator, you will realize that the video plays with sound, but nothing shows. To play the movie correctly on the iPad, modify the application as shown below:

- (void)viewDidLoad {    
    NSString *url = [[NSBundle mainBundle] 
        pathForResource:@"Stock_Footage_Demobroadband" 
                 ofType:@"mp4"];
    MPMoviePlayerController *player = 
        [[MPMoviePlayerController alloc] 
            initWithContentURL:[NSURL fileURLWithPath:url]];
    
    [[NSNotificationCenter defaultCenter] 
        addObserver:self
           selector:@selector(movieFinishedCallback:)
               name:MPMoviePlayerPlaybackDidFinishNotification
             object:player];
    
    //---play partial screen---
    player.view.frame = CGRectMake(184, 200, 400, 300);
    [self.view addSubview:player.view];
       
    //---play movie---
    [player play];
    
    [super viewDidLoad];    
}

Essentially, you are now specifying the area to play back the movie. On the iPad, you can now embed the movie by adding the view exposed by the player to your view window:

    player.view.frame = CGRectMake(184, 200, 400, 300);
    [self.view addSubview:player.view]; 

When you now press Command-R to test the application on the iPad Simulator again, you will see the movie displayed within the View window (see Figure 5). Figure 5. Playing the video full screen on the iPad Note that setOrientation method of the MPMoviePlayerController class is not supported on the iPad:

    //---not supported on the iPad---
    //[player setOrientation:UIDeviceOrientationPortrait animated:NO];

You can zoom to play the movie full screen by clicking on the two-arrow icons located at the bottom right corner of the player (see Figure 6). However, when the movie is done, a black screen appears and there is no way to get back to the View window. Figure 6. You can play the video full screen by tapping on the two-arrow icon

Playing Full Screen Movie for iPad

If you want to play a movie full screen on the iPad, you can use the new MPMoviePlayerViewController class. Modify the project as follows:

- (void)viewDidLoad {    
    NSString *url = [[NSBundle mainBundle] 
        pathForResource:@"Stock_Footage_Demobroadband" 
                 ofType:@"mp4"];

    MPMoviePlayerViewController *playerViewController = 
    [[MPMoviePlayerViewController alloc] 
        initWithContentURL:[NSURL fileURLWithPath:url]];
    
    [[NSNotificationCenter defaultCenter] 
        addObserver:self
           selector:@selector(movieFinishedCallback:)
               name:MPMoviePlayerPlaybackDidFinishNotification
             object:[playerViewController moviePlayer]];
    
    [self.view addSubview:playerViewController.view];
    
    //---play movie---
    MPMoviePlayerController *player = [playerViewController moviePlayer];
    [player play];
    
    [super viewDidLoad];    
}

- (void) movieFinishedCallback:(NSNotification*) aNotification {
    MPMoviePlayerController *player = [aNotification object];
    [[NSNotificationCenter defaultCenter] 
        removeObserver:self
                  name:MPMoviePlayerPlaybackDidFinishNotification
                object:player];
    [player stop];
    [self.view removeFromSuperView];
    [player autorelease];    
}

The MPMoviePlayerViewController class is only available on the iPad (SDK 3.2). Like the MPMoviePlayerController class, you register a notification for the player and then add the view exposed by the MPMoviePlayerViewController class to the current View window:

    [self.view addSubview:playerViewController.view];
    
    //---play movie---
    MPMoviePlayerController *player = [playerViewController moviePlayer];
    [player play];

When the movie has finished playing (or the user has tapped on the Done button), the player is stopped and then removed from the view stack:

- (void) movieFinishedCallback:(NSNotification*) aNotification {
    MPMoviePlayerController *player = [aNotification object];
    [[NSNotificationCenter defaultCenter] 
        removeObserver:self
                  name:MPMoviePlayerPlaybackDidFinishNotification
                object:player];
    [player stop];
    [self.view removeFromSuperView];
    [player autorelease];    
}

Press Command-R to test the application. Figure 7 shows the movie playing full screen. Figure 7. Playing the movie full screen using the MPMoviePlayerViewController class

Summary

In this article, you have seen the ways in which you can play video within your iPhone and iPad applications. In particular, you can now embed videos from within your iPad applications!

Wei-Meng Lee is a Microsoft MVP and founder of Developer Learning Solutions, a technology company specializing in hands-on training on the latest Microsoft technologies. He is an established developer and trainer specializing in .NET and wireless technologies. Wei-Meng speaks regularly at international conferences and has authored and coauthored numerous books on .NET, XML, and wireless technologies. He writes extensively on topics ranging from .NET to Mac OS X. He is also the author of the .NET Compact Framework Pocket Guide, ASP.NET 2.0: A Developer's Notebook (both from O'Reilly Media, Inc.), and Programming Sudoku (Apress). Here is Wei-Meng's blog.