Having a video playing behind the controls of your app’s main menu immediately catches the eye of your users and people around them.
This feature is not difficult to implement; it’s actually very simple. Let me show you how to do it. The video at the bottom of this page shows the result. If you want to download a project that uses this technique, click here.
A canvas to draw on
Objects of type UIView are the visible components in iOS. Every UIView has a layer property of type CALayer. This is where the visual content exists.
CALayers can be used to draw shapes, particles, text, gradients, video, etc. For the specific case of video, a CALayer subclass called AVPlayerLayer simplifies the process of video playback.
To display video on a UIView object, the recipe is as follows:
1-Create an AVPlayerLayer object.
2-Assign a video player object (AVPlayer) to the AVPlayerLayer.player property.
3-Set the frame of your AVPlayerLayer object
4-Add the AVPlayerLayer as a sublayer of your view’s layer property.
5-Start playback by calling play() on the video player object.
This is the code:
A helper class
The example project at the top contains a helper UIView class to make our lives easier when implementing the video feature. It’s called PlayVideoView. In it, an object of type AVPlayerLooper is used to loop the video.
This is how to use the helper class:
1-Add a PlayVideoView object to your view controller’s main view, either programmatically or via Interface Builder.
2- In your view controller’s viewDidLoad method, call the setVideo method of the PlayVideoView object to set the video to play
3-In your view controller’s viewWillAppear method, get the player associated to the PlayVideoView object and call play() on it.
4- In your view controller’s viewWillDisappear method, get the player associated to the PlayVideoView object and call pause() to stop playback.
Here’s how to implement it:
Interruption handling
The above code pauses/resumes playback when the view is shown or hidden.
But what happens when you minimize the app and then open it again (keep in mind viewWillDisappear won’t be called when the app is minimized)?
Well, it depends. In iOS 13, video will resume playing automatically, as expected.
In iOS 12 and less, however, it won’t resume playing automatically. That’s not good.
To fix this glitch, your view controller must respond to the following notifications:
- UIApplication.didBecomeActiveNotification
- UIApplication.willResignActiveNotification
When you receive the didBecomeActiveNotification notification, call play() on the video player. For the willResignActiveNotification notification, call pause().
It doesn’t hurt if you implement these and your app runs in iOS 13; it won’t break anything. The example project implements interruption handling.
The fine print
Video playback is a demanding task, for this reason it’s recommended to use short videos and to limit this feature to the sections where it’s really needed.
Depending on the type of app you’re developing, you might want to play the video silently or with music. A game I worked on some time ago played a video with music in the main menu, which was appropriate for this type of app. Another app I worked, for a very different type of audience, solemnly displayed a silent video in the main menu.