For both posts, in order to create a working example that one could download and run as is, the code examples referenced a movie that I included in the application bundle. Although handy, this prompted a number of questions about how to play a movie from a remote resource.

I’ve updated the original examples for both posts, with an option to play movies from the application bundle or from a remote server.

Play Movie from Server

The first change I made was in CustomMoviePlayerViewController.m, where I added a method to initialize the movie player with a NSURL object:

- (id)initWithURL:(NSURL *)URL
{
  if (self = [super init])
  {
    movieURL = URL;
    [movieURL retain];
 
  }
  return self;
}
 
- (id)initWithPath:(NSString *)moviePath
{
  if (self = [super init])
  {
    movieURL = [NSURL fileURLWithPath:moviePath];    
    [movieURL retain];
  }
  return self;
}

For both methods, the end result is an initialized NSURL object.

The other code change is in TestViewController.m where I updated the loadMoviePlayer method to support calling either of the above methods:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

- (void)loadMoviePlayer
{  
/*
  // Play movie from app bundle
  NSString *path = [[NSBundle mainBundle] pathForResource:@"Movie-1" ofType:@"mp4" inDirectory:nil];
  moviePlayer = [[[CustomMoviePlayerViewController alloc] initWithPath:path] autorelease];
*/
 
  // Play movie from URL
  NSURL *movieURL = [NSURL URLWithString:@"http://someurlsomewhere.com/movie.mp4"];
  moviePlayer = [[[CustomMoviePlayerViewController alloc] initWithURL:movieURL] autorelease];
 
  // Show the movie player as modal
  [self presentModalViewController:moviePlayer animated:YES];
 
  // Prep and play the movie
  [moviePlayer readyPlayer];    
}

Comment in/out the relevant code in lines 4 – 11 to swap between playing from a file in the bundle and a movie accessible on a remote server.

Download Movie Player Source Code

MoviePlayer in Landscape Mode

MoviePlayer in Portrait Mode (requires 3.2 OS and greater)

In this post I want to show you a few minor changes you can make to the previous app to display a movie in portrait mode, something that was not possible in earlier (pre 3.2) OS versions. With that said, back in January of 2010 I did cover a means to create the illusion that a movie was in portrait mode, if this piques your interest, have a look here: Play iPhone Movies in Portrait Mode with MPMoviePlayerController using Public API’s

The figure below shows the same movie as played back in landscape and portrait:

Play Movies in Portrait Mode

The code below is from the previous post and shows how to configure the movie player view to display in landscape:

MPMoviePlayerController *mp =  [[MPMoviePlayerController alloc]
     initWithContentURL:movieURL];
 
...
 
- (void) moviePlayerLoadStateChanged:(NSNotification*)notification 
{
  ...
  // Rotate the view for landscape playback
  [[self view] setBounds:CGRectMake(0, 0, 480, 320)];
  [[self view] setCenter:CGPointMake(160, 240)];
  [[self view] setTransform:CGAffineTransformMakeRotation(M_PI / 2)]; 
 
  // Set frame of movieplayer
  [[mp view] setFrame:CGRectMake(0, 0, 480, 320)];
 
  ...
}

To playback a movie in portrait mode is as easy as removing the code for the rotation and changing the frame of the movieplayer. I’ve also added a call to scale the movie so it fills the screen, this will maintain the aspect ratio.

- (void) moviePlayerLoadStateChanged:(NSNotification*)notification 
{
  ...
  // Rotate the view for landscape playback
  //	  [[self view] setBounds:CGRectMake(0, 0, 480, 320)];
  //		[[self view] setCenter:CGPointMake(160, 240)];
  //		[[self view] setTransform:CGAffineTransformMakeRotation(M_PI / 2)]; 
 
  // Set frame of movieplayer
  // [[mp view] setFrame:CGRectMake(0, 0, 480, 320)];
  [[mp view] setFrame:CGRectMake(0, 160, 320, 160)];
 
  // Scale uniformly, maintaining aspect ratio
  [mp setScalingMode:MPMovieScalingModeAspectFill];
 
  ...
}

