Using Video as Background for iOS App

You should be familiar with many login screen in mobile app, boring username field, then a password field, and some button for log user in, forgot password, etc. You can try add some icons, fancy color or animation to field with validation and social login, but you should admit that it is still boring.

You want another look and feel for your login screen, so, I will tell you, how about this?

Yes, we are going to add a video as background for your login screen.

Start with project from Parallax Posts, we add one more view controller with a storyboard ID:

Prepare Video

Our video should be in .mp4 format (Apple standard video) to be easily read from app, and do not add a video which size more than 10MB, it will blow up your app. The available video should be less than 5MB in size, as it should be a loopable video, which mean when it plays repealy, user can not distinguish between start and end of the video. I will take a my recent video in Instagram as example, it’s about more than 800KB:

You can run project for now. You should see the video is playing fullscreen. We just add some elements:

Repeat

You can notice that our video plays just once. AVPlayer provides a notification which we can use NSNotificationCenter to listen when the player has reached its end. First, we change our declaration to var instead of let:

Parallax

You remember the era when you just upgrade from iOS6 to iOS7, do you? The home screen of your iPhone just moving and shaking with your hand, that was something Apple called parallax or motion. We can add a similar effect to our login view by some lines of code.

You can run project, and notice that the video will move alongside with device. Note that you have to use a REAL device to see this effect, and do not forget turn off General -> Accessibility -> Reduce Motion.

Yeah, that’s all about another way to make your view more awesome, you can find source code for this post at tag video-view in GitHub. Thank you!