iOS Video Backgrounds

Note: MPMoviePlayerController is deprecated in iOS 9. The Swift version of the demo code has been updated to use AVPlayer (thanks to GitHub user Harout360!) and can be found at https://github.com/kschaller/ios-video-background-swift.

I’ve been seeing more and more of these nicely looping video backgrounds show up in big-name apps, especially on their login and onboarding screens. How did they do it?

Spotify’s spiffy new video background.

There are a few different methods out there for achieving this effect, such as using an animated GIF in a UIWebView; initially I was going to write about how to use a GLKView to handle frame-by-frame rendering on the GPU, but it turns out there’s a much easier method that also appears to be fairly efficient in terms of memory and CPU usage.

You can grab both Swift and Objective-C versions of the code below from GitHub.

First things first, import the MediaPlayer framework:

@import MediaPlayer;

Next, we create a new MPMoviePlayerController instance within our viewDidLoad: method.

NSURL *videoURL = [[NSBundle mainBundle]   URLForResource:@"video" withExtension:@"mov"];
    
self.moviePlayer = [[MPMoviePlayerController alloc] initWithContentURL:videoURL];
self.moviePlayer.controlStyle = MPMovieControlStyleNone;
self.moviePlayer.scalingMode = MPMovieScalingModeAspectFill;
self.moviePlayer.view.frame = self.view.frame;[self.view insertSubview:self.moviePlayer.view atIndex:0];
[self.moviePlayer play];

While we’re in viewDidLoad:, let’s go ahead and add a notification handler to help us loop the video.

[[NSNotificationCenter defaultCenter] addObserver:self selector:@selector(loopVideo) name:MPMoviePlayerPlaybackDidFinishNotification object:self.moviePlayer];

Time to set up that loopVideo function we’re calling in the above block.

- (void)loopVideo {
    [self.moviePlayer play];
}

And we’re done! Now all that’s left to do is throw a few UI elements on top. Here’s what it looks like (sans UI) on an iPhone 6 Plus device:

This turned out to be much simpler than I was trying to make it. It’s definitely worth your time to crop the video to dimensions appropriate for the devices and orientations you’re targeting in order to save on file size. Remember: users likely aren’t going to be spending much time on these screens, so there’s no need to include a 50 MB, 2 minute hi-def video in your app bundle — keep it short and interesting and it will be one of those nice little touches that can make your app stand out from the crowd.

For good measure, here are a couple more apps that I found with video backgrounds:

Tumblr uses a city scene with subtle motion.

Vine throws a blurry party for us in the background.