VideoPlayer in SwiftUI without back button or other functions

2022-01-28 ｜ Swift ｜ #Words: 407

When I use the VideoPlayer in SwiftUI, I notice no “X” button to return in iPod Touch, like below:

iPod Touch

iPhone 13 mini

I don’t want this kind of UI, and I couldn’t find a solution from Google. Finally I found a magical solution to this problem.

First, use code below to call VideoPlayer:

struct TableCellView: View {
    @State private var playVideo: Bool = false
    
    var body: some View {
        ZStack {
        // Click this to fullscreen
        Button(action: {
                        playVideo = true
                    }, label: {
                        Image(systemName: "play.circle.fill")
                            .font(.largeTitle)
                            .foregroundColor(Color.black)
                            .padding()
                    })
        }
        .fullScreenCover(isPresented: $playVideo) {
            VideoPlayer(player: AVPlayer(url: Bundle.main.url(forResource: "v1", withExtension: "mov")!))
        }
    }
}

The solution is ridiculously simple: just ignore the safe area. A

dd the following code under VideoPlayer:

.ignoresSafeArea()

The full code is:

struct TableCellView: View {
    @State private var playVideo: Bool = false
    
    var body: some View {
        ZStack {
        Button(action: {
                        playVideo = true
                    }, label: {
                        Image(systemName: "play.circle.fill")
                            .font(.largeTitle)
                            .foregroundColor(Color.black)
                            .padding()
                    })
        }
        .fullScreenCover(isPresented: $playVideo) {
            VideoPlayer(player: AVPlayer(url: Bundle.main.url(forResource: "v1", withExtension: "mov")!))
            	.ignoresSafeArea()
        }
    }
}

It works fine now!

I hope these will help someone in need~