This approach works on 3.2 (iPad) as well as 4.0 and greater. Needless to say, given the large display on the iPad this is a nice alternative as the user can watch videos without rotating the device.

Source Code

Download the source code to build an iPhone app that displays movies in portrait mode.

In the next post, Display iPhone Movies in Portrait Mode, I’ll show how to create a movie player that runs in a view that is not fullscreen as well as how to show a few lines of code to display a movie in portrait mode – the one caveat here is that both of the tips in the second post will apply only to OS versions 3.2 and up.

What’s Changed with MPMoviePlayerController in 3.2 and 4.0?

There are any number of changes in the MPMoviePlayerController, however, a few standout as potential roadblocks to getting a movie to display:

- In 3.1 and earlier versions, MPMoviePlayerController was full-screen only. Playing a movie was straight-forward, create a player, initialize with a file (path or URL) and call a method to start playback – the rest was taken care of for you.

- With 3.2 and later, movies can playback in fullscreen or a custom view, as well as portrait or landscape.

- The notification MPMoviePlayerContentPreloadDidFinishNotification has been deprecated. This notification was used in earlier versions to notify observers that a movie was loaded and ready to play.

The Movie Application

The application in this post is quite simple, it consists of a view controller with nothing more than a button to start playback and a second view controller to manage a MPMoviePlayerController and the NSURL of the movie. The two views are shown in the figures below:

Primary View Controller

The interface definition for the primary view is shown below:

#import <UIKit/UIKit.h>
 
@class CustomMoviePlayerViewController;
 
@interface TestViewController : UIViewController
{
  CustomMoviePlayerViewController  *moviePlayer;
  UIButton  *playButton;
}
 
@end

CustomMoviePlayerViewController is the controller for managing the movie, we’ll look at that code in a moment.

In the code below we create the view, add a play button, create a method for processing a button press event and within loadMoviePlayer, we get a reference to the movie file and create an instance of the CustomMoviePlayerViewController, which will load and play the movie.

- (void)loadView
{
  // Setup the view
  [self setView:[[[UIView alloc] initWithFrame:[[UIScreen mainScreen] applicationFrame]] autorelease]];
  [[self view] setBackgroundColor:[UIColor grayColor]];
  [[self view] setUserInteractionEnabled:YES];
 
  // Add play button 
  playButton = [[UIButton alloc] initWithFrame:CGRectMake(53, 212, 214, 36)];    
  [playButton setBackgroundImage:[UIImage imageNamed:@"playButton.png"] forState:UIControlStateNormal];
  [playButton addTarget:self action:@selector(buttonPressed:) forControlEvents: UIControlEventTouchUpInside];    
  [[self view] addSubview:playButton];  
}
 
- (void)buttonPressed:(UIButton *)button
{
  // If pressed, play movie
  if (button == playButton)
    [self loadMoviePlayer];	
}
 
- (void)loadMoviePlayer
{  
  // Play movie from the bundle
  NSString *path = [[NSBundle mainBundle] pathForResource:@"Movie-1" ofType:@"mp4" inDirectory:nil];
 
  // Create custom movie player   
  moviePlayer = [[[CustomMoviePlayerViewController alloc] initWithPath:path] autorelease];
 
  // Show the movie player as modal
  [self presentModalViewController:moviePlayer animated:YES];
 
  // Prep and play the movie
  [moviePlayer readyPlayer];    
}

Notice that the movie for this example is loaded from the application bundle. Also, once the custom movie player is created, the view is shown as a modal view.

Custom Movie Player View Controller

The interface definition for the movie view controller is below:

@interface CustomMoviePlayerViewController : UIViewController 
{
  MPMoviePlayerController *mp;
  NSURL  *movieURL;
}
 
- (id)initWithPath:(NSString *)moviePath;
- (void)readyPlayer;
 
@end

The initialization code is where the movie player and associated URL are created. The primary goal of the initialization is to create the NSURL needed by the movie player.

- (id)initWithPath:(NSString *)moviePath
{
  // Initialize and create movie URL
  if (self = [super init])
  {
    movieURL = [NSURL fileURLWithPath:moviePath];    
    [movieURL retain];
  }
  return self;
}

