ios - replacing an image with a video player dynamically

Question

My app (Swift 3, with a UIStoryboard) shows a list of episodes from a show. Whenever the user clicks on an episode from the table, he/she gets a detail view which shows (top to bottom):

• the episode's image
• the title
• a description of the episode and technical information

Depending on the user type, instead of showing the episode's image, we would like to have a video player so people who are subscribed can just start watching the video (unsubscribed users would just see the image).

Based on the subscribed status of our users, a video player should be playing the content (subscribed) or showing an image (unsubscribed).

Is there a way to dynamically remove the image and replace it with the video player in the exact same spot and dimensions? And if so, what would happen with the Auto Layout contraints currently applied to the image?

Answer 1

Place a UIView on top of the UIImageView in storyboard. Align it to all 4 edges of UIImageView. And then hide and show them according to requirement by setting isHidden property. Then, Insert the AVPlayer in the UIView through code.

Answer 2

Steps

The following solution works for both UIStoryboard and UI in code.

1. In InterfaceBuilder drag a UIView of preferred size onto the canvas, add your auto layout constraints and create an outlet (called "containerView")
2. Configure an AVPlayer with a URL or file, initialize an AVPlayerLayer instance with the player and add the layer to the containerView's layer hierarchy
3. Add an UIImageView on top of the container view
4. Based on your condition, show / hide / stop / play your movie and image

Quick code example

import UIKit
import AVFoundation

class ViewController: UIViewController {


    // MARK: - Properties

    @IBOutlet var containerView: UIView!
    private var imageView: UIImageView!
    private var isUserSubscribed = true


    // MARK: - Lifecycle

    override func viewDidLoad() {
        super.viewDidLoad()

        // Video
        let url = URL(string: "https://content.jwplatform.com/manifests/vM7nH0Kl.m3u8")!
        let avPlayer = AVPlayer(playerItem: AVPlayerItem(url: url))
        let avPlayerLayer = AVPlayerLayer(player: avPlayer)
        avPlayerLayer.frame = containerView.bounds
        containerView.layer.insertSublayer(avPlayerLayer, at: 0)

        // Image
        imageView = UIImageView(image: UIImage(named: "someImage"))
        imageView.frame = containerView.frame
        containerView.addSubview(imageView)

        // Condition
        if isUserSubscribed {
            imageView.isHidden = true
            avPlayer.play()
        } else {
            imageView.isHidden = false
        }
    }
}

Result

Further options

With this approach you need to add your own playback controls, which basically boils down to adding buttons with actions, triggering AVPlayer.play(), AVPlayer.stop() etc.