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

Question

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?

Answer 1

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

Answer 2

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:
Addresses the issue where onDisappear is called when full screen presentation begins by allowing a way to ignore the call in that particular case.
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)
}
}

Answer 3

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.