The code to create the player and setup the notifications is where we start to deal with the differences in how the movie player works on various OS versions. Notice below the call to respondsToSelector, this is the Apple recommended way to check for feature availability, versus looking for a specific OS version.

For devices running 3.2 and above, the movie player controller has a method named loadstate, if this exists we can access a few additional methods to set the player to fullscreen as well as request the movie to begin preloading.

Equally important is the distinction of which notification to setup – see lines 16 and 24.

You can read more about managing different OS version in this post Developing iPhone Apps with iOS4 SDK, Deploying to 3.x Devices

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35

- (void) readyPlayer
{
   mp =  [[MPMoviePlayerController alloc] initWithContentURL:movieURL];
 
  // For 3.2 devices and above
  if ([mp respondsToSelector:@selector(loadState)]) 
  {
    // Set movie player layout
    [mp setControlStyle:MPMovieControlStyleFullscreen];
    [mp setFullscreen:YES];
 
    // May help to reduce latency
    [mp prepareToPlay];
 
    // Register that the load state changed (movie is ready)
    [[NSNotificationCenter defaultCenter] addObserver:self 
        selector:@selector(moviePlayerLoadStateChanged:) 
        name:MPMoviePlayerLoadStateDidChangeNotification 
        object:nil];
  }  
  else
  {
    // Register to receive a notification when the movie is in memory and ready to play.
    [[NSNotificationCenter defaultCenter] addObserver:self 
        selector:@selector(moviePreloadDidFinish:) 
        name:MPMoviePlayerContentPreloadDidFinishNotification 
        object:nil];
  }
 
  // Register to receive a notification when the movie has finished playing. 
  [[NSNotificationCenter defaultCenter] addObserver:self 
        selector:@selector(moviePlayBackDidFinish:) 
        name:MPMoviePlayerPlaybackDidFinishNotification 
        object:nil];
}

The next two chunks of code are for each of the selectors, one for each notification. The code below is for earlier OS versions – nothing more than removing the notification and asking the movie to play.

/*---------------------------------------------------------------------------
* For 3.1.x devices
* For 3.2 and 4.x see moviePlayerLoadStateChanged: 
*--------------------------------------------------------------------------*/
- (void) moviePreloadDidFinish:(NSNotification*)notification 
{
  // Remove observer
  [[NSNotificationCenter 	defaultCenter] 
    removeObserver:self
    name:MPMoviePlayerContentPreloadDidFinishNotification
    object:nil];
 
  // Play the movie
   [mp play];
}

For the notification generated in 3.2 and above, there are a few more details to tend to:

/*---------------------------------------------------------------------------
* For 3.2 and 4.x devices
* For 3.1.x devices see moviePreloadDidFinish:
*--------------------------------------------------------------------------*/
- (void) moviePlayerLoadStateChanged:(NSNotification*)notification 
{
  // Unless state is unknown, start playback
  if ([mp loadState] != MPMovieLoadStateUnknown)
  {
    // Remove observer
    [[NSNotificationCenter defaultCenter] 
      removeObserver:self
      name:MPMoviePlayerLoadStateDidChangeNotification 
      object:nil];
 
    // When tapping movie, status bar will appear, it shows up
    // in portrait mode by default. Set orientation to landscape
    [[UIApplication sharedApplication] setStatusBarOrientation:UIInterfaceOrientationLandscapeRight animated:NO];
 
    // Rotate the view for landscape playback
    [[self view] setBounds:CGRectMake(0, 0, 480, 320)];
    [[self view] setCenter:CGPointMake(160, 240)];
    [[self view] setTransform:CGAffineTransformMakeRotation(M_PI / 2)]; 
 
    // Set frame of movie player
    [[mp view] setFrame:CGRectMake(0, 0, 480, 320)];
 
    // Add movie player as subview
    [[self view] addSubview:[mp view]];   
 
    // Play the movie
    [mp play];
  }
}

Beyond removing the notification, we also adjust the status bar, rotate the view, set the frame of the movie player, add the movie player as a subview in the view controller and wrap it all up by asking the movie to play.

Note: MPMoviePlayerViewController is also an option over creating your own view controller as I’ve done here.

Source Code

