Using AVPlayerViewController for iOS8

Dec 13, 2014

The Sun. That fiery ball in the center of our solar system.

    Sun Image


This post demonstrates a new movie playback API included in iOS 8 via an example app that includes a HD video of the Sun Courtesy of NASA/SDO and the AIA, EVE, and HMI science teams.

The example video is a high resolution HD video at 1080 x 1080, this is 1080p resolution except that it is displayed in a square aspect so that the video can be viewed in either portrait or landscape orientation.

The example iOS 8 app shows off how to use AVPlayerViewController (from AVKit) with a complete Xcode project that you should install on your own iPad device. While earlier versions of iOS provide the MPMoviePlayerController API, that API is not so easy to work with. Previous iOS versions do full screen video, but there is quite a bit of boilerplate code just to get an iOS device to play a movie and stop when the Done button is pressed. While Apple has provided a lot of nice APIs in the AVFoundation framework, nothing really brought it all together to provide playback controls and default UI. It is about time Apple included an API to do this sort of thing easily.

Where to download?

The example iOS 8 app is available as an Xcode project via github. Just clone it and install onto your own iPad device to see all the high def Solar action.

Source Code:

Because this new API is so very easy to use, the source code is almost trivial:

- (void)viewDidLoad {
  [super viewDidLoad];
  UIView *view = self.view;
  NSString *resourceName = @"SunSpot_1080p_main.m4v";
  NSString* movieFilePath = [[NSBundle mainBundle]
    pathForResource:resourceName ofType:nil];
  NSAssert(movieFilePath, @"movieFilePath is nil");
  NSURL *fileURL = [NSURL fileURLWithPath:movieFilePath];
  
  AVPlayerViewController *playerViewController =
    [[AVPlayerViewController alloc] init];
  playerViewController.player =
    [AVPlayer playerWithURL:fileURL];
  self.avPlayerViewcontroller = playerViewController;
  [self resizePlayerToViewSize];
  [view addSubview:playerViewController.view];
  view.autoresizesSubviews = TRUE;
}

The player is setup to read from a h264 encoded movie attached to the project as a resource file. When the app starts, the user will be able to play the movie of the Sun. Note that the movie is configured to play at a very slow rate of 2 frames per second.

What is so hard about that?

The real difficulty in creating this example app was on the Desktop. Creating the h264 HD video at 1080 x 1080 pixels required downloading the original 4K video frames from the Solar Dynamics Observatory. These 4K images were processed on a Mac using Blender to import and then resize the 4K video down to 1080p resolution. At that point, specific video frames that were fuzzy and distorted had to be removed by hand. The final render was cropped with a matte that covered up distracting white text inserted over the original video.

The intermediate files generated by Blender were many gigs of data, but after compressing with x264 the final h264 video is only about 70 megs. That is some very impressive compression indeed!

Enjoy the Sun.