Swift Academy · Lekcja

Osadzanie odtwarzaczy w SwiftUI

Używanie VideoPlayer i niestandardowych widoków odtwarzacza.

Lekcja 4 z 413 kroki

Osadzanie odtwarzaczy w SwiftUI to bezpłatna lekcja Swift Academy na CoddyKit. To lekcja 4 z 4. Możesz przeczytać całą lekcję poniżej za darmo — a potem ćwiczyć ją interaktywnie w przeglądarce z wbudowanym edytorem kodu i tutorem AI dostępnym 24/7. To część ścieżki edukacyjnej Swift Academy, a Twój postęp synchronizuje się między webem a aplikacją CoddyKit. Kurs Swift Academy zawiera 4 lekcji w sumie.

Wideo w SwiftUI

SwiftUI udostępnia widok VideoPlayer (z frameworka AVKit) do deklaratywnego osadzania odtwarzania multimediów wraz z wbudowanymi elementami sterującymi.

import SwiftUI
import AVKit

Widok VideoPlayer

VideoPlayer przyjmuje obiekt AVPlayer i renderuje go ze standardowymi elementami sterującymi odtwarzaniem — odtwarzaniem, wstrzymywaniem, suwakiem przewijania i trybem pełnoekranowym.

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

Przechowywanie odtwarzacza w stanie

Przechowuj AVPlayer w @State, aby przetrwał aktualizacje widoku. Ponowne tworzenie go przy każdym wywołaniu body spowodowałoby ponowne rozpoczęcie odtwarzania.

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

Sterowanie odtwarzaniem

Steruj odtwarzaniem za pomocą modyfikatorów cyklu życia SwiftUI: rozpocznij je po pojawieniu się widoku i wstrzymaj po jego zniknięciu, aby uniknąć dalszego odtwarzania dźwięku poza ekranem.

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

Nakładanie zawartości

Inicjalizator VideoPlayer przyjmuje domknięcie nakładki, które pozwala umieścić niestandardowy interfejs nad wideo — tytuły, oznaczenia i napisy.

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

Zapętlone odtwarzanie

Aby zapętlić odtwarzanie, obserwuj powiadomienie o zakończeniu elementu i przewiń z powrotem do zera. Inną możliwością jest użycie AVPlayerLooper wraz z odtwarzaczem kolejkowym.

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

Sesja audio dla wideo

Skonfiguruj AVAudioSession, aby dźwięk wideo zachowywał się prawidłowo — respektował przełącznik wyciszenia lub był przez niego odtwarzany, zależnie od potrzeb.

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

Niestandardowe odtwarzacze z UIViewRepresentable

Gdy potrzebujesz w pełni niestandardowego interfejsu bez systemowych elementów sterujących, opakuj AVPlayerLayer w UIViewRepresentable zamiast używać VideoPlayer.

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

Bazowy UIView

Niestandardowy UIView zawiera AVPlayerLayer i dopasowuje jego rozmiar do swoich granic, zapewniając powierzchnię wideo bez elementów sterujących.

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() }
}

Obraz w obrazie

Aby użyć trybu Obraz w obrazie, zastosuj AVPictureInPictureController wraz z warstwą odtwarzacza i włącz funkcję dźwięku w tle.

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

Porządkowanie

Wstrzymaj odtwarzacz i usuń obserwatorów, gdy widok zniknie, aby zwolnić zasoby i zatrzymać niezamierzone odtwarzanie dźwięku w tle.

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

Szybki test: odtwarzacze SwiftUI

Proszę sprawdzić, czy rozumieją Państwo, jak osadzać odtwarzacze w SwiftUI.

Odpowiedz w interaktywnej lekcji

Podsumowanie: osadzanie odtwarzaczy w SwiftUI

AVKit’s VideoPlayer osadza obiekt AVPlayer ze standardowymi elementami sterującymi. Należy przechowywać odtwarzacz w @State, aby zachować stabilną instancję, oraz sterować odtwarzaniem i wstrzymywaniem za pomocą onAppear/onDisappear. Nakładki należy dodawać za pomocą końcowego domknięcia, a odtwarzanie zapętlać po otrzymaniu powiadomienia o zakończeniu.

W przypadku niestandardowego odtwarzania bez elementów sterujących należy opakować AVPlayerLayer w UIViewRepresentable i usuwać obserwatorów, gdy widok zniknie.

Bezpłatny start

Ucz się Swift dzięki korepetycjom AI — za darmo

Pisz i uruchamiaj kod w przeglądarce, otrzymuj natychmiastową pomoc od korepetytora AI dostępnego 24/7 i kontynuuj naukę w sieci lub w aplikacji.

Kursy: 122
Lekcje: 409

Zacznij naukę bezpłatnie Wyświetl pełny kurs

Często zadawane pytania

Czy lekcja „Osadzanie odtwarzaczy w SwiftUI” jest bezpłatna?

Tak — pełny tekst „Osadzanie odtwarzaczy w SwiftUI” jest dostępny za darmo tutaj w sieci. Aby ćwiczyć ją interaktywnie (wbudowany edytor kodu i tutor AI dostępny 24/7) i odblokować resztę kursu Swift Academy, przejdź na CoddyKit PRO. Kurs Swift Academy zawiera 4 lekcji w sumie.

Co nauczysz się w „Osadzanie odtwarzaczy w SwiftUI”?

Używanie VideoPlayer i niestandardowych widoków odtwarzacza. Ćwiczysz Swift Academy z praktycznym kodem, który uruchamiasz bezpośrednio w przeglądarce, a tutor AI dostępny 24/7 odpowiada na Twoje pytania podczas pracy nad lekcją.

Czy potrzebuję doświadczenia, aby zacząć Swift Academy?

Nie wymagamy żadnego doświadczenia. Swift Academy w CoddyKit jest strukturyzowany dla początkujących i zaawansowanych użytkowników, więc możesz zacząć tutaj lub od początku i uczyć się w swoim tempie. To lekcja 4 z 4.

Ile czasu zajmuje lekcja „Osadzanie odtwarzaczy w SwiftUI”?

Większość lekcji CoddyKit trwa około 5–10 minut. Każda lekcja to mały, interaktywny krok, dzięki czemu robisz systematyczne postępy i zawsze wracasz dokładnie do tego samego miejsca — na webie i w aplikacji.

Czy mogę pisać i uruchamiać kod w tej lekcji Swift Academy?

Tak. Każda lekcja Swift Academy zawiera wbudowany edytor kodu, więc piszesz i uruchamiasz prawdziwy kod bezpośrednio w przeglądarce i od razu otrzymujesz sprzężenie zwrotne od AI — bez konfiguracji na komputerze.

Wszystkie lekcje w tym kursie

Odtwarzanie multimediów za pomocą AVPlayer
Nagrywanie dźwięku
AVAsset i kompozycja
Osadzanie odtwarzaczy w SwiftUI

← Powrót do Swift Academy