Building a SwiftUI App with AVPlayerController and Picture in Picture in Swift

Photo by Pakata Goh on Unsplash

Multimedia content is a crucial aspect of many modern applications, enhancing user engagement and providing a richer user experience. In this tutorial, we’ll explore how to leverage Swift and SwiftUI to create an app with AVPlayerController for seamless video playback and integrate Picture in Picture (PiP) functionality for added convenience.

Setting Up the Project

To get started, create a new SwiftUI project in Xcode. Ensure you import the necessary frameworks for SwiftUI and AVKit to work with multimedia components seamlessly.

import SwiftUI
import AVKit

Integrating AVPlayer into SwiftUI

Creating a UIViewRepresentable Wrapper

AVPlayer and AVPlayerViewController are fundamental components for handling video playback. In SwiftUI, we can encapsulate these functionalities by creating a UIViewRepresentable wrapper for AVPlayerViewController.

struct VideoPlayerView: UIViewControllerRepresentable {
    var videoURL: URL

    func makeUIViewController(context: Context) -> AVPlayerViewController {
        let player = AVPlayer(url: videoURL)
        let playerViewController = AVPlayerViewController()
        playerViewController.player = player
        return playerViewController
    }

    func updateUIViewController(_ uiViewController: AVPlayerViewController, context: Context) {
        // Update the view controller if needed
    }
}

Loading a Sample Video

Within your SwiftUI view, you can now use VideoPlayerView to load a video from a URL.

struct ContentView: View {
    var body: some View {
        VideoPlayerView(videoURL: URL(string: "https://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4")!)
            .onAppear {
                // Optional: Play the video automatically when the view appears
                AVPlayerViewControllerManager.shared.play()
            }
    }
}

Implementing Picture-in-Picture

Enabling Picture in Picture (PiP) is a user-friendly feature that allows users to watch videos in a resizable and movable window while using other apps. To implement PiP, we’ll create a manager class to handle the player and PiP functionalities.

import Foundation
import AVKit

class AVPlayerViewControllerManager: NSObject, AVPictureInPictureControllerDelegate {
    static let shared = AVPlayerViewControllerManager()

    private var playerViewController: AVPlayerViewController?

    private override init() {
        super.init()
    }

    func play() {
        guard let playerViewController = playerViewController else {
            return
        }
        // Play the video
        playerViewController.player?.play()
    }

    func showPiP() {
        guard let playerViewController = playerViewController,
              let player = playerViewController.player else {
            return
        }

        // Check if Picture in Picture is available
        if AVPictureInPictureController.isPictureInPictureSupported() {
            let pipController = AVPictureInPictureController(playerLayer: playerLayer(player))
            pipController?.delegate = self
            pipController?.startPictureInPicture()
        }
    }

    private func playerLayer(_ player: AVPlayer) -> AVPlayerLayer {
        return AVPlayerLayer(player: player)
    }
    
    // MARK: - AVPictureInPictureControllerDelegate methods
    func pictureInPictureControllerDidStartPictureInPicture(_ pictureInPictureController: AVPictureInPictureController) {
       print("pictureInPictureControllerDidStartPictureInPicture")
    }

    func pictureInPictureControllerDidStopPictureInPicture(_ pictureInPictureController: AVPictureInPictureController) {
       print("pictureInPictureControllerDidStopPictureInPicture")
    }
}

iPad simulator Picture-in-Picture

By following these steps, you can create a SwiftUI app with AVPlayerController and Picture-in-Picture functionality, offering users a seamless and feature-rich multimedia experience. Experiment with additional features, customize the player and enhance the user interface to create an app that stands out in the crowded world of multimedia applications. Happy coding!

Sidenote:

Is Picture in Picture possible on IOS Simulator?

“Currently (Q2 2022) it seems that Picture-in-Picture is omitted from simulated iPhones, even when the model of iPhone in question supports PIP on real hardware.

However, as Robin pointed out, PIP is available on simulated iPads such as the iPad Pro (9.7-inch).”