Building a Video Player in SwiftUI with AVPlayer

Overview

I’m currently taking Meta’s Intro to iOS Development course which required me to create a video player using AVPlayer. However, the interface used was Storyboard, and I must admit it was quite confusing even though I understood the underlying concept. Here’s what the initial program looked like;

I had to find a way to implement it in SwiftUI as I wasn’t familiar with Storyboard which runs on UIKit. Storyboard is an interface builder used before SwiftUI. It makes use of imperative programming paradigm which you have to write code for how the View should work.

Using SwiftUI, which uses declarative programming, I ended up with a shorter and simpler program. Let’s walk through the process together below;

Features of the video player

• Plays video available locally on the app

• Provides controls that allow users to play/pause

• Allows users to select videos in order to perform an action

Interface used

• SwiftUI

What is AVPlayer?

AVPlayer is a component that allows you play videos in an app built for any Apple product. You can add it to the layer of any activity that requires video playback and it provides an interface for it.

To use AVPlayer functionality, first you have to import AVKit;

Adding your video to the app

Next, you add your video to the project and ensure that it would be exported upon deployment using the following steps;

1. Drag and drop your video file into the navigation area or click on the “+” icon on the bottom of the navigation area to add file.

2. Click on root folder, which is the first folder with your project name.

3. Navigate to “Build Phases” tab and expand the tab named “copy bundle resources”.

Confirm that your video is among the list of assets to be deployed.

Now that we’ve successfully added our video file, let’s go ahead to build the interface for our video player

Creating the player

Here’s a screenshot of the finished code. I’ll explain it step by step below.

1. Inside the body statement of your SwiftUI View, create an if let statement to find the video. The if let statement allows you to provide an alternative View in the absence of the specified video.

2. The video player needs to access the video file; you can use in the built-in Bundle.main.url to locate the file with its name. Assign this to a constant named video and input the name of your video file and its extension type as arguments to forResource: and withExtension: respectively.

3. Create a closure and inside it, Add a VideoPlayer(player: ) View and pass in AVPlayer(url: video) as the argument.

   🟣

   Note: without importing AVKit, you’d be unable to use the VideoPlayer() View

4. Do you notice how in the screenshot above, the video didn’t take up the entire screen? We can fix it by adding a modifier, .edgesIgnoringSafeArea(.all), to the VideoPlayer(player: ) View.

Now, we’re done! You can now play your video, having access to controls like play, pause, rewind and playback speed.