Custom SwiftUI Video Player with controls hidden except Fullscreen

Question

Essentially I'm trying to find a way to implement a Custom Video player in a SwiftUI iPad application that has all controls hidden except the Fullscreen button.

As far as I understand just hiding specific controls is not possible but I'm wondering if I can build a custom button that puts the video players in full screen. This is the code I have:

//My Custom Video Player class
import SwiftUI
import AVKit
    
    struct CustomVideoPlayer : UIViewControllerRepresentable {
        var player : AVPlayer
        
        func makeUIViewController(context: Context) -> AVPlayerViewController {
            let controller = AVPlayerViewController()
            controller.player = player
            controller.showsPlaybackControls = false //Important to not show any native videoplayer controls
            controller.videoGravity = .resizeAspectFill
            loopVideo(player: player)
            return controller
        }
        
        func updateUIViewController(_ uiViewController: AVPlayerViewController, context: Context) {
    
        }
        
        func loopVideo(player p: AVPlayer) {
                NotificationCenter.default.addObserver(forName: .AVPlayerItemDidPlayToEndTime, object: p.currentItem, queue: nil) { notification in
                    p.seek(to: .zero)
                    p.play()
                }
            }
    }

import SwiftUI
import AVKit

struct ContentView: View {
    
    var player1 = AVPlayer(url: URL(string: "urlPlaceholder")!)
    
var body: some View {
         CustomVideoPlayer(player: player1)
                 .onAppear {
                      player1.play()
                 }
}

score 2 · Answer 1 · answered Nov 09 '22 at 16:17

I managed to make this work by copying the videoplayer into a .fullScreenCover. This is not the solution to controlling the videoplayer programatically but it is a solution to showing the player in full screen without controls:

ZStack{
                    CustomVideoPlayer(player: player1)
                        .onAppear {
                            player1.play()
                        }
                        .frame(height: 470)
                        .cornerRadius(10)
                        
                    VStack{
                        HStack{
                            Spacer()
                            FullScreen_Button()
                        }
                        Spacer()
                    }
                }.fullScreenCover(isPresented: $fullScreen1, content: {
                    ZStack{
                        CustomVideoPlayer(player: player1)
                            .onAppear {
                                player1.play()
                            }
                        VStack{
                            HStack{
                                Spacer()
                                FullScreen_Button()
                            }
                            Spacer()
                        }
                    }
                    
                })

Luckily the videoplayer will continue playing from the point it was at automatically.

This seemed to be the solution but after testing it a few times it turns out the videos are not. synced upon opening fullscreen. I do not understand how but they were at first and now they suddenly aren't — William Bruijntjes, Nov 09 '22 at 16:52
They only seem to sync when the screen with the video is the first screen the app opens. If there are screens before it, they will never sync — William Bruijntjes, Nov 09 '22 at 17:05

Custom SwiftUI Video Player with controls hidden except Fullscreen

1 Answers1