SwiftUI VideoPlayer，更改默认黑色背景/侧边空间

Question

在 SwiftUI 中，我添加了一个视频播放器，但帧并不是真正的 16:9，但视频是。

 private let player = AVPlayer(url: URL(string: UserDefaults.standard.string(forKey: "videoURL") ?? "https://www.learningcontainer.com/wp-content/uploads/2020/05/sample-mp4-file.mp4")!)
 

有了这样的看法：

ZStack {
    VideoPlayer(player: player)
       .onAppear() {
           player.play()
       }.frame(
            idealWidth: .infinity,
            maxWidth: .infinity,
            idealHeight: (UIScreen.main.bounds.height / 3) * 1.75,
            maxHeight: UIScreen.main.bounds.height - 600,
            alignment: .center
        )
    }
    .background(
        RoundedRectangle(cornerRadius: 40.0)
            .stroke(Color(.red), lineWidth: 5)
            .overlay(
                RoundedRectangle(cornerRadius: 40.0)
                    .fill(Color(.black))
            )
)

播放器正在工作并正确显示，但两侧都有黑色背景。我想要它是红色的，所以它看起来确实比红色块中的随机黑色更漂亮。

有没有办法改变黑色侧面的背景颜色？我尝试过edgesIgnoringSafeArea但没有运气。

但现在的样子，你可以看到侧面的黑色“边框”；

Answer 1

AVPlayerLayer在 的帮助下使用并根据需要UIViewRepresentable设置图层颜色。AVPlayerLayer

玩家界面视图

class PlayerUIView: UIView {
    
    // MARK: Class Property
    
    let playerLayer = AVPlayerLayer()
    
    // MARK: Init
    
    override init(frame: CGRect) {
        super.init(frame: frame)
    }
    
    required init?(coder: NSCoder) {
        fatalError("init(coder:) has not been implemented")
    }
    
    init(player: AVPlayer) {
        super.init(frame: .zero)
        self.playerSetup(player: player)
    }
    
    deinit {
        NotificationCenter.default.removeObserver(self)
    }
    
    // MARK: Life-Cycle
    
    override func layoutSubviews() {
        super.layoutSubviews()
        playerLayer.frame = bounds
        
    }
    
    // MARK: Class Methods
    
    private func playerSetup(player: AVPlayer) {
        playerLayer.player = player
        player.actionAtItemEnd = .none
        layer.addSublayer(playerLayer)
        playerLayer.backgroundColor = UIColor.red.cgColor // <--- Set color here
    }
}

玩家视图

struct PlayerView: UIViewRepresentable {
    
    @Binding var player: AVPlayer
    
    func makeUIView(context: Context) -> PlayerUIView {
        return PlayerUIView(player: player)
    }
    
    func updateUIView(_ uiView: PlayerUIView, context: UIViewRepresentableContext<PlayerView>) {
        uiView.playerLayer.player = player
    }
}

用法

struct ContentView: View {
    @State private var player = AVPlayer(url: URL(string: UserDefaults.standard.string(forKey: "videoURL") ?? "https://www.learningcontainer.com/wp-content/uploads/2020/05/sample-mp4-file.mp4")!)
    
    var body: some View {
        ZStack {
            PlayerView(player: $player)
                .onAppear() {
                    player.play()
                }.ignoresSafeArea()
        }
    }
}

编辑

对于视频控制器，请使用以下代码。

struct PlayerView: UIViewRepresentable {
    
    @Binding var player: AVPlayer
    
    func makeUIView(context: Context) -> PlayerUIView {
        return PlayerUIView(player: player)
    }
    
    func updateUIView(_ uiView: PlayerUIView, context: UIViewRepresentableContext<PlayerView>) {
        uiView.playerViewController.player = player
    }
}

class PlayerUIView: UIView {
    
    // MARK: Class Property
    
    let playerViewController = AVPlayerViewController()
    
    // MARK: Init
    
    override init(frame: CGRect) {
        super.init(frame: frame)
    }
    
    required init?(coder: NSCoder) {
        fatalError("init(coder:) has not been implemented")
    }
    
    init(player: AVPlayer) {
        super.init(frame: .zero)
        self.playerSetup(player: player)
    }
    
    // MARK: Life-Cycle
    
    override func layoutSubviews() {
        super.layoutSubviews()
        playerViewController.view.frame = bounds
    }
    
    // MARK: Class Methods
    
    private func playerSetup(player: AVPlayer) {
        playerViewController.player = player
        playerViewController.view.backgroundColor = .red
        self.addSubview(playerViewController.view)
    }
}

您也不需要设置背景视图。