Swift Academy · leksjon

Bygge inn avspillere i SwiftUI

Bruk VideoPlayer og egendefinerte avspillervisninger.

Leksjon 4 av 413 trinn

Bygge inn avspillere i SwiftUI er en gratis leksjon i Swift Academy på CoddyKit. Dette er leksjon 4 av 4. Du kan lese valgfritt 3 leksjoner fra denne læringsstien gratis i sin helhet – deretter låser CoddyKit PRO opp alle leksjoner, samt praktisk øving med en innebygd kodeeditor og en AI-veileder som er tilgjengelig døgnet rundt. Den er en del av læringsløpet i Swift Academy, og fremdriften din synkroniseres mellom nettet og CoddyKit-appen. Kurset i Swift Academy inneholder totalt 4 leksjoner.

Video i SwiftUI

SwiftUI tilbyr visningen VideoPlayer fra AVKit for å bygge inn medieavspilling deklarativt, med innebygde kontroller.

import SwiftUI
import AVKit

Visningen VideoPlayer

VideoPlayer tar imot en AVPlayer og gjengir den med standard avspillingskontroller – spill av, pause, søkelinje og fullskjerm.

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

Beholde spilleren i tilstand

Lagre AVPlayer i @State slik at den overlever oppdateringer av visningen. Hvis den opprettes på nytt ved hvert kall til body, starter avspillingen på nytt.

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

Styre avspillingen

Styr avspillingen fra SwiftUI-livssyklusmodifikatorer: start ved visning, og sett på pause når visningen forsvinner, slik at lyden ikke fortsetter utenfor skjermen.

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

Overliggende innhold

Initialisereren til VideoPlayer tar imot en overlay-closure for egendefinert grensesnitt over videoen – titler, merker og bildetekster.

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

Gjenta avspillingen

Gjenta avspillingen ved å observere varslet om slutten av elementet og søke tilbake til null. En AVPlayerLooper med en køspiller er et annet alternativ.

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

Lydøkt for video

Konfigurer en AVAudioSession slik at videolyden oppfører seg riktig – enten ved å respektere lydløsbryteren eller ved å spille av gjennom den, etter behov.

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

Egendefinerte spillere med UIViewRepresentable

Når De trenger et helt egendefinert grensesnitt uten systemkontroller, kan De pakke et AVPlayerLayer inn i en UIViewRepresentable i stedet for å bruke VideoPlayer.

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

Den underliggende UIView-en

Den egendefinerte UIView-en inneholder et AVPlayerLayer og tilpasser størrelsen til grensene sine, slik at De får en videoflate uten kontroller.

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

Bilde-i-bilde

Bruk AVPictureInPictureController med spillerlaget for bilde-i-bilde, og aktiver funksjonen for bakgrunnslyd.

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

Opprydding

Sett avspilleren på pause og fjern observatører når visningen forsvinner, slik at ressurser frigjøres og utilsiktet bakgrunnslyd stoppes.

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

Kort sjekk: SwiftUI-avspillere

Test forståelsen av hvordan avspillere bygges inn i SwiftUI.

Besvar den i den interaktive leksjonen

Oppsummering: Bygge inn avspillere i SwiftUI

AVKit sin VideoPlayer bygger inn en AVPlayer med standardkontroller. Behold avspilleren i @State for en stabil instans, og styr avspilling og pause fra onAppear/onDisappear. Legg til overlegg via den avsluttende closure-en, og gjenta avspillingen når sluttnotifikasjonen sendes.

For egendefinert avspilling uten kontroller kan en AVPlayerLayer pakkes inn i en UIViewRepresentable. Rydd opp i observatører når visningen forsvinner.

Gratis å komme i gang

Lær deg Swift med en AI-veileder – gratis

Skriv og kjør ekte kode i nettleseren, få umiddelbar hjelp fra en AI-veileder som er tilgjengelig døgnet rundt, og fortsett der du slapp – på nettet eller i appen.

Kurs: 122
Leksjoner: 409

Start læringen gratis Se hele kurset

Ofte stilte spørsmål

Er leksjonen «Bygge inn avspillere i SwiftUI» gratis?

Ja – du kan lese valgfritt 3 av leksjonene i læringsstien Swift Academy, inkludert «Bygge inn avspillere i SwiftUI», gratis i sin helhet her på nettet. Deretter låser CoddyKit PRO opp alle leksjoner, samt interaktiv øving med en innebygd kodeeditor og en AI-veileder som er tilgjengelig døgnet rundt. Kurset i Swift Academy inneholder totalt 4 leksjoner.

Hva lærer jeg i «Bygge inn avspillere i SwiftUI»?

Bruk VideoPlayer og egendefinerte avspillervisninger. Du øver på Swift Academy med praktisk kode som du kjører direkte i nettleseren, mens en AI-veileder som er tilgjengelig døgnet rundt, svarer på spørsmålene dine mens du jobber deg gjennom leksjonen.

Trenger jeg erfaring for å begynne med Swift Academy?

Ingen tidligere erfaring er nødvendig. Swift Academy på CoddyKit er lagt opp for både nybegynnere og viderekomne, så De kan begynne her eller helt fra start og lære i Deres eget tempo. Dette er leksjon 4 av 4.

Hvor lang tid tar leksjonen «Bygge inn avspillere i SwiftUI»?

De fleste CoddyKit-leksjoner tar omtrent 5–10 minutter. Hver leksjon er kort og interaktiv, slik at De gjør jevne fremskritt og kan fortsette akkurat der De slapp – både på nettet og i appen.

Kan jeg skrive og kjøre kode i denne Swift Academy-leksjonen?

Ja. Alle Swift Academy-leksjoner har en innebygd kodeeditor, slik at De kan skrive og kjøre ekte kode direkte i nettleseren og få umiddelbar tilbakemelding fra AI – uten lokal konfigurering.

Alle leksjonene i dette kurset

← Tilbake til Swift Academy