https://github.com/js-bhavyansh/exo_player
Jetpack Compose example app showcasing ExoPlayer with online, raw, and YouTube video playback.
https://github.com/js-bhavyansh/exo_player
android exoplayer jetpack-compose kotlin media-playback navigation-compose serialization video-player youtube-integration
Last synced: about 1 month ago
JSON representation
Jetpack Compose example app showcasing ExoPlayer with online, raw, and YouTube video playback.
- Host: GitHub
- URL: https://github.com/js-bhavyansh/exo_player
- Owner: js-bhavyansh
- Created: 2024-07-27T11:39:48.000Z (almost 2 years ago)
- Default Branch: master
- Last Pushed: 2024-08-30T08:22:18.000Z (almost 2 years ago)
- Last Synced: 2025-09-07T06:37:09.380Z (10 months ago)
- Topics: android, exoplayer, jetpack-compose, kotlin, media-playback, navigation-compose, serialization, video-player, youtube-integration
- Language: Kotlin
- Homepage:
- Size: 20.8 MB
- Stars: 1
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# ExoPlayer Example
This repository demonstrates how to use ExoPlayer in a Jetpack Compose application. It includes three different player implementations:
- **Online Player**: Streams video from an online URL.
- **Raw Player**: Plays a video stored in the raw resources of the app.
- **YouTube Player**: Embeds a YouTube video using a `WebView`.
## Prerequisites
- Android Studio with Jetpack Compose setup
- ExoPlayer dependency in your `build.gradle` file
- Internet permissions if using the Online Player
1. Clone the repository:
```sh
git clone https://github.com/Bhavyansh03-tech/Exo_Player.git
```
2. Open the project in Android Studio.
3. Build the project and run it on an emulator or a physical device.
## Screenshots
## Setup
1. **Add Dependencies**
Make sure you have the following dependencies in your `build.gradle` file:
```toml
[libraries]
# YOUTUBE PLAYER :->
androidx-webkit = { module = "androidx.webkit:webkit", version.ref = "webkit" }
# MEDIA EXO PLAYER :->
androidx-media3-exoplayer = { module = "androidx.media3:media3-exoplayer", version.ref = "media3Exoplayer" }
androidx-media3-exoplayer-hls = { module = "androidx.media3:media3-exoplayer-hls", version.ref = "media3Exoplayer" }
androidx-media3-ui = { module = "androidx.media3:media3-ui", version.ref = "media3Exoplayer" }
```
2. **Add Internet Permission (for Online Player)**
In your `AndroidManifest.xml`, add the following permission:
```xml
```
## Composables
### OnlinePlayer
Streams video from an online URL.
```kotlin
// Media Item :->
val mediaItem = MediaItem.fromUri("https://cdn.pixabay.com/video/2024/04/18/208442_large.mp4") // Apply Changes.
// Media source :->
val mediaSource: MediaSource = ProgressiveMediaSource.Factory(DefaultHttpDataSource.Factory()) // Add this.
.createMediaSource(mediaItem)
val exoPlayer = remember {
ExoPlayer.Builder(context).build().apply {
setMediaSource(mediaSource) // Apply Changes.
prepare()
playWhenReady = true
}
}
```
### RawPlayer
Plays a video stored in the raw resources of the app.
```kotlin
@Composable
fun RawPlayer() {
// Lifecycle :->
var lifecycle by remember {
mutableStateOf(Lifecycle.Event.ON_CREATE)
}
// Get context :->
val context = LocalContext.current
// Media Item :->
val mediaItem = MediaItem.fromUri("android.resource://${context.packageName}/${R.raw.sample}")
// Media source :->
val exoPlayer = remember {
ExoPlayer.Builder(context).build().apply {
setMediaItem(mediaItem)
prepare()
playWhenReady = true
}
}
// Lifecycle for composable :->
val lifecycleOwner = LocalLifecycleOwner.current
DisposableEffect(key1 = lifecycleOwner) {
val observer = LifecycleEventObserver { _, event ->
lifecycle = event
}
lifecycleOwner.lifecycle.addObserver(observer)
onDispose {
exoPlayer.release()
lifecycleOwner.lifecycle.removeObserver(observer)
}
}
// Android View :->
AndroidView(
modifier = Modifier
.fillMaxWidth()
.aspectRatio(16f / 9f),
factory = {
PlayerView(context).also { playerView ->
playerView.player = exoPlayer
}
},
update = {
when (lifecycle){
Lifecycle.Event.ON_RESUME -> {
it.onPause()
it.player?.pause()
}
Lifecycle.Event.ON_PAUSE -> {
it.onResume()
}
else -> Unit
}
}
)
}
```
### YoutubePlayer
Embeds a YouTube video using a `WebView`.
```kotlin
@Composable
fun YoutubePlayer(videoId: String) {
AndroidView(
modifier = Modifier.fillMaxSize().padding(top = 25.dp),
factory = { context ->
WebView(context).apply {
webViewClient = WebViewClient()
settings.javaScriptEnabled = true
loadUrl("https://youtu.be/$videoId")
}
}
)
}
```
## Contributing
Contributions are welcome! Please fork the repository and submit a pull request for any improvements or bug fixes.
1. Fork the repository.
2. Create your feature branch (`git checkout -b feature/your-feature`).
3. Commit your changes (`git commit -am 'Add some feature'`).
4. Push to the branch (`git push origin feature/your-feature`).
5. Create a new Pull Request.
## Contact
For questions or feedback, please contact [@Bhavyansh03-tech](https://github.com/Bhavyansh03-tech) on GitHub or connect with me on [LinkedIn](https://www.linkedin.com/in/bhavyansh03/).
---