Friday, December 21, 2012

Presenting AdMob Interstitials Before Videos on iOS

There are a number of ways interstitials can be incorporated into applications that play video. One common integration we’ve seen is displaying the interstitial right before a video is played. This blog post will show you how to do this on iOS.


Set Up Your Video Player

For this specific example, we’re going to use MPMoviePlayerController. This class makes it easy to integrate video playback into your iOS application. However, make sure not to use MPMoviePlayerViewController as we want to have control over our own view controller.

- (void)viewDidLoad {
  [super viewDidLoad];
  NSURL *bundleURL = [[NSBundle mainBundle] bundleURL];
  NSURL *movieURL = [bundleURL URLByAppendingPathComponent:@"Video_Name_Here.mp4"];
  player_ = [[MPMoviePlayerController alloc] initWithContentURL: movieURL];
  //  Don’t add the player_ into the view hierarchy yet
  [player_.view setFrame:self.view.bounds];  // player's frame must match parent's
  player_.controlStyle = MPMovieControlStyleFullscreen;
  [[NSNotificationCenter defaultCenter]
    addObserver:self
    selector:@selector(moviePlayerPlaybackDidFinish:)
    name:MPMoviePlayerPlaybackDidFinishNotification
    object:player_];
}

We add an observer at this point to tell us when the movie is done playing. This is typically when our view controller will transition away from the MPMoviePlayerController’s view.


Set Up Your Interstitial

Set up a GADInterstitial object as you normally would and and call loadRequest: at an appropriate time in your application flow. Present the interstitial once it comes back.

- (IBAction)showMovieInterstitial:(id)sender {
  self.interstitial = [[[GADInterstitial alloc] init] autorelease];
  self.interstitial.delegate = self;
  self.interstitial.adUnitID = @”YOUR_IDENTIFIER_HERE”;
  [self.interstitial loadRequest: [GADRequest request]];
}

- (void)interstitialDidReceiveAd:(GADInterstitial *)interstitial {
  [interstitial presentFromRootViewController:self];
}

The trick here is that after you receive and present your interstitial, you’re going to have to add your MPMoviePlayerController’s view into your view hierarchy. You want to make this look seamless so that as the interstitial is dismissed, the movie player looks as though it is in the background. This means making the view hierarchy change in interstitialWillDismissScreen: (called before the interstitial is dismissed).

- (void)interstitialWillDismissScreen:(GADInterstitial *)interstitial {
  [self.view addSubview:player_.view];
}

If you’re auto-playing the video, you don’t want to start playing in interstitialWillDismissScreen: as the user will miss a part of the video when the dismissal transition happens. Instead, you can play the movie in interstitialDidDismissScreen:. 

- (void)interstitialDidDismissScreen:(GADInterstitial *)interstitial {
    [player_ play];
}

Remember that you have to unregister for notifications when you are cleaning up your MPMoviePlayerController as well. 

- (void)dealloc {
  if (player_) {
   [[NSNotificationCenter defaultCenter]
     removeObserver:self
     name:MPMoviePlayerPlaybackDidFinishNotification
     object:player_];
    [player_.view removeFromSuperview];
    [player_ release];
    player_ = nil;
  }
  interstitial_.delegate = nil;
  [interstitial_ release];
  [super dealloc];
}

Let us know on the forum if you have any questions about interstitials specifically or the Google AdMob SDK in general. You can also follow us on our plus page for AdMob-related updates.



 - , AdMob Team