How to embed AVPlayerViewController in a TableViewCell

Question

I am building an app similar to Vine and Twitter. I want to embed an AVPlayerViewController inside a UITableViewCell for easy video playback.

I used UITableViewCell.CellStyle to add some UI elements to the cell. The same process doesn't work for AVPlayerViewController.

 let video: AVPlayerViewController = {
    let videoURL = URL(string: "https://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4")
    let player = AVPlayer(url: videoURL!)
    let av = AVPlayerViewController()
    av.player = player
    av.videoGravity = AVLayerVideoGravity.resizeAspect
    av.view.frame = CGRect(x:0, y:96, width: screenWidth, height: (screenWidth+7))
    self.addChild(av)
    self.addSubview(av.view)
    av.didMove(toParent: self)
    return av
}()

override init(style: UITableViewCell.CellStyle, reuseIdentifier: String?) {
    super.init(style: style, reuseIdentifier: reuseIdentifier)

    addSubview(pic)
    addSubview(title)
    addSubview(video)

addSubview() works fine for adding an image, labels, and buttons to the table cell, but it won't work for AVPlayerViewController because it is not a UIView.

The error message is: Cannot convert value of type 'AVPlayerViewController' to expected argument type 'UIView'. How can I add video to the cell style?

Answer 1

It appears as though you're trying to use a view controller instead of a UIView . This is an easy fix. Just use AVPlayerViewController.view instead of AVPlayerViewController . Let me know if you have any issues. Hope this helped

EDIT: I've found something that may help From this website

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
    }
}
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()

Let me know if this worked. Best of luck making your app

Answer 2

Update

Thanks for the help Alex. After reviewing that example, I was able to add video to to the cell once I returned a UIView which contained the AVPlayer.

let videoFrame: UIView = {
    let frame = UIView(frame: CGRect(x: 0, y: 95, width: screenWidth, height: 211))
    let videoURL = URL(string: "https://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4")
    let player = AVPlayer(url: videoURL!)
    let video = AVPlayerViewController()
    video.player = player
    video.view.frame = frame.bounds
    frame.addSubview(video.view)
    video.player?.play()
    return frame
}()

override init(style: UITableViewCell.CellStyle, reuseIdentifier: String?) {
super.init(style: style, reuseIdentifier: reuseIdentifier)

addSubview(videoFrame)