[Android] Compose에서 exoPlayer 활용 mp4 영상 재생

안드로이드에서 mp4 형식의 사용 방법 가이드 영상 파일을 넣어야 하는 작업이 생겼습니다.

새로운 화면을 만드는 겸 Compose를 기반으로 mp4 영상을 넣어봤네요.

 

ExoPlayer라는 오픈 소스 미디어 플레이어 라이브러리를 활용했습니다.

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

시작하기  |  Android media  |  Android Developers

 

먼저 app 수준의 gradle에 다음과 같이 라이브러리를 추가해줍니다.

    //ExoPlayer
    implementation 'androidx.media3:media3-exoplayer:1.3.1'
    implementation 'androidx.media3:media3-exoplayer-dash:1.3.1'
    implementation 'androidx.media3:media3-ui:1.3.1'
    implementation "androidx.compose.foundation:foundation:1.6.6"

 

 

이제 res - raw 폴더 생성하여 그 안에 재생의 대상이 될 mp4 파일을 넣어줍니다.

 

그다음, Activity 또는 Fragment 코드에서 ExoPlayer에 대한 초기화를 진행합니다.

private lateinit var exoPlayer: ExoPlayer
.
.
.
private fun initializePlayer() = with(binding) {
    exoPlayer = ExoPlayer.Builder(requireContext()).build()
    val mediaUri = R.raw.event_drag.getResourceUri(requireContext())
    val mediaItem = MediaItem.fromUri(mediaUri)
    exoPlayer.setMediaItem(mediaItem)
    exoPlayer.repeatMode = ExoPlayer.REPEAT_MODE_ALL
    exoPlayer.prepare()
    exoPlayer.playWhenReady = true
}

raw에 저장한 파일의 uri를 가져오고, 재생할 객체 MediaItem을 만들어 준 뒤 Player에 set 해줍니다.

repeatMdoe를 반복 유무를 선택할 수 있습니다. 무한 반복, 1회 반복 등이 있는데 무한 반복으로 설정했습니다.

prepare()로 플레이어 준비 요청을 보내고, playWhenReady를 true로 set 하면서 플레이어가 준비 완료되면 자동으로 영상이 재생됩니다.

 

AndroidView(
    factory = { context ->
        PlayerView(context).apply {
            layoutParams = FrameLayout.LayoutParams(
                ViewGroup.LayoutParams.MATCH_PARENT,
                ViewGroup.LayoutParams.MATCH_PARENT
            )
            this.setBackgroundColor(Color.TRANSPARENT)
            this.player = player
            this.overlayFrameLayout
            this.useController = false
            this.resizeMode = AspectRatioFrameLayout.RESIZE_MODE_ZOOM
        }
    }
)

실제로 영상이 재생되는 View인 PlayerView는 AndroidView를 활용하여 추가했습니다.
AndroidView는 기존의 Android UI 위젯이나 뷰를 Compose UI 시스템 안에 통합할 수 있게 해주는 기능입니다. 
따라서 아직 컴포즈 버전으로 존재하지 않는 PlayerView를 이를 통해 구성 가능합니다.

 

userController를 통해 사용자가 유튜브 화면처럼 재생 여부 조절 터치를 할 수 있는지 여부를 결정할 수 있습니다.

resize 모드는 화면 비율입니다 ZOOM을 통해 가운데를 중심으로 확대한 화면을 보이도록 했습니다.