Implementing a SwiftUI Video

Introduction

Implementing a Video Player in SwiftUI is often a requirement for your application needs. Previously, you would need to implement a Video Player in UIKit, but now we have this built directly inside the SwiftUI framework.

You can, as expected, load a Video from either a video embedded directly inside your app or you could load a video directly from a website. This tutorial will explore both, along with some caveats and missing features.

VideoPlayer in SwiftUI

You can create a new Video Player by using the VideoPlayer View. This View is embedded within the AVKit framework and not directly within SwiftUI. This is a wrapped View versus an actual SwiftUI View.

import AVKit
import SwiftUI

struct ContentView: View {
    var body: some View {
        VideoPlayer(player: AVPlayer(url: Bundle.main.url(forResource: "movie", withExtension: "mp4")!))
    }
}

As you can see, we have created a brand new VideoPlayer and pass in an AVPlayer along with a movie that is embedded directly in the bundle.

import AVKit
import SwiftUI

struct ContentView: View {
    var body: some View {
        VideoPlayer(player: AVPlayer(url: URL(string: "https://swiftlyrush.com/movie/1")!))
    }
}

It’s also possible to pass in a URL from a website, and this will create a VideoPlayer using a video from the website.

Using AVPlayer from UIKit

This is powerful and awesome if you need basic video functionalities; however, if you need to access the full power of AVKit, you’ll find that not all of this functionality is exposed to the VideoPlayer View. For example, if you need to change the playback speed, you’d need to access the AVPlayerViewController or similar.

Also, the VideoPlayer within SwiftUI is missing the full-screen button that will open the video in full-screen mode. These are just a couple of the missing features with VideoPlayer.

If you want to take advantage of these features, you’ll likely need to use the UIKit version wrapped around AVKit and exposed to your SwiftUI app.

Creating a UIViewControllerRepresentable Video Player

We will use the UIViewControllerRepresentable protocol, which allows you to expose a UIKit view to a SwiftUI View.

Create a brand new Swift file called PlayerViewController or similar.

import AVKit
import SwiftUI

struct PlayerViewController: UIViewControllerRepresentable {
    var videoURL: URL?

    private var player: AVPlayer {
        return AVPlayer(url: videoURL!)
    }

    func makeUIViewController(context: Context) -> AVPlayerViewController {
        let controller = AVPlayerViewController()
        controller.modalPresentationStyle = .fullScreen
        controller.player = player
        controller.player?.play()
        
        return controller
    }

    func updateUIViewController(_ playerController: AVPlayerViewController, context: Context) {}
}

You can now use this within your SwiftUI code.

PlayerViewController(videoURL: URL(string: videoURL))

This will use the AVPlayerViewController, which means you can now access all of those features within this new file.

Of course, I hope in the future versions of SwiftUI, all of this will be fixed ;]!