Make Better Things



I like to make better things.

Play Video on iPhone and iPad

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

Adding a video to resource folder

Adding a video to resource 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

Adding MediaPlayer framework to project

Adding MediaPlayer framework to project

Put below code in PlayVideoViewController.m:


#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, we are using the MPMoviePlayerController class to control the playback of a video:

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

We 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, we 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];
}

Now we can test our app by command + return.

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

Playing the movie in portrait mode in iPhone

Playing the movie in portrait mode in iPhone

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.

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];

Now when you run the app in simulator it will look like this.

Playing embeded video on iPad

Playing embeded video on iPad

Note that setOrientation method of the MPMoviePlayerController class is not supported on the iPad.

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. However, when the movie is done, a black screen appears and there is no way to get back to the View window.

You can play the video full screen by tapping on the two-arrow icon

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];
}

Run the app to see the results.

Playing the movie full screen using the MPMoviePlayerViewController class

Playing the movie full screen using the MPMoviePlayerViewController class

Category: iPhone

Tagged:

10 Responses

  1. ghiboz says:

    Hi!! thanks for your sample!!
    I have a question… I try to play a video in a layer using cocos2d… but the video doesn’t appear… can you help me about this??

    regards!

    ghiboz

  2. L says:

    i have an application with 2 view tab bar bottom IPhone sdk 4

    the first view there is a button that press play the video.

    but when press button video start not landscape !

    i hope you can help me

    • Saurabh says:

      Try this –

      [player setOrientation:UIDeviceOrientationLandscape animated:NO];

      You can force the player to be protrait or landscape using setOrientation method.

      Hope this helps.

  3. Darrin says:

    Hi Saurabh,
    Thanks for the great post. I only have one problem. I cannot find the setOrientation method anywhere. Can you please advise? Thanks.

  4. Bocephus says:

    I am a newbie and I was hoping you would post the .h & .m file for us newbies, PLEASE

  5. JoeyD says:

    For the iPad and fullscreen. All works fine with the exception of tapping the Fullscreen/Embed button the the controller (the icon with the diagonal arrow pointing to each other). It seems when you tap this, the app crashes. Any thoughts on how to fix this? It would be great to eliminate this button altogether as the video is to be played fullscreen only. I have been up and down the SDK docs and nothing seems to allow this.

  6. Bram says:

    Hee thansk for you post it really helped me out!

    But i have the same problem as: L

    When my video plays, It is in Portrait mode. i used the cod you said to do it in Landscape:

    [moviePlayerController setOrientation:UIDeviceOrientationPortrait animated:NO];

    I used moviePlayer… because thats my pointer.

    But i get this warning:

    ‘MPMoviePlayerController’ may not respond to ‘-setOrientation:animated:’

    Whats that? what can i do to fix this warning?

    Thanks!

  7. magiclin99 says:

    Hi Saurabh,

    do you know that can MPMoviePlayerViewController play music?
    and what format can it support?

    i try to use AVAudioREcorder to record voice and play by MPMoviePlayerViewController, but always fail and got a blank screen when i present modal view.
    i am sure there is no problem with my audio file because i can play it by “AVAudioPlayer”
    ( media type of file is “apple lossless” )

  8. inal says:

    How can i play a video withot using MPMoviePlayerViewController i.e. in default movie player of ipad

Leave a Reply