Integrating Video Playback In iOS Apps Using SwiftUI

Integrating Video Playback In iOS Apps Using SwiftUI

Last updated on October 1st, 2022

⏱ Reading Time: 4 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 single-line task using the brand new VideoPlayer view. But what if older iOS versions should be supported as well? How can we playback video files there, and what are the additional required actions that 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 has been a new addition to the AVKit framework, which was available since iOS 8, and 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 playback videos in older system versions too.

The first step towards integrating video playback capabilities to an app is to import the AVKit framework in the SwiftUI view that will contain the VideoPlayer:

The VideoPlayer view must be provided with an instance of another class, the AVPlayer, which manages in turn 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 won’t do anything special with it here, so we’ll stick to the basics. When initializing such an object, it’s necessary to provide the URL of the video file that we want 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 computed property shown below forms and returns that URL:

Note that the above might return a nil value instead of an actual 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 view with an informative message as shown above.

In the if body now, we will initialize an AVPlayer object using the videoURL; then we’ll pass it as argument to the initializer 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 as expected!

Next, let’s see how we can manage the same in older system versions.

The AVPlayerViewController

In order to make it possible to playback videos in iOS versions prior to 14, or even to resort to a non-default solution, it’s necessary to use the AVPlayerViewController class; a UIKit view controller that displays a video player.

Since mixing UIKit and SwiftUI is unavoidable in this case, we have to create a new struct that conforms to UIViewControllerRepresentable protocol. This is the means to contain a view controller in SwiftUI, and an instance of that struct, which we’ll name VideoPlayerController, 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:

Any UIViewControllerRepresentable type is required to be implementing two methods mandatorily:

  1. A method to initialize, configure and return the AVPlayerViewController instance.
  2. A method to update the view controller from SwiftUI. Here we won’t need this particular one, yet 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 need the video URL in advance. For that reason, we will define the following property whose value will be given as argument at the initialization time of a VideoPlayerController instance:

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 we will assign the AVPlayer instance to that propertyy. Eventually we’ll return the view controller from the method:

These few bits of code is all we need in order to present the 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. We will just create a VideoPlayerController instance in it, passing the video URL as an argument:

We can now playback videos on older system versions too!

Conclusion

Admittedly, integrating video playback features in iOS apps is an easy task, even if we need to support older system versions or we just want to use the UIKit view controller. What I demonstrated in this post covers the basics which is enough in most cases. However, the official documentation from Apple is always there to find out how to do further customization and explore various available options.

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.

Stay Up To Date

Subscribe to my newsletter and get notifiied instantly when I post something new on SerialCoder.dev.

    We respect your privacy. Unsubscribe at any time.

    New Video on YouTube

    Dear reader,

    check out my new video and learn how to add video playback capabilities to SwiftUI based apps in seconds!