A component library for building a world-class video player experience powered by the THEOplayer Android SDK.
Note This project is under active development. While we believe it's ready for use in production, not all features are available in this first release. If you find a problem or have an idea for a new feature, don't hesitate to open an issue!
THEOplayer Android SDK version 4.x comes with a built-in UI based on video.js running within a WebView
inside of a THEOplayerView
. This new UI aims to solve some limitations from the old approach:
Add the THEOplayer Maven repository to your project-level settings.gradle
file:
dependencyResolutionManagement {
repositories {
google()
mavenCentral()
maven { url = uri("https://maven.theoplayer.com/releases") }
}
}
Alternatively, you can use the GitHub Packages mirror.
build.gradle
file:
dependencies {
implementation "com.theoplayer.theoplayer-sdk-android:core:5.+"
implementation "com.theoplayer.android-ui:android-ui:1.+"
}
DefaultUI
provides a fully-featured video player experience with minimal setup.
import android.os.Bundle
import androidx.activity.ComponentActivity
import androidx.activity.compose.setContent
import com.theoplayer.android.api.THEOplayerConfig
import com.theoplayer.android.api.source.SourceDescription
import com.theoplayer.android.ui.DefaultUI
import com.theoplayer.android.ui.theme.THEOplayerTheme
class MainActivity : ComponentActivity() {
override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
setContent {
THEOplayerTheme(useDarkTheme = true) {
DefaultUI(
config = THEOplayerConfig.Builder().build(),
source = SourceDescription.Builder("https://cdn.theoplayer.com/video/big_buck_bunny/big_buck_bunny.m3u8")
.build(),
title = "Big Buck Bunny"
)
}
}
}
}
See the demo app for a complete and working example.
If you want to fully customize your video player layout, you can use a UIController
instead.
setContent {
UIController(
config = THEOplayerConfig.Builder().build(),
source = SourceDescription.Builder("https://cdn.theoplayer.com/video/big_buck_bunny/big_buck_bunny.m3u8")
.build(),
// Choose your own layout using the provided components (or your own!)
bottomChrome = {
SeekBar()
Row {
PlayButton()
MuteButton()
Spacer(modifier = Modifier.weight(1f))
FullscreenButton()
}
}
)
}