Android Academy · Lektion

Audio und Video abspielen

Einfache Medienwiedergabe in Android

Audio und Video abspielen ist eine kostenlose Android Academy-Lektion auf CoddyKit. Dies ist Lektion 4 von 4. Du kannst die komplette Lektion unten kostenlos lesen – dann übst du sie direkt im Browser mit einem integrierten Code-Editor und einem KI-Tutor rund um die Uhr. Sie ist Teil des Android Academy-Lernpfads, und dein Fortschritt wird über Web und CoddyKit-App synchronisiert. Der Android Academy-Kurs umfasst insgesamt 4 Lektionen.

Über Bilder hinaus: Medienwiedergabe

Coil zeigt Bilder ansprechend an, aber Apps geben auch Ton und Video wieder: einen Benachrichtigungston, einen Podcast, einen Hintergrundclip oder einen Video-Feed. Android bietet dafür spezielle Medien-APIs.

Die moderne, empfohlene Bibliothek ist Media3 (ExoPlayer). Sie verarbeitet Streaming, Formate, Pufferung und Wiedergabesteuerung deutlich besser als der alte MediaPlayer. In dieser Lektion spielen Sie einfache Audio- und Videoinhalte in einer Compose-App ab.

Media3-Abhängigkeiten hinzufügen

Media3 ist in Module aufgeteilt. Für die meisten Apps benötigen Sie media3-exoplayer (die Player-Engine) und media3-ui (fertige Player-Ansichten). Für Videos in Compose können Sie außerdem über AndroidView die PlayerView verwenden.

// build.gradle.kts (module level)
dependencies {
    implementation("androidx.media3:media3-exoplayer:1.5.0")
    implementation("androidx.media3:media3-ui:1.5.0")
}

Einen ExoPlayer erstellen

Ein ExoPlayer wird aus einem Context erstellt. Sie übergeben ihm ein MediaItem (eine URL oder lokale Datei), rufen prepare() auf und starten die Wiedergabe. Der Player verwendet eigene Threads, sodass die Benutzeroberfläche nicht blockiert wird.

Wichtig: Ein Player hält Systemressourcen und muss freigegeben werden. Mehr dazu gleich.

import android.content.Context
import androidx.media3.common.MediaItem
import androidx.media3.exoplayer.ExoPlayer

fun createPlayer(context: Context, url: String): ExoPlayer {
    val player = ExoPlayer.Builder(context).build()
    player.setMediaItem(MediaItem.fromUri(url))
    player.prepare()
    player.playWhenReady = true
    return player
}

Audio abspielen

Bei der reinen Audiowiedergabe ist die Einrichtung identisch. Sie verweisen mit dem MediaItem einfach auf eine Audio-URL (mp3, aac usw.). Es gibt keine Ansicht zur Anzeige, daher steuern Sie die Wiedergabe über das Player-Objekt: play(), pause(), seekTo().

Damit können Sie bereits einen Podcast- oder Musik-Player erstellen.

import androidx.media3.common.MediaItem
import androidx.media3.exoplayer.ExoPlayer

fun playPodcast(player: ExoPlayer, audioUrl: String) {
    player.setMediaItem(MediaItem.fromUri(audioUrl))
    player.prepare()
    player.play()
}

fun togglePause(player: ExoPlayer) {
    if (player.isPlaying) player.pause() else player.play()
}

Den Player in Compose merken

In Compose sollten Sie den Player nur einmal erstellen und über Recompositions hinweg beibehalten. Verwenden Sie remember, damit nicht bei jeder Rekombination ein neuer Player erstellt wird.

Kombinieren Sie dies mit einer ordnungsgemäßen Bereinigung (nächste Szene), damit keine Ressourcen verloren gehen.

import androidx.compose.runtime.Composable
import androidx.compose.runtime.remember
import androidx.compose.ui.platform.LocalContext
import androidx.media3.common.MediaItem
import androidx.media3.exoplayer.ExoPlayer

@Composable
fun rememberPlayer(url: String): ExoPlayer {
    val context = LocalContext.current
    return remember {
        ExoPlayer.Builder(context).build().apply {
            setMediaItem(MediaItem.fromUri(url))
            prepare()
        }
    }
}

Den Player freigeben

Ein Player hält Codecs, Puffer und den Audiofokus aktiv. Wenn Sie ihn nicht freigeben, verursachen Sie ein Speicherleck und die Wiedergabe kann fortgesetzt werden, obwohl der Bildschirm nicht mehr angezeigt wird. In Compose führt DisposableEffect die Bereinigung aus, wenn das Composable die Composition verlässt.

