Search code examples
iosswiftautolayoutavplayeravplayerviewcontroller

Embed a ViewController into a AVPlayerController as an Overlay


My Issue: I'm trying to embed a ViewController (with an image and a button) into a an AVPlayerController, similar to the way YouTube is showing ads on their videos (on the bottom of the video, and will stay there).

My Approach: I have the following test code

let AVPC = AVPlayerViewController()
            avpc!.player = self.contentPlayer
            avpc!.view.frame = f
            self.addChild(avpc!)
let adView = UIView()
adView.frame = CGRect(x: ??, y: ??, width: 300, height: 70)
AVPC.contentOverlayView.addSubview(adView)

Result: My view will calculate correctly the size of my AVPlayerController when it's minimized. But, when I go into full screen view it will either get out of bounds or not work at all.

Mock enter image description here


Solution

  • You should look autolayout, and there are some tools for auto layout with less code, like SnapKit

    Here is a sample way to handle it without any library.

    class ViewController: UIViewController {
    
        let adView: UIView = {
            let view = UIView()
            view.backgroundColor = .red
            return view
        }()
    
        func playVideo() {
            let videoURL = URL(string: "http://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4")
            let player = AVPlayer(url: videoURL!)
            let playerViewController = AVPlayerViewController()
            playerViewController.player = player
            playerViewController.contentOverlayView?.addSubview(adView)
    
            adView.translatesAutoresizingMaskIntoConstraints = false
            adView.heightAnchor.constraint(equalToConstant: 100).isActive = true
            adView.bottomAnchor.constraint(equalTo: adView.superview!.bottomAnchor, constant: -20).isActive = true
            adView.leadingAnchor.constraint(equalTo: adView.superview!.leadingAnchor, constant: 40).isActive = true
            adView.trailingAnchor.constraint(equalTo: adView.superview!.trailingAnchor, constant: -40).isActive = true
    
            self.present(playerViewController, animated: true) {
                playerViewController.player!.play()
            }
        }
    }
    

    enter image description here enter image description here