MPMoviePlayerController starting image

Question

In my app the instance of MPMoviePlayerController I created starts out as a black box, looking like this (because the video starts out black and fades in):

However I was envisioning something more user-friendly like this, with a thumbnail image, like the example below:

That's a mockup I created but videos in the cameral roll and videos sent in the Messages app use that play arrow. What class do I need to implement to use the stock iOS play arrow?

Answer 1

This looks like something for the thumbnailImageAtTime:timeOption: method of MPMoviePlayerController, you should pass in the time you want to retrieve a thumbnail for and use that image to display a UIImageView on top of the video.

Once you have your thumbnail you create a UIImageView and set the image to the thumbnail and make sure you set userInteractionsEnabled to YES. Make sure to set the frame of this image view to cover the movie player.

Now you can create a UITapGestureRecognizer on that image view which will trigger a method. This method then invokes the play method of your MPMoviePlayerController object.

-(void)viewDidLoad{
    [...]

    UIImage *thumbnail = [moviePlayer thumbnailImageAtTime:5.0 
                                                timeOption:MPMovieTimeOptionNearestKeyFrame];

    UIImageView *iv = [[UIImageView alloc] initWithImage:thumbnail];
    iv.userInteractionEnabled = YES;
    iv.frame = moviePlayer.frame;
    [self.view addSubview:iv];
    [iv release];

    UITapGestureRecognizer *tap = [[UITapGestureRecognizer alloc] initWithTarget:self action:@selector(handleTap:)];
    tap.numberOfTapsRequired = 1;
    [iv addGestureRecognizer:tap];
    [tap release];

    [...]
}


- (void)handleTap:(UITapGestureRecognizer *)gesture{
    iv.hidden = YES;
    [moviePlayer play];
}

Please note if you want the play button then make a play button in Photoshop, and add this on top of the thumbnail image view, attach the gesture recognizer to that image view and make sure you hide both image views when you start playing your video.

You could use a UIButton otherwise with the image set to the play image, then you wouldn't need a UIGestureRecognizer at all.