Swift Academy · レッスン

SwiftUIへのプレイヤーの埋め込み

Q: 「SwiftUIへのプレイヤーの埋め込み」で何を学びますか？

VideoPlayerやカスタムプレイヤーViewを使用します。 ブラウザで直接実行するハンズオンコードでSwift Academyを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。

VideoPlayerやカスタムプレイヤーViewを使用します。

「SwiftUIへのプレイヤーの埋め込み」はCoddyKit上の無料Swift Academyレッスンです。これはレッスン4/4です。下記で完全なレッスンを無料で読むことができます。その後、ブラウザ内の組み込みコードエディタと24時間対応のAIチューターでハンズオン演習できます。これはSwift Academy学習パスの一部であり、ウェブとCoddyKitアプリ全体で進捗が同期されます。 Swift Academyコースには全4レッスンが含まれています。

SwiftUIで動画を扱う

SwiftUIには、メディア再生を宣言的に組み込むための VideoPlayer ビュー（AVKit 提供）があります。標準のコントロールも組み込まれています。

import SwiftUI
import AVKit

VideoPlayerビュー

VideoPlayer は AVPlayer を受け取り、再生、一時停止、スクラバー、フルスクリーンなどの標準的な再生コントロールとともに表示します。

struct PlayerScreen: View {
    let player = AVPlayer(url: URL(string: "https://example.com/v.mp4")!)
    var body: some View {
        VideoPlayer(player: player)
            .frame(height: 240)
    }
}

プレーヤーを状態として保持する

AVPlayer を @State に保存すると、ビューが更新されても維持できます。bodyが呼び出されるたびに再作成すると、再生が最初から始まってしまいます。

struct PlayerScreen: View {
    @State private var player = AVPlayer(
        url: URL(string: "https://example.com/v.mp4")!)
    var body: some View {
        VideoPlayer(player: player)
    }
}

再生を制御する

SwiftUIのライフサイクルモディファイアから再生を制御します。画面に表示されたら開始し、画面から消えたら一時停止することで、画面外で音声が再生され続けるのを防ぎます。

VideoPlayer(player: player)
    .onAppear { player.play() }
    .onDisappear { player.pause() }

オーバーレイコンテンツ

VideoPlayer のイニシャライザは、動画の上に重ねるカスタムUI（タイトル、バッジ、キャプションなど）のためのオーバーレイクロージャを受け取ります。

VideoPlayer(player: player) {
    VStack {
        Spacer()
        Text("Live")
            .padding(6)
            .background(.red, in: Capsule())
    }
}

再生をループする

アイテムの再生終了通知を監視し、時刻0にシークしてループします。キュープレーヤーと AVPlayerLooper を使う方法もあります。

.onAppear {
    NotificationCenter.default.addObserver(
        forName: .AVPlayerItemDidPlayToEndTime,
        object: player.currentItem, queue: .main) { _ in
        player.seek(to: .zero); player.play()
    }
}

動画のためのオーディオセッション

AVAudioSession を設定すると、消音スイッチに従うか、スイッチがオンでも再生するかなど、動画の音声を意図したとおりに動作させることができます。

try? AVAudioSession.sharedInstance().setCategory(.playback)

UIViewRepresentableによるカスタムプレーヤー

システムコントロールを使わず完全にカスタマイズしたUIが必要な場合は、VideoPlayer の代わりに AVPlayerLayer を UIViewRepresentable でラップします。

struct PlayerLayerView: UIViewRepresentable {
    let player: AVPlayer
    func makeUIView(context: Context) -> UIView { PlayerUIView(player: player) }
    func updateUIView(_ uiView: UIView, context: Context) { }
}

基盤となるUIView

カスタムUIViewに AVPlayerLayer を配置し、そのサイズを自身の境界に合わせます。これにより、コントロールのない動画表示領域を作成できます。

final class PlayerUIView: UIView {
    init(player: AVPlayer) {
        super.init(frame: .zero)
        let layer = AVPlayerLayer(player: player)
        layer.videoGravity = .resizeAspectFill
        self.layer.addSublayer(layer)
    }
    required init?(coder: NSCoder) { fatalError() }
}

ピクチャ・イン・ピクチャ

ピクチャ・イン・ピクチャには、プレーヤーレイヤーとともに AVPictureInPictureController を使い、バックグラウンドオーディオ機能を有効にします。

let pip = AVPictureInPictureController(playerLayer: playerLayer)
pip?.startPictureInPicture()

後片付け

ビューが表示されなくなったらプレーヤーを一時停止し、オブザーバーを削除してください。これによりリソースを解放し、意図しないバックグラウンドオーディオの再生を止められます。

.onDisappear {
    player.pause()
    // remove notification observers here
}

クイックチェック：SwiftUIプレーヤー

SwiftUIにプレーヤーを組み込む方法の理解度を確認します。

まとめ：SwiftUIへのプレーヤーの組み込み

AVKitのVideoPlayerは標準コントロール付きでAVPlayerを組み込みます。安定したインスタンスを維持するためにプレーヤーを@Stateに保持し、onAppear/onDisappearから再生と一時停止を制御してください。末尾のクロージャーでオーバーレイを追加し、終了通知を使ってループ再生します。

カスタムのコントロールなし再生が必要な場合は、AVPlayerLayerをUIViewRepresentableでラップし、ビューが表示されなくなったときにオブザーバーを削除して後片付けします。

よくある質問

「SwiftUIへのプレイヤーの埋め込み」レッスンは無料ですか？

はい。「SwiftUIへのプレイヤーの埋め込み」の完全なテキストはこのウェブで無料で読めます。インタラクティブに演習し（組み込みコードエディタと24時間対応のAIチューター）、Swift Academyコースの残りをアンロックするには、CoddyKit PROにアップグレードしてください。 Swift Academyコースには全4レッスンが含まれています。

「SwiftUIへのプレイヤーの埋め込み」で何を学びますか？

VideoPlayerやカスタムプレイヤーViewを使用します。ブラウザで直接実行するハンズオンコードでSwift Academyを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。

Swift Academyを始めるのに経験は必要ですか？

事前経験は必要ありません。CoddyKitのSwift Academyは初級者から上級者向けに構成されているため、ここから始めるか最初から始めて、自分のペースで進むことができます。これはレッスン4/4です。

「SwiftUIへのプレイヤーの埋め込み」レッスンにはどのくらい時間がかかりますか？

ほとんどのCoddyKitレッスンは約5～10分かかります。各レッスンはコンパクトでインタラクティブなので、着実に進歩し、ウェブとアプリ全体で正確に前回の場所から再開できます。

このSwift Academyレッスンでコードを書いて実行できますか？

はい。すべてのSwift Academyレッスンに組み込みコードエディタが含まれているため、ブラウザでリアルコードを書いて実行し、即座のAIフィードバックを取得できます。ローカル設定は不要です。

このコースのすべてのレッスン

← Swift Academyに戻る