The easiest way to see all this working is to download the source code and step through the code in the debugger.

Launch Native YouTube Application

This approach will exit your application and begin the YouTube player on the iPhone:

[[UIApplication sharedApplication] 
   openURL:[NSURL URLWithString:@"http://www.youtube.com/watch?v=gczw0WRmHQU"]];

Clickable Thumbnail and UIWebview

If you’ve noticed in Safari on the iPhone, when the browser finds a YouTube video reference, a clickable link is created, which will start the movie when tapped without leaving Safari.

We can use the same approach within an iPhone application using a UIWebView, including a clickable link with a poster frame from the movie.

For this example I have created a separate class that subclasses UIWebView:

@interface YouTubeView : UIWebView 
{
}
 
- (YouTubeView *)initWithStringAsURL:(NSString *)urlString frame:(CGRect)frame;
 
@end

Here’s the implementation of the class:

#import "YouTubeView.h"
 
@implementation YouTubeView
 
#pragma mark -
#pragma mark Initialization
 
- (YouTubeView *)initWithStringAsURL:(NSString *)urlString frame:(CGRect)frame;
{
  if (self = [super init]) 
  {
    // Create webview with requested frame size
    self = [[UIWebView alloc] initWithFrame:frame];
 
    // HTML to embed YouTube video
    NSString *youTubeVideoHTML = @"<html><head>\
                          <body style=\"margin:0\">\
                          <embed id=\"yt\" src=\"%@\" type=\"application/x-shockwave-flash\" \
                          width=\"%0.0f\" height=\"%0.0f\"></embed>\
                          </body></html>";
 
    // Populate HTML with the URL and requested frame size
    NSString *html = [NSString stringWithFormat:youTubeVideoHTML, urlString, frame.size.width, frame.size.height];
 
    // Load the html into the webview
    [self loadHTMLString:html baseURL:nil];
  }
  return self;  
}
 
#pragma mark -
#pragma mark Cleanup
 
- (void)dealloc 
{
  [super dealloc];
}
 
@end

The magic here is the HTML for embedding the video content, and notice how the HTML is populated with the video URL and the desired frame size.

We can now insert this view inside a ViewController class as shown here:

 
  // Create view that will act as link to youtube video,
  // centering the view 
  YouTubeView *youTubeView = [[YouTubeView alloc] 
    initWithStringAsURL:@"http://www.youtube.com/watch?v=gczw0WRmHQU" 
    frame:CGRectMake(100, 170, 120, 120)];
 
  [[self view] addSubview:youTubeView];

Here is how the clickable link looks, the image on the left is before the poster frame has downloaded, the right includes the poster frame:

Tapping the link will start the movie in a webview.

Project Source Code

You can download the source code here: Display YouTube Video Inside an iPhone Application.

Note: As Joao mentions in a comment below, this code will not run on the simulator.

Other than the built-in movie player, another option is to use a UIWebview, however, there are a few drawbacks including no support for notifications on when a movie has been preloaded, which is handy for displaying a “please wait” loading message.

This post is introduces another approach to playing a movie in portrait mode without delving into private API’s, and I think you’ll agree, it’s quite clever.

Portrait Video Mode on the iPhone

I spend a fair amount of time working with video related applications and content, so when I saw a portrait video playing seamlessly inside Dog Tricks – Best of 101 Dog Tricks I was very interested to figure out how to do the same.

I wrote Michael Schneider of Hive Brain Software, developer of the above app and asked if he would share his secret. Michael was kind enough to pass along some great notes explaining how we got this to work. This post walks through a complete working example I wrote based on the information Michael shared with me.

The End Result

Let’s start by looking at a short video of the application I’ll build in this post running in the simulator:

Notice how the video is shown within the application with the tabbar controls still visible on the screen.

The 30,000 Foot View

The basic idea to make this work is simple, rotate the orientation of the original video, turn off the movie player controls and fire up the movie player as normal.

What you end up with is the movie player running landscape mode with your video content viewable in portrait mode. The reason for hiding the controls is that they would appear sideways. As an example, notice in the screenshot below that the video is viewable in portrait mode, however, the controls are still oriented for a landscape movie player:

