Exoplayer + Compose
By Moro
Could you help Mr. Wick?
Yes sir!
ExoPlayer + media3 library. The best fire power you can have to play videos.
Nice...
First, we need to add the dependency…
[versions]
media3 = “1.1.0”
…
[libraries]
media3_base = { group = “androidx.media3”, name = “media3-exoplayer”, version.ref = “media3” }
media3_ui = { group = “androidx.media3”, name = “media3-ui”, version.ref = “media3” }
…
[bundles]
media3 = [“media3_base”, “media3_ui” ]
dependencies {
implementation(libs.bundles.media3)
}
Second, we need to prepare the ExoPlayer object…
@Composable
fun PlayerComponent(url: String) {
val context = LocalContext.current
val exoplayer = remember {
val mediaItem = MediaItem.Builder()
.setUri(url)
.build()
ExoPlayer.Builder(context).build().apply {
setMediaItem(mediaItem)
prepare()
playWhenReady = true
}
}
…
}
Convert url to a mediaItem object
If you want to play the video as soon the player is ready
We can also add a listener if we desire to build a custom player
@Composable
fun PlayerComponent(url: String) {
…
val exoplayer = remember {
…
ExoPlayer.Builder(context).build().apply {
...
addListener(...)
}
}
…
}
@Composable
fun PlayerComponent(url: String) {
…
val exoplayer = …
AndroidView(
modifier = Modifier
.fillMaxWidth()
.height(200.dp)
.align(Alignment.TopCenter),
factory = {
PlayerView(it).apply {
player = exoplayer
useController = true
}
}
)
}
If you want to build a custom player using your own widgets, you need to disable the useController
Now, let’s call the PlayerView. Currently, ExoPlayer doesn’t provide us a Composable component :(
Mr. Wick… wow
In three seconds, he built a video player app using ExoPlayer. Fascinating!