SwiftUI中AVPlayer播放视频时去除黑边问题求助

视频四周的黑边是因为视频本身的宽高比和你设置的固定高度（350）不匹配，播放器为了保持视频比例会自动留白。可以通过以下两种方式解决：

方式一：填充整个容器（允许裁切部分视频） #

给VideoPlayer添加scaledToFill()让视频填充整个frame，再用clipped()裁切超出容器的部分：

struct ContentView: View {
    public var body: some View {
        VideoPlayer(player: AVPlayer(url: URL(string: "https://test-videos.co.uk/vids/bigbuckbunny/mp4/h264/360/Big_Buck_Bunny_360_10s_1MB.mp4")!))
            .scaledToFill()
            .frame(maxWidth: .infinity, height: 350)
            .clipped()
    }
}

方式二：根据视频宽高比动态计算高度（无裁切，完全显示） #

如果不想裁切视频，可以先获取视频的实际宽高比，再根据屏幕宽度动态计算合适的高度，确保视频刚好填满容器：

struct ContentView: View {
    @State private var videoAspectRatio: CGFloat = 1.0 // 默认比例
    
    var body: some View {
        VideoPlayer(player: AVPlayer(url: URL(string: "https://test-videos.co.uk/vids/bigbuckbunny/mp4/h264/360/Big_Buck_Bunny_360_10s_1MB.mp4")!))
            .aspectRatio(videoAspectRatio, contentMode: .fit)
            .frame(maxWidth: .infinity)
            .onAppear {
                // 获取视频资源的宽高比
                let asset = AVAsset(url: URL(string: "https://test-videos.co.uk/vids/bigbuckbunny/mp4/h264/360/Big_Buck_Bunny_360_10s_1MB.mp4")!)
                let track = asset.tracks(withMediaType: .video).first
                if let size = track?.naturalSize {
                    videoAspectRatio = size.width / size.height
                }
            }
    }
}

第一种方式简单快捷，适合不需要完整显示视频的场景；第二种方式能保证视频完整显示，同时适配屏幕宽度，不会出现黑边。

内容的提问来源于stack exchange，提问作者shekwo