Although a simple trick, it’s the little things that will make this approach appear seamless within your application. As an example of a nice effect, I’ll show how to overlay an image on top of the movieplayer so it appears as though the movie is playing directly inside your app.

There are three steps to make this all work:

- Change the orientation of the movie
- Turn off the movie player controls
- Overlay an image of your application UI on top of the movie player

Let’s see how to pull all the pieces together…

Video Orientation

The first step is to use a capable video editing tool to rotate your video to portait mode. I used Quicktime Pro (on Snow Leopard), the steps that I used follow:

- From the Window menu choose Show Movie Properties
- Click on the row for the video track
- Click the Visual Settings tab
- In the Flip/Rotate section, rotate the video counter-clockwise
(or clockwise depending on the orientation you set for your iPhone app).

Code for App Delegate

The app delegate code for this code example is nothing more than a Window object and a Tabbar controller. The interface and implementation files are below:

#import <UIKit/UIKit.h>
 
@class TabbarController;
 
@interface Test_appAppDelegate : NSObject <UIApplicationDelegate>
{
  UIWindow *window;
  TabbarController *tabbar;
}
 
@property (nonatomic, retain) UIWindow *window;
@property (nonatomic, retain) TabbarController *tabbar;
 
@end

The implementation file:

...
- (void)applicationDidFinishLaunching:(UIApplication *)application 
{   
  // Create and initialize the window
  window = [[UIWindow alloc] initWithFrame:[[UIScreen mainScreen] bounds]];
 
  // Create the tabbar
  tabbar = [[TabbarController alloc] init];
  [window addSubview:tabbar.view]; 
 
  [window makeKeyAndVisible];
 
}
...

Code for Tabbar Controller

The tabbar controller is code is nothing out of the ordinary, the interface file is shown below:

#import <UIKit/UIKit.h>
 
@interface TabbarController : UITabBarController  <UITabBarControllerDelegate>
{
}
 
@end

As you can see in the code below I’ve defined three tabs, each with a unique title:

@implementation TabbarController
 
- (id) init
{
  self = [super init];
  if (self) 
  {
    self.delegate = self;
 
    UIViewController *localViewController;   
 
    // New tabbar controller and array to contain the view controllers
    NSMutableArray *localViewControllersArray = [[NSMutableArray alloc] initWithCapacity:3];
 
    // Tab 1
    localViewController = [[Tabbar1ViewController alloc] initWithTitle:@"Tab 1"];    
    [localViewControllersArray addObject:localViewController];
    [localViewController release];
 
    // Tab 2
    localViewController = [[Tabbar2ViewController alloc] initWithTitle:@"Tab 2"];    
    [localViewControllersArray addObject:localViewController];
    [localViewController release];
 
    // Tab 3
    localViewController = [[Tabbar3ViewController alloc] initWithTitle:@"Tab 3"];    
    [localViewControllersArray addObject:localViewController];
    [localViewController release]; // Retained by above array
 
    self.viewControllers = localViewControllersArray;
    [localViewControllersArray release];
  }
 
  return self;
}
 
@end

Code for Tab 1

The only tabbar that has any working code for this example is the left-most tab, which plays the movie in portrait mode. The interface definition for this tab is shown below:

#import <UIKit/UIKit.h>
#import <MediaPlayer/MediaPlayer.h>
 
@interface Tabbar1ViewController : UIViewController
{
  MPMoviePlayerController  *moviePlayer;
  NSURL  *movieURL;
  MovieOverlayViewController *overlay;
}
 
@end

Inside the implementation file, the first block of relevant code is the initialization, which sets up the view, the background color and the title for the tab:

- (id)initWithTitle:(NSString *)theTitle 
{
  if (self = [super init])
  {
    self.view = [[[UIView alloc] initWithFrame:[[UIScreen mainScreen] applicationFrame]] autorelease];    
    self.view.backgroundColor = [UIColor blackColor];
    self.title = theTitle;
  }  
  return self;  
}

The next section of code to write is when the tab is about to appear, here we create the path to the movie, setup the movie player, register to receive a notification when the movie has finished playing, start the movie, and finally, overlay an image on top of the player (more on that below):

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27

