티스토리 뷰
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
}
})
'Mobile > Android' 카테고리의 다른 글
[Android] ListAdapter로 리스트 효율적으로 관리하기 (with DiffUtil) (2) | 2020.06.12 |
---|---|
[Android] Context 제대로 알고 사용하자! (0) | 2020.06.10 |
[Android] RecyclerView의 데이터 LiveData로 관리하기 (0) | 2020.05.26 |
[Android] Retrofit2 + Gson 사용하기 (with Kotlin) (0) | 2020.05.07 |
[Android] Properties 값 Java/xml 파일에서 읽어오기 (0) | 2020.04.08 |
- Total
- Today
- Yesterday
- 내용제공자
- AndroidStudio
- Python
- kotlin
- SOCKET
- Algorithm
- MSSQL
- SQLD
- ViewHolder
- DiffUtil
- SQL
- Java
- RuntimeException
- AsyncListDiffer
- 위험권한
- Android
- RecyclerView
- 프로그래머스
- SQL Server
- 부스트코스
- pecs
- SQLiteOpenHelper
- 안드로이드
- GitHub
- python3
- gson
- 알고리즘
- 파이썬
- personal access token
- covariance
일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
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 |