Android ExoPlayer 동영상 플레이어 구현하기 (With Compose) (1)

🔥 ExoPlayer를 사용하여 동영상 플레이어를 구현하고, Compose를 활용하여 전체 화면 플레이어, 미니 플레이어, 기본 플레이어를 구현하는 방법을 공유하려고 한다.

Android 에서 동영상 플레이어 라이브러리로 가장 유명한 라이브러리 중 하나는 ExoPlayer이다. 현재는 Media3에 통합되어 Player 기본 구현형으로 ExoPlayer를 사용할 수 있다.

우선 이번 글에서는 ExoPlayer를 Compose에서 구현하는 기본적인 방법을 소개하고자 한다.

공식 문서 : https://developer.android.com/media/media3/exoplayer/hello-world?hl=ko

build.gradle

// exoplayer
    implementation("androidx.media3:media3-exoplayer:1.3.1")
    implementation("androidx.media3:media3-ui:1.3.1")

Compose

Compose에서는 아직 ExoPlayer가 준비되어 있지 않으므로 AndroidView를 활용하여 표시해준다.
인자로 넣어준 VideoUri 에는 실제 비디오 주소를 넣어준다.
세부적인 설정이나 사이즈 등은 ExoPlayer에 추가 설정하거나 modifier에 설정할 수 있다.

@OptIn(UnstableApi::class)
@Composable
fun ExoPlayerView(
    context: Context,
    videoUri: String,
    modifier: Modifier = Modifier
) {
    // Initialize ExoPlayer
    val exoPlayer = remember { ExoPlayer.Builder(context).build() }

    // MediaSource를 생성하기 위한 DataSource.Factory 인스턴스 준비
    val dataSourceFactory = DefaultDataSource.Factory(context)

    // Create a MediaSource
    val mediaSource = remember(videoUri) {
        ProgressiveMediaSource.Factory(dataSourceFactory)
            .createMediaSource(
                MediaItem.fromUri(Uri.parse(videoUri))
            )
    }

    // Uri 변경 시마다 Exoplayer 셋팅
    LaunchedEffect(mediaSource) {
        exoPlayer.setMediaSource(mediaSource)
        exoPlayer.prepare()
        exoPlayer.playWhenReady = true // 자동 재생
    }

    // 생명주기 종료 시 Exoplayer 메모리 해제
    DisposableEffect(Unit) {
        onDispose {
            exoPlayer.release()
        }
    }

    // Exoplayer with AndroidView
    AndroidView(
        factory = { ctx ->
            PlayerView(ctx).apply {
                player = exoPlayer
                resizeMode = AspectRatioFrameLayout.RESIZE_MODE_FILL
            }
        },
        modifier = modifier
    )
}