티스토리 뷰

ExoPlayer는 구글에서 만든 동영상 재생 라이브러리이다. MediaPlayer보다 훨씬 안정적이고 다양한 기능을 지원하기 때문에 유튜브나 인스타그램 등 많은 곳에서 ExoPlayer를 사용한다.

그래서 진행중인 프로젝트에서 ExoPlayer를 사용해 동영상이 준비되기 전에는 썸네일 이미지를 보여주고, 준비가 완료되면 자연스럽게 동영상을 재생하려고 했는데 재생 직전 검은 화면으로 깜빡이는 현상을 확인했다.

이번 포스팅에서는 이 문제의 원인과 해결 방법을 공유하려고 한다.

 


 

ExoPlayer는 동영상을 재생하는 Player가 있고, 화면에 보여주는 PlayerView에 Player를 등록해서 사용한다.

그런데 PlayerView는 동영상을 재생하는 View이기 때문에 background 속성이 없고, 썸네일을 위한 기능은 없는 것 같았다.

artwork라는 속성으로 PlayerView의 백그라운드를 drawable로 지정할 수는 있지만 Bimap 이미지로는 설정할 수 없었다.

 

그렇기 때문에 동영상을 재생하기 위한 PlayerView와 크기가 동일한 ImageView를 위에 두고 PlayerView가 준비되기 전에는 ImageView로 썸네일 이미지를 보여주고 동영상 재생 준비가 되었을 때 ImageView를 invisible 시켜 PlayerView를 보여주는 방식을 사용했다.

 

그런데, Player에서 재생 준비가 된 시점에서 PlayerView를 보여주면 잠시 검은 화면이 보이면서 깜빡이는 현상이 있었다.

artwork를 지정하면 검은 화면이 아닌 지정한 artwork가 나온다. 그래서 artwork를 투명한 색상으로 설정해 봤지만 여전히 검은 화면이 나왔다..😭

 

이 문제를 해결하기 위해 여러 삽질을 했지만 결국 이 문제의 궁극적인 원인은 동영상을 재생할 때 첫 프레임이 그려지기 전까지 잠깐 동안 검은 화면이 보이게 되는 것이었다.

 

이를 위해 ExoPlayer에서는 첫 프레임이 그려진 뒤 호출되는 콜백 함수가 있었고, 이를 이용해 첫 프레임이 그려진 뒤에 ImageView를 invisible 시켜 PlayerView를 보여주는 것으로 해결했다.

simpleExoPlayer.addVideoListener(object : VideoListener {
    override fun onRenderedFirstFrame() {
        super.onRenderedFirstFrame()
        
        // 첫 프레임이 그려진 뒤에 썸네일 이미지뷰를 없앤다. (재생 전 깜빡이는 현상 방지)
        binding.thumbnailView.visibility = View.GONE
    }
})

 

댓글
공지사항
최근에 올라온 글
최근에 달린 댓글
Total
Today
Yesterday
링크
«   2024/05   »
1 2 3 4
5 6 7 8 9 10 11
12 13 14 15 16 17 18
19 20 21 22 23 24 25
26 27 28 29 30 31
글 보관함