In the world of iOS development, media play an important role to make the app more attractive and interesting.
If you are the user of those popular social media apps like Facebook, Instagram, and Youtube, you could find that there are a huge number of media displayed to you every time you scroll the contents.
In iOS, displaying images and playing audio files are easy thanks to UIImage and AVAudioPlayer.But how about the videos? Have you ever think about playing video in the app with Swift? If yes, you can start with the AVPlayerViewController, which provides some basic controls so that you can work with the player easily and quickly.
Even though integrating the AVPlayerViewController into the project is easy and fast, it is not flexible enough sometimes. there is another option for playing video, which has steeper learning curve than the AVPlayerViewController but is more customizable.
That is AVPlayerLayer.
In this article, you will see how to set up the player with the AVPlayerLayer, and observe the loading status to know if the player is ready.
Let’s get started!
Set Up Container View
Open Xcode and create a new project AVPlayerLayerDemo, then switch into the ViewController.swift file. First, we need a place to put the player that we will build later, so create a variable playerContainerView.
Create a function setUpPlayerContainerView and specify the background color and the constraints for the playerContainerView as the codes below.
Notice that there is a if statement to check the iOS version. If it is iOS 11.0 and after, align the top of playerContainerView to the top of safe area, or to the top of the top layout guide.
Run the project with iPhone simulator. It should look like the figure 2.
Set Up Player View With AVPlayer
Now we have a place for the player. It’s time to create the player! Create a new subclass of UIView and name it PlayerView.
First, import AVFoundation at the top of the file.
Add codes below to change the view’s layer for PlayerView.
Then add properties as below:
Since we have set the AVPlayerLayer as the view’s layer, we can access the player by the player property of AVPlayerLayer. Again, add other properties below. You will see the usage of those two properties later.
Now we have made all the properties ready. It’s time to take a look at the player! The needed steps for setting up a player are summarized as below:
- Initialized an AVAsset with an URL.
- Load AVAsset asynchronously and wait for the loaded status.
- If AVAsset is loaded, initialized an AVPlayerItem with the loaded AVAsset.
- Add observer for the AVPlayerItem. Ask the player to play if getting readyToPlay status.
Add a function setUpAsset as codes below to complete the step 1 and step 2 of the summary.
Then add function setUpPlayerItem as codes below to complete the step 3 and step 4 of the summary.
Notice that we have added a property playerItem before to keep the reference of AVPlayerItem so that we can get its status by the observer. After setting up the AVAsset and AVPlayerItem, we need a function to trigger all the actions.
Add a function play as below.
The function Play will be the entry to make the player start playing with a URL. Remember that the added observer needs to be removed. You can remove the observer like below.
For now, the PlayerView is good to go. Let’s get back to the view controller.
Add Player View
In the ViewController.swift, add two properties.
Then add function setUpPlayerView to add the playerView in the playerContainerView and specify constraints for it.
Add another function playVideo as below.
Finally, we have finished what we need. Call the related functions in the viewDidLoad as below.
Run the project with iPhone simulator. The player will start to play the video like the gif 1.
Congratulation! You have built a player with AVPlayer! It’s really cool!
Conclusion
This article introduces a way to interact with the AVPlayer by the AVPlayerLayer. This is important because all you need is just a view to contain the player instead of the AVPlayerViewController, and you can initialize the player by yourself and observe the loading status.
From now on, the video would be an option for you to make your app more attractive!
