iOS - 动态替换图像为视频播放器

Question

我的应用程序 (使用Swift 3和UIStoryboard) 显示一个节目的剧集列表。每当用户点击表格中的一个剧集时，就会获得一个详细视图，该视图从上到下显示如下内容：

• 剧集的图像
• 标题
• 剧集和技术信息的描述

根据用户类型，我们希望在不显示剧集图像的情况下提供视频播放器，以便订阅用户可以直接开始观看视频 (非订阅用户只能看到图像)。

根据用户的订阅状态，视频播放器应该播放内容 (已订阅) 或显示图像 (未订阅)。

有没有一种方法可以动态地删除图像并在完全相同的位置和尺寸上替换为视频播放器? 如果是这样，当前应用于图像的自动布局约束会发生什么变化？

- cesarcarlos

---

你应该创建自己的AVPlayerLayer，它是一个CALayer实例，AVPlayer可以将其视觉输出指向。在Storyboard中创建与你所需尺寸相同的UIView，将你的UIImageView添加到其中并为两者创建outlets。在代码中，使用你的AVPlayer初始化AVPlayerLayer，并将其作为子视图添加到容器视图中。从那里，你可以隐藏/播放等操作。 - bajocode

谢谢，Fabijan。我会尝试这个。 - cesarcarlos

Answer 1

在Storyboard中将UIView放置在UIImageView上方，将其与UIImageView的四个边对齐。然后通过设置isHidden属性来根据需要隐藏和显示它们。 接下来，通过代码将AVPlayer插入到UIView中。

- Mamta

Answer 2

步骤

以下解决方案适用于UIStoryboard和代码中的UI。

1. 在InterfaceBuilder中将所需大小的UIView拖到画布上，添加自动布局约束并创建一个输出口（称为“containerView”）
2. 使用URL或文件配置AVPlayer，使用播放器初始化AVPlayerLayer实例，并将该层添加到containerView的层级结构中
3. 在容器视图顶部添加一个UIImageView
4. 根据您的条件，显示/隐藏/停止/播放您的电影和图像

快速代码示例

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

结果

更多选项

使用此方法，您需要添加自己的播放控件，这基本上归结为添加具有操作的按钮，触发 AVPlayer.play()、AVPlayer.stop()等。

- bajocode

---

你好，我按照你提到的步骤操作了，但是在图片方面遇到了问题。我在故事板中使用约束将UIView放置，并设置了顶部、右侧、左侧和宽高比。然后我通过编程方式创建了UIImageView，将imageView框架设置为容器视图框架，并将其添加为容器视图的子视图。问题是UIView的顶部和UIImageView的顶部之间出现了很大的间隙。 - cesarcarlos