Place AVPlayerViewController inside UIView

Question

Currently I am having a dialogue view with four controls at the bottom. Each control is loading a different view inside the dialogue. One of these controls is setting an AVPlayer inside the dialogue view and is playing it. Unfortunately the AVPlayer itself comes without playback controls.

The AVPlayerViewController how ever does have playback controls. Is it possible to place a AVPlayerViewController inside a UIView so that it does not get started as a new screen? I would like to place it inside my UIView so that everything is taking place inside my dialgoue.

score 10 · Accepted Answer · edited May 23 '17 at 11:53

You can initialize the AVPlayerViewController and add it as a child to your ViewController , and insert it as a subview.

[self addChildViewController:yourPlayerViewController];
[self.view addSubview:yourPlayerViewController.view];
[yourPlayerViewController didMoveToParentViewController:self];

And to remove it:

[yourPlayerViewController willMoveToParentViewController:nil];
[yourPlayerViewController.view removeFromSuperview];
[yourPlayerViewController removeFromParentViewController];

EDIT SWIFT METHOD: Check here for Swift

Lance Samaria · Answer 2 · 2018-03-08T14:09:53.197

I'm using Swift 3.2 / Xcode 9.2 / iOS 11

This is how to do it in 9 easy steps. The steps are explained above each line

**Make sure you import AVKit to have access to the AVPlayerViewController or you won't be able to use it

// 1. to have access to the AVPlayerViewController import AVKit
import AVKit

 // 2. create your class properties
var videoUrl: URL?
var player: AVPlayer?
let avPVC = AVPlayerViewController()

override func viewDidLoad() {
        super.viewDidLoad()

        // 3. make sure the url your using isn't nil
        guard let videoUrl = self.videoUrl else { return }

        // 4. init an AVPlayer object with the url then set the class property player with the AVPlayer object
        self.player = AVPlayer(url: videoUrl)

        // 5. set the class property player to the AVPlayerViewController's player
        avPVC.player = self.player

        // 6. set the the parent vc's bounds to the AVPlayerViewController's frame
        avPVC.view.frame = self.view.bounds

        // 7. the parent vc has a method on it: addChildViewController() that takes the child you want to add to it (in this case the AVPlayerViewController) as an argument
        self.addChildViewController(avPVC)

        // 8. add the AVPlayerViewController's view as a subview to the parent vc
        self.view.addSubview(avPVC.view)

        // 9. on AVPlayerViewController call didMove(toParentViewController:) and pass the parent vc as an argument to move it inside parent
        avPVC.didMove(toParentViewController: self)

}

score 1 · Answer 3 · answered Jan 29 '18 at 17:18

SWIFT 4 - Subview Method

The initial method works alright, but I feel like the view controller method seems messy when I really just want a subview. So, most of the time I play the video in a custom view (rather than using the entire AVPlayerViewController).

I use this method to show the video in a subview which completely fills an existing view. In the example below, urlToVideo is the URL to the video that you want to play, and existingView is the view we want to place our new view into (as a subview).

First, create a VideoPlayerView class in a new VideoPlayerView.swift file, with this, which is directly copy/paste from Apple's website, except that I called it VideoPlayerView rather than PlayerView.

import Foundation
import UIKit
import AVFoundation

/// A simple `UIView` subclass that is backed by an `AVPlayerLayer` layer.
class VideoPlayerView: UIView {
    var player: AVPlayer? {
        get {
            return playerLayer.player
        }

        set {
            playerLayer.player = newValue
        }
    }

    var playerLayer: AVPlayerLayer {
        return layer as! AVPlayerLayer
    }

    override class var layerClass: AnyClass {
        return AVPlayerLayer.self
    }
}

Then, when I want to play the video, I create the subview and play it:

let player = AVPlayer(url: urlToVideo)

let playerFrame = CGRect(x: 0, y: 0, width: existingView.frame.width, height: existingView.frame.height)
let videoPlayerView = VideoPlayerView(frame: playerFrame)
videoPlayerView.player = player
existingView.addSubview(videoPlayerView)

player.play()

score 0 · Answer 4 · answered Jan 11 '22 at 14:12

My solution is to have your view like a canvas and basically draw the AVPlayerViewController on top of it:

@IBOutlet weak var layerVideoView: UIImageView!
    guard let url = Bundle.main.path(forResource: "santana", ofType: "mp4") else { return debugPrint("video not found") }
    let path = URL(fileURLWithPath: url)
    
    let player = AVPlayer(url: path)
    let playerController = AVPlayerViewController()
    playerController.player = player
    playerController.view.frame = CGRect(x: layerVideoView.frame.origin.x, y: layerVideoView.frame.origin.y, width: layerVideoView.frame.width, height: layerVideoView.frame.height)
    self.addChild(playerController)
    self.view.addSubview(playerController.view)

LayerVideoView is an image view, but you can use just a UIView if that suits. Its is important to add constraints in the Storyboard to your View because your Video Player will mimic the shape of your View.

Place AVPlayerViewController inside UIView

4 Answers4

Linked