SwiftUIでVideoplayerを使ってみた

ios14からswiftUIでVideoPlayerが使えるようになったので使ってみました。swiftUIのコードのみの表示と、UIViewControllerRepresentableを継承したコードが必要になるところを記載しました。

SwiftUIのコードのみでの表現

import SwiftUI
import AVKit

struct ContentView: View {
    // play river.mp4
    private let player = AVPlayer(url: Bundle.main.url(forResource: "river", withExtension: "mp4")!)

    var body: some View {
        HStack{
            VideoPlayer(player: player)
            .onAppear() {
                self.player.play()
　　　　　　　}.onDisappear() {
                self.player.pause()
            }.edgesIgnoringSafeArea(.all)
        }
    }
}

画面表示

• mp4ファイルで動画を再生しました。
• 気づきとして以下二点があります。 （コードで利用している動画の引用元）
  • 下画像のように動画の黒いフレーム(青枠部分)が残る.
    
  • 下画像のように動画の再生や停止等を制御するUI部品が表示される
    

例えば、ログイン画面の背景としてフルスクリーンで動画を表示したい場合に、フルスクリーンで、動画の再生、停止のUI部品を消すことを検討するかとと思います。2021年4月時点では、SwiftUiのみのコードでは消せず、UIViewControllerRepresentableを利用してAVPlayer,AVPlayerViewControllerを利用して、それらの部品を消す必要がありそうです。

AVPlayer,AVPlayerViewControllerを利用、UIViewControllerRepresentableを継承したコードが必要になるところ

コードは以下です。

import SwiftUI
import AVKit

struct ContentView: View {
    //play river movie
    private let player =
        AVPlayer(url: Bundle.main.url(forResource: "river", withExtension: "mp4")!)
    var body: some View {
        PlayerViewController(player: player)
            .onAppear(){
                self.player.play()
            }.edgesIgnoringSafeArea(.all)
    }
}

struct PlayerViewController: UIViewControllerRepresentable {

    func makeUIViewController(context: Context) -> AVPlayerViewController {
        let player =
            AVPlayer(url: Bundle.main.url(forResource: "kawa", withExtension: "mp4")!)
        let controller =  AVPlayerViewController()
        controller.modalPresentationStyle = .fullScreen
        controller.player = player
        controller.videoGravity = .resizeAspectFill
        controller.showsPlaybackControls = false
        return controller
    }

    func updateUIViewController(_ playerController: AVPlayerViewController, context: Context) {
        //none
    }
}

画面表示

セーフエリアも含めて動画を表示できるようになりました。下記はそのスクリーンショットです。
（コードで利用している動画の引用元）

今後の期待

今後のSwiftUIのバージョンアップで、SwiftUIのコードのみで記載できる部品が多くなることを期待しております。