Rufen Sie dort immer player.release() auf.

import androidx.compose.runtime.Composable
import androidx.compose.runtime.DisposableEffect
import androidx.media3.exoplayer.ExoPlayer

@Composable
fun ManagedPlayer(player: ExoPlayer) {
    DisposableEffect(player) {
        onDispose {
            player.release()
        }
    }
    // ... use player here
}

Video mit PlayerView anzeigen

Media3 stellt eine fertige PlayerView mit Steuerelementen bereit. Compose besitzt kein natives Video-Composable. Daher betten Sie die View mit AndroidView ein und verbinden den Player mit ihr.

Damit erhalten Sie Wiedergabe/Pause, eine Suchleiste und Vollbild kostenlos dazu.

import androidx.compose.runtime.Composable
import androidx.compose.ui.Modifier
import androidx.compose.ui.viewinterop.AndroidView
import androidx.media3.exoplayer.ExoPlayer
import androidx.media3.ui.PlayerView

@Composable
fun VideoPlayer(player: ExoPlayer, modifier: Modifier = Modifier) {
    AndroidView(
        factory = { context ->
            PlayerView(context).apply {
                this.player = player
            }
        },
        modifier = modifier
    )
}

Ein vollständiger Videobildschirm

Fügen wir alles zusammen: Erstellen Sie den Player, merken Sie ihn, verbinden Sie ihn mit einer PlayerView und geben Sie ihn bei der Freigabe frei. Dies ist ein eigenständiger Videobildschirm, den Sie wiederverwenden können.

import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.layout.height
import androidx.compose.runtime.*
import androidx.compose.ui.Modifier
import androidx.compose.ui.platform.LocalContext
import androidx.compose.ui.unit.dp
import androidx.compose.ui.viewinterop.AndroidView
import androidx.media3.common.MediaItem
import androidx.media3.exoplayer.ExoPlayer
import androidx.media3.ui.PlayerView

@Composable
fun VideoScreen(videoUrl: String) {
    val context = LocalContext.current
    val player = remember {
        ExoPlayer.Builder(context).build().apply {
            setMediaItem(MediaItem.fromUri(videoUrl))
            prepare()
            playWhenReady = true
        }
    }
    DisposableEffect(Unit) { onDispose { player.release() } }

    AndroidView(
        factory = { PlayerView(it).apply { this.player = player } },
        modifier = Modifier.fillMaxWidth().height(220.dp)
    )
}

Den Wiedergabestatus verfolgen

Um Ihre Benutzeroberfläche zu aktualisieren (etwa ein Wiedergabe-/Pause-Symbol oder einen Fortschrittsbalken), hören Sie den Player mit einem Player.Listener ab. Er meldet Zustandsänderungen wie Pufferung, Bereitschaft und Ende sowie, ob die Wiedergabe aktiv ist.

Fügen Sie den Listener hinzu, sobald der Bildschirm angezeigt wird, und entfernen Sie ihn bei der Freigabe.

import androidx.media3.common.Player
import androidx.media3.exoplayer.ExoPlayer

fun observe(player: ExoPlayer, onPlaying: (Boolean) -> Unit): Player.Listener {
    val listener = object : Player.Listener {
        override fun onIsPlayingChanged(isPlaying: Boolean) {
            onPlaying(isPlaying)
        }
        override fun onPlaybackStateChanged(state: Int) {
            when (state) {
                Player.STATE_BUFFERING -> { /* show spinner */ }
                Player.STATE_READY -> { /* ready */ }
                Player.STATE_ENDED -> { /* finished */ }
            }
        }
    }
    player.addListener(listener)
    return listener
}

Beim Wechsel in den Hintergrund pausieren

Bei Inline-Videos (nicht bei einer Musik-App) möchten Sie die Wiedergabe normalerweise pausieren, wenn der Benutzer den Bildschirm verlässt, und fortsetzen, wenn er zurückkehrt. Sie können die Wiedergabe an den Compose-Lifecycle binden, indem Sie den Lifecycle beobachten und bei ON_PAUSE pausieren.

So wird kein Video abgespielt, das der Benutzer nicht sehen kann, und der Akku wird geschont.

import androidx.compose.runtime.*
import androidx.compose.ui.platform.LocalLifecycleOwner
import androidx.lifecycle.Lifecycle
import androidx.lifecycle.LifecycleEventObserver
import androidx.media3.exoplayer.ExoPlayer

