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

Posted 2023-03-08

【中文标题】SwiftUI VideoPlayer，更改默认黑色背景/侧面空间

【英文标题】：SwiftUI VideoPlayer, change default black background/side space

【发布时间】：2021-07-07 20:44:56

【问题描述】：

在 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，但没有成功。

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

【问题讨论】：

@RajaKishan 完成

【参考方案1】：

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

PlayerUIView

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)
    

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

【讨论】：

哇，太棒了！这行得通！但是由于某种原因，默认控件现在消失了？

这是一个很好的解决方案。太好了！