Skip to main content

Getting started

Installation​

  1. Create a new Jetpack Compose app or set up Compose in your existing Android app by following the Compose quick start guide.
  2. Add the native THEOplayer Android SDK to your project by following these installation instructions.
  3. Add the THEOplayer Maven repository to your project-level settings.gradle file: 
    dependencyResolutionManagement {
        repositories {
            google()
            mavenCentral()
            maven { url "https://maven.theoplayer.com/releases" }
        }
    }
  4. Add Open Video UI as a dependency in your module-level build.gradle file: 
    dependencies {
        implementation "com.theoplayer.theoplayer-sdk-android:core:5.+"
        implementation "com.theoplayer.android-ui:android-ui:1.+"
    }

Usage​

Default UI​

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.

Custom UI​

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