How to use AVPlayerViewController in SwiftUI

AVPlayerViewController is a view controller that displays content from a player and presents a native user interface to control playback.

In addition, An AVPlayer is a controller object used to manage the playback and timing of a media asset? You can use an AVPlayer to play local and remote file-based media, such as QuickTime movies and MP3 audio files, as well as audiovisual media served using HTTP Live Streaming.

Moreover, another reason we have to use AVPlayerViewController in SwiftUI is that we can’t hide the player controller in the native SwiftUI component called VideoPlayer, but we can hide the player controller in AVPlayerViewController in only one line code.

Both AVPlayerViewController and AVPlayer are UIKit components. Next, let’s make them work perfectly in SwiftUI step by step.

1. Custom AVPlayerViewController in SwiftUI

In order to use the AVPlayerViewController from SwiftUI, we create the UIViewControllerRepresentable implementation:

struct AVPlayerView: UIViewControllerRepresentable {

    @Binding var videoURL: URL

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

    func updateUIViewController(_ playerController: AVPlayerViewController, context: Context) {
        playerController.player = player
        playerController.player?.play()
    }

    func makeUIViewController(context: Context) -> AVPlayerViewController {
        return AVPlayerViewController()
    }
}

Use a UIViewControllerRepresentable instance to create and manage a UIViewController object in your SwiftUI interface. Adopt this protocol in one of your app’s custom instances, and use its methods to create, update, and tear down your view controller. The creation and update processes parallel the behavior of SwiftUI views, and you use them to configure your view controller with your app’s current state information. Use the teardown process to remove your view controller cleanly from your SwiftUI. For example, you might use the teardown process to notify other objects that the view controller is disappearing.

2. Use AVPlayerView in SwiftUI

Next, we use the custom AVPlayerView in our SwiftUI user interface as the code below.

import SwiftUI
import UIKit
import AVKit

struct ContentView: View {
    @State private var vURL = URL(string: "https://www.radiantmediaplayer.com/media/bbb-360p.mp4")!
    var body: some View {
        AVPlayerView(videoURL: self.$vURL)
            .transition(.move(edge: .bottom))
            .edgesIgnoringSafeArea(.all)
    }
}

In this case, we load a remote video by an existing URL. The AVPlayer could download and play the live stream video without any other code.

3. Add Custom Buttons over the AVPlayerView

Further, you can create another custom view as an overlay for the AVPlayerView to add more custom features. For example, you can add a speed control or a capture button on the top of the AVPlayerView.

AVPlayerView(videoURL: $vURL)
    .transition(.move(edge: .bottom))
    .edgesIgnoringSafeArea(.all)
    .overlay(HStack {
        Button("Speed") {
            // Your code ...
        }
        Button("Capture") {
            // Your code ...
        }
    }.accentColor(.white), alignment: .top)

Conclusion

In summary, to add your view controller into your SwiftUI interface, create your UIViewControllerRepresentable instance and add it to your SwiftUI interface. The system calls the methods of your custom instance at appropriate times.

The system doesn’t automatically communicate changes occurring within your view controller to other parts of your SwiftUI interface. When you want your view controller to coordinate with other SwiftUI views, you must provide a Coordinator instance to facilitate those interactions. For example, you use a coordinator to forward target-action and delegate messages from your view controller to any SwiftUI views.

Leave a Reply

Your email address will not be published. Required fields are marked *