How to go full screen with VideoPlayer() in SwiftUI?

Viewed 4160

I'm using the following code in my project and it works great.

But I need to know if its possible to play the video in full screen when the user taps on a button or any other action.

This is my code:

   VideoPlayer(player: AVPlayer(url:  URL(string: "https://xxx.mp4")!)) {
        VStack {
            Text("Watermark")
                .foregroundColor(.black)
                .background(Color.white.opacity(0.7))
            Spacer()
        }
        .frame(width: 400, height: 300)
    }
    .frame(width: UIScreen.main.bounds.width, height: 300)

So basically, the idea is to make the VideoPlayer to go full screen similar to youtube's video player.

Is this possible using the VideoPlayer() in swiftUI?

3 Answers

They should include an option or have that button by default in VideoPlayer I don't know why apple did this if someone knows add a comment about the same, anyways

There is a simpler method though

struct CustomVideoPlayer: UIViewControllerRepresentable {
  
  func makeUIViewController(context: Context) -> AVPlayerViewController {
    let controller = AVPlayerViewController()
    let url: String = "https://xxx.mp4"
    let player1 = AVPlayer(url: URL(string: url)!)
    
    controller.player = player1
    return controller
  }
  
  func updateUIViewController(_ uiViewController: AVPlayerViewController, context: Context) {
    
  }
}

Try this code and call CustomVideoPlayer() and give it a frame with any height and you will have a fullscreen option on the top left corner just like youtube

EDIT: I tried the accepted solution but I don't think it is going fullscreen

I took @Viraj D's answer and created a Swift package called AZVideoPlayer. Add the package with SPM or feel free to just copy the source code into your project.

The package also adds the following:

  1. Addresses the issue where onDisappear is called when full screen presentation begins by allowing a way to ignore the call in that particular case.
  2. Allows you to have the video continue playing when ending full screen presentation (it pauses by default).

Here's an example:

import SwiftUI
import AVKit
import AZVideoPlayer

struct ContentView: View {
    var player: AVPlayer?
    @State var willBeginFullScreenPresentation: Bool = false
    
    init(url: URL) {
        self.player = AVPlayer(url: url)
    }
    
    var body: some View {
        AZVideoPlayer(player: player,
                      willBeginFullScreenPresentationWithAnimationCoordinator: willBeginFullScreen,
                      willEndFullScreenPresentationWithAnimationCoordinator: willEndFullScreen)
        .onDisappear {
            // onDisappear is called when full screen presentation begins, but the view is
            // not actually disappearing in this case so we don't want to reset the player
            guard !willBeginFullScreenPresentation else {
                willBeginFullScreenPresentation = false
                return
            }
            player?.pause()
            player?.seek(to: .zero)
        }
    }
    
    func willBeginFullScreen(_ playerViewController: AVPlayerViewController,
                             _ coordinator: UIViewControllerTransitionCoordinator) {
        willBeginFullScreenPresentation = true
    }
    
    func willEndFullScreen(_ playerViewController: AVPlayerViewController,
                           _ coordinator: UIViewControllerTransitionCoordinator) {
        // This is a static helper method provided by AZVideoPlayer to keep
        // the video playing if it was playing when full screen presentation ended
        AZVideoPlayer.continuePlayingIfPlaying(player, coordinator)
    }
}

Here's how I managed to do it. I hope this helps someone else in the future.

This is a rough idea but it works as it was intended to.

Basically, I've put the VideoPlayer in a VStack and gave it a full width and height.

I gave the VStack a set height and full width.

I gave the VStack a tapGesture and changed its width and height on double tap and this way, all its content (VideoPlayer) will resize accordingly.

This is the code:

struct vidPlayerView: View {
    
    @State var animate = false
    
    var body: some View {
        
        VStack{
  
            VideoPlayer(player: AVPlayer(url:  URL(string: "https://xxxx.mp4")!)) {
                VStack {
                    Image(systemName: "info.circle")
                        .font(.system(size: 18, weight: .bold))
                        .foregroundColor(.white)
                    Spacer()
                }
                .frame(width: 400, height: 300, alignment: .topLeading)
            }
          
            .frame(maxWidth: .infinity, maxHeight: .infinity, alignment: .topLeading)
            
            Spacer()
            
        }.onTapGesture(count: 2) {
            withAnimation {
                                self.animate.toggle()
                            }
        }
        .frame(maxWidth: self.animate ? .infinity : UIScreen.main.bounds.width, maxHeight: self.animate ? .infinity : 300, alignment: .topLeading)
        
        

        
    }
}

The above code can be executed by taping on a button or any other actions.

Related