Integrating Video Playback In iOS Apps Using SwiftUI

Integrating Video Playback In iOS Apps Using SwiftUI
⏱ Reading Time: 5 mins

Playing back videos in iOS apps was never a particularly difficult job. With SwiftUI and the coming of iOS 14, this has become a one line task using the brand new VideoPlayer view. But what if iOS 13 must be supported as well? How can we playback video files in that case, and what are the additional required actions developers should take?

We are going to meet all that in this post, and provide answers and solutions that will let you integrate video playback capabilities in your apps in no time at all!

The VideoPlayer View

Let’s start with the brand new view that SwiftUI supports in iOS 14 and above, called VideoPlayer. This is a new addition to the AVKit framework that was available since iOS 8, with its purpose being to provide a built-in interface for playing videos and audio within apps.

For the purposes of this post, I’ve added a sample video file (.mov file) to a new project in Xcode. Also, I’ve changed the minimum deployment target to iOS 13, so we can talk in a while about how to play videos on that version too.

Let’s get to the juicy stuff now. The first step is to import the AVKit framework in the SwiftUI view that will contain the VideoPlayer:

The VideoPlayer view must be provided with an AVPlayer object, a controller that manages the playback of audio and video files. It’s part of the AVFoundation framework, and it worths reading about it in case you’re interested in learning more. We don’t need to do anything special with it here, so we’ll stick to the basics. Upon initialising such an object, it’s necessary to provide the URL of the video file that we want it to playback.

For the sake of the demonstration, we’ll use the URL to the local sample video file residing in the app bundle. The videoURL stored property shown below gets its value upon the initialization of the view that will contain the video player:

Note that the above might return a nil value instead of a valid URL, so the first thing we should do inside the view’s body is to make sure that we have a URL to use:

If no URL is available, we simply display a text with the message shown above.

In the if body now, we will initialize an AVPlayer object using the videoURL, and we’ll pass it as an argument in the initialization method of the VideoPlayer view:

The highlighted line above is all we need in order to playback videos in iOS 14 and above using SwiftUI!

However, given that the minimum deployment target of the app has been set to iOS 13, that line must be included inside an if #available condition in order to make sure that it’s supported by the system:

Running the app in a device or a Simulator with iOS 14, the video will playback perfectly!

Next, let’s focus on an iOS 13 specific solution.

The AVPlayerViewController

In order to make it possible to playback videos in iOS 13, it’s necessary to use the AVPlayerViewController class; a UIKit view controller that can display a video player.

Since mixing UIKit and SwiftUI is unavoidable, we have to create a new struct that conforms to UIViewControllerRepresentable protocol. This is the means to contain a view controller in SwiftUI, and that struct is what we’ll call from the SwiftUI environment:

Usually, custom types like the VideoPlayerController are implemented in a separate file. In that case, we need to import the following two frameworks:

A UIViewControllerRepresentable type has three requirements:

  1. Specify the view controller type that will be presented.
  2. Implement a method where we’ll initialize, configure and return the AVPlayerViewController object.
  3. Add one more method that can be used to update the view controller from SwiftUI. There is no need to use it here, but it’s mandatory to be defined.

Here are all the above in code:

Similarly to the previous part, we are going to use the AVPlayer here too, so we are going to need the video URL in advance. For that reason, we will define the following property; upon initializing the VideoPlayerController struct, providing the video URL will be mandatory:

In the makeUIViewController(context:) method now we are going to create two objects; an AVPlayer and an AVPlayerViewController instance:

The playerViewController object has a property called player and it consists of the way to assign a player object to the view controller. Simply enough, we’ll assign the player object initialized right above to that property, and eventually we’ll return the view controller object from the method:

These few bits of code is all we need for presenting a video player view controller in the SwiftUI environment.

Back to the SwiftUI implementation now and inside the else case we left empty in the previous part. In it we’ll just create a VideoPlayerController instance passing the video URL as an argument:

Now we can playback videos on iOS 13 too!

Conclusion

Admittedly, integrating video playback features on iOS apps is an easy task, even if we need to support iOS 13. What I demonstrated in this post covers the basics which is enough in most cases; for more customization and further options I encourage you to take a look at the docs. Thank you for reading!

Download the demo project from here.

If you found this post useful then please consider sharing it! Also, subscribe to my newsletter in order to be notified about everything new published here directly in your inbox, and follow me on Twitter, on YouTube, on Medium and other social media.