Leverage the AVFoundation framework via UIViewRepresentable
As of the time of writing there isn’t a straightforward way of incorporating a video background or a video player in SwiftUI. Fortunately, there is a way where with a little bit of hassle we can still make it work with help of the AVKit and AVFoundation that Apple provides.
We will achieve the following result after completing this article:
Now let’s dive into the tutorial!
First up open your current project or create a new one. Give your project a nice name and make sure to have SwiftUI selected as an interface. Also, specify an organization identifier this can be anything you want as long as it starts with com.<herecomesyourtext>.
Then either create a new or open an existing Swift file. In our case, we will be using the already setup ContentView.swift file which looks like this:
First, we need to import both AVKit and AVFoundation because that’s what we will be using to be able to set up and play our video. Import these directly under the standard import SwiftUI.
When we have this setup. Let’s create our PlayerView which will be of the type UIViewRepresentable:
Copy and paste this code above your ContentView struct.
Now that we have configured our PlayerView we want to be able to ‘fill’ this view with our video, play, and loop it!
Right under our PlayerView struct create the class LoopingPlayerUIView of the type UIView. The full class is available below:
Before we find and add our video and type of video, let’s add the PlayerViewto our ContentView first!
Remove the Text(“Hello World”) from your ContentView and add the following code:
We added a GeometryReader because we want to be device responsive and be able to fill the whole screen. We have also added an overlay and blur to the video so that the user can distinguish the video from our foreground content.
As you can see the modifier .edgesIgnoreSafeArea(.all) is used here. If we do not use this there will be a safe area around all the edges of our video. This might be an effect you want to use but for this tutorial we want our video to cover the whole screen. But feel free to play around with the PlayerView() modifiers as you wish.
Now we just have to find a video that will be our background. For now, I will use Pexels and filter videos that are filmed in portrait. I found a red wine glass video that looked intriguing — so let’s use it for our app!
Download the video and drag and drop it into your project. Make sure to add the video to the target:
Note the video name and type:
Head back to our class and find the fileUrl. Change the forResource to your video name and the withExtension to your video extension. In our case it will be like this:
let fileUrl = Bundle.main.url(forResource: "demoVideo", withExtension: "mp4")!
Now we can preview our content and it will play our video as intended and loop it automatically!
If you do not fill the fileUrl correctly the preview may crash. If this happens just check whether your video name and extension have been filled correctly. Also, check whether the extension is supported by Apple.
That’s it! We did it! For a final touch, we can add the player in a ZStack and be able to have content in front of the player as well like this:
Result:
Congratulations! Now go and create some awesome stuff with your newfound knowledge!