-(void)viewWillAppear:(BOOL)animated
{
  // Path to the movie
  NSString *path = [[NSBundle mainBundle] pathForResource:@"test" ofType:@"mov"];      
  movieURL = [NSURL fileURLWithPath:path];
 
  // Setup the player
  moviePlayer = [[MPMoviePlayerController alloc] initWithContentURL:movieURL];
 
  // Hide the controls
  [moviePlayer setMovieControlMode:MPMovieControlModeHidden];  
 
  // Register to receive a notification when the movie has finished playing
  [[NSNotificationCenter defaultCenter] addObserver:self 
                      selector:@selector(moviePlayBackDidFinish:) 
                      name:MPMoviePlayerPlaybackDidFinishNotification 
                      object:nil];
 
  // Start the movie  
  [moviePlayer play];
 
  // Overlay an image with center that is transparent for movie to show through  
  overlay = [[MovieOverlayViewController alloc] init];
   NSArray *windows = [[UIApplication sharedApplication] windows];
  UIWindow *moviePlayerWindow = [windows objectAtIndex:1];
  [moviePlayerWindow addSubview:overlay.view];  
}

The interesting code starts on line 21, this is where I define a new view controller, MovieOverlayViewController, which will overlay an image on top of the running movie player. This overlay will present the illusion that the movie is running directly inside the app.

Movie Image Overlay

To give the app the appearance of running natively in portrait mode, we’ll overlay an image that shows the tabbars along the bottom and a text banner across the top. I’ll also write code to detect when the user taps on the image and do the necessary checks to see if the user tapped in an area that would translate to one of the tabs, more on that momentarily.

The finished look on the device is below:

Notice in the figure below that actual image we will overlay is nothing more than a transparent image with some text across the top and a series of tabbar images across the bottom.

The movie overlay view controller for this app is quite trivial, it contains nothing more than a UIImageView:

@interface MovieOverlayViewController : UIViewController 
{
  UIImageView *overlay;
}

Inside the implementation file, we begin with the initialization and code for creating the UIImageView that will be overlayed on the movie player:

- (id)init
{
  if (self = [super init])
    self.view = [[[UIView alloc] initWithFrame:[[UIScreen mainScreen] applicationFrame]] autorelease];    
  return self;  
}
 
-(void) viewWillAppear:(BOOL)animated
{
  overlay = [[[UIImageView alloc] initWithImage:[UIImage imageNamed:@"overlay.png"]] autorelease];
  [self.view addSubview:overlay]; 
}

The other relevant code for this view controller is managing touches on the image. To provide the most realistic user experience, once the image is overlayed and the movie is playing, you will need to detect touches on the image where the tabs live. The code below will determine if a touched point is within the rectangle of each of the tabs, printing a message to the console on which tab was touched.

- (void)touchesBegan:(NSSet *)touches withEvent:(UIEvent *)event 
{	  
  // Detect touch anywhere
  UITouch *touch = [touches anyObject];
 
  // Where is the point touched
  CGPoint point = [touch locationInView:self.view]; 
  NSLog(@"pointx: %f pointy:%f", point.x, point.y);
 
  // Was a tab touched, if so, which one...
  if (CGRectContainsPoint(CGRectMake(1, 440, 106, 40), point))
    NSLog(@"tab 1 touched");
  else if (CGRectContainsPoint(CGRectMake(107, 440, 106, 40), point))
    NSLog(@"tab 2 touched");
  else if (CGRectContainsPoint(CGRectMake(214, 440, 106, 40), point))
    NSLog(@"tab 3 touched");
}

You could add code to the above example and when tab 2 or 3 is tapped, stop the movie, remove the overlay and switch to the view controller associated with the appropriate tab.

Xcode Portrait Mode Video Source Code

You can download the entire Xcode project here: Xcode Portrait Video.

Credits

Thanks again to Michael Schneider of Hive Brain Software for sharing his insight on this trick. You can check out more of Michael’s work on a series of self improvement applications at Relaxing Apps.

And Michael would like to pass on many thanks Scott Michaels at Atimi in Vancouver BC for sharing information on this approach at the 360iDev conference in San Jose.