@Composable
fun PauseWithLifecycle(player: ExoPlayer) {
    val lifecycleOwner = LocalLifecycleOwner.current
    DisposableEffect(lifecycleOwner) {
        val observer = LifecycleEventObserver { _, event ->
            when (event) {
                Lifecycle.Event.ON_PAUSE -> player.pause()
                Lifecycle.Event.ON_RESUME -> player.play()
                else -> {}
            }
        }
        lifecycleOwner.lifecycle.addObserver(observer)
        onDispose { lifecycleOwner.lifecycle.removeObserver(observer) }
    }
}

Hintergrundaudio mit MediaSession

Für Audio, das weiter abgespielt werden soll, wenn sich die App im Hintergrund befindet (Musik, Podcasts), kapseln Sie die Wiedergabe in einem MediaSessionService. Dadurch wird sie in die Systemsteuerung, den Sperrbildschirm und Bluetooth-Tasten integriert.

Das ist aufwendiger, aber die Grundidee besteht darin, Ihren Player über eine MediaSession bereitzustellen.

import androidx.media3.exoplayer.ExoPlayer
import androidx.media3.session.MediaSession
import androidx.media3.session.MediaSessionService

class PlaybackService : MediaSessionService() {
    private var session: MediaSession? = null

    override fun onCreate() {
        super.onCreate()
        val player = ExoPlayer.Builder(this).build()
        session = MediaSession.Builder(this, player).build()
    }

    override fun onGetSession(controllerInfo: MediaSession.ControllerInfo) = session

    override fun onDestroy() {
        session?.run { player.release(); release() }
        session = null
        super.onDestroy()
    }
}

Schnelltest

Welche Compose-API sollten Sie in einem Compose-Bildschirm verwenden, der einen ExoPlayer enthält, um den Player freizugeben, wenn der Bildschirm die Composition verlässt?

Zusammenfassung

Sie haben Audio- und Videowiedergabe hinzugefügt:

Verwenden Sie Media3 ExoPlayer, den modernen Ersatz für MediaPlayer.
Erstellen Sie einen Player, setzen Sie ein MediaItem, rufen Sie prepare() und anschließend play() auf.
Merken Sie den Player in Compose mit remember und geben Sie ihn in onDispose von DisposableEffect frei.
Zeigen Sie Videos an, indem Sie PlayerView mit AndroidView einbetten.
Verfolgen Sie den Status mit einem Player.Listener. Verwenden Sie für Hintergrundaudio einen MediaSessionService.

Damit ist der Kurs „Images & Media Loading with Coil“ abgeschlossen. Sie können jetzt Bilder flüssig laden und Medien auf die moderne Android-Art abspielen.

Häufig gestellte Fragen

Ist die Lektion „Audio und Video abspielen“ kostenlos?

Ja — der vollständige Text von „Audio und Video abspielen“ ist hier im Web kostenlos zu lesen. Um sie interaktiv zu üben (integrierter Code-Editor und 24/7 KI-Tutor) und den Rest des Android Academy-Kurses freizuschalten, upgrade auf CoddyKit PRO. Der Android Academy-Kurs umfasst insgesamt 4 Lektionen.

Was lerne ich in „Audio und Video abspielen“?

Einfache Medienwiedergabe in Android Du übst Android Academy mit praktischem Code, den du direkt im Browser ausführst, und ein 24/7 KI-Tutor beantwortet deine Fragen während du die Lektion bearbeitest.

Brauche ich Erfahrung, um Android Academy zu starten?

Keine Vorkenntnisse erforderlich. Android Academy auf CoddyKit ist für Anfänger bis fortgeschrittene Lernende strukturiert, sodass du hier starten oder von Anfang an beginnen und in deinem eigenen Tempo voranschreiten kannst. Dies ist Lektion 4 von 4.

Wie lange dauert die Lektion „Audio und Video abspielen“?

Die meisten CoddyKit-Lektionen dauern etwa 5–10 Minuten. Jede ist kompakt und interaktiv, sodass du stetig Fortschritte machst und genau dort weitermachst, wo du aufgehört hast – im Web und in der App.

Kann ich in dieser Android Academy-Lektion Code schreiben und ausführen?

Ja. Jede Android Academy-Lektion enthält einen integrierten Code-Editor, sodass du echten Code direkt in deinem Browser schreibst und ausführst und sofort KI-Feedback erhältst — ohne lokale Einrichtung erforderlich.

Alle Lektionen in diesem Kurs

← Zurück zu Android Academy