post-custom-banner

배경

안드로이드에서 동영상을 다루게 된다면 대부분이 사용하는 Exoplayer이다.

Exoplayer는 많지 않은 설정으로 동영상을 재생시킬 수 있고
(대부분은 Glide처럼 Exoplayer의 load하는 부분에 동영상 url만 넣어주면 실행이 된다.)
VideoPlayerManager와 같이 일시정지, 재생, 스킵등 여러가지를 제공하며 많은 확장자들을 지원하고 있다.

이중에서 이번에 다뤄볼 이야기는 ExoPlayer의 깜빡임 현상이다.
ExoPlayer를 다뤄봤다면 시작이 어떻게 되는지 생각해 볼 수 있다.

  • Exoplayer.Builder를 통해서 ExoPlayer를 생성하고 사용자가 필요한 만큼 설정을 하여 prepare와 init을 통하여 Exoplayer의 준비를 마친다.
  • 준비가 끝났다면 서버로부터 받아온 url을 이용하여 동영상을 재생시킨다.
  • 동영상이 재생이 된다.

하지만 여기에서 2번과 3번사이에 검정색 화면으로 깜빡이는 현상이 종종 발생한다.

이유는 shutterBackground라는 녀석의 존재때문이다.
재생 바로 직전 shutterBackground가 보여지고 동영상이 재생되는데 default값이 black으로 되어있기 때문에 별 다른 조치를 취하지 않았다면 동영상 재생시 검정색 화면이 블링크 될것이다.

이 부분을 수정해보자


shutterBackground

Player의 속성중에

app:shutter_background_color="@android:color/transparent"

라는 녀석이 있다. 이 녀석을 transparent로 변경시켜주면 셔터의 색이 변경된다.

하지만 이것만으로는 exoplayer의 깜박임 현상이 해결되지 않고 부자연스러운 상황이 연출된다.

thumbnail겹침

Exoplayer위에 같은 사이즈의 ImageView를 설정한다.
서버로부터 thumbnail용 이미지 url을 받아 위에 띄워주고 그 밑에서 exoplayer를 실행시킬 준비를 한다.
그리고 listener를 통하여 exoplayer가 재생이 될때 thumbnail Visibility를 삭제시켜준다.
하지만 Exoplayer는 편한 만큼 많은 Listener를 제공하고 있다.
어떤거 골라야할까?

VideoListener

이번 포스트의 사실상 가장 핵심인 녀석이다.

SimpleExoPlayer.addVideoListener(object : VideoListener {
    override fun onRenderedFirstFrame() {
        super.onRenderedFirstFrame()
        onRenderedEvent.invoke()
    }
})

위의 리스너가 하는 역할은 다음과 같다.

  • Exoplayer에 붙어있다.
  • 동영상이 재생되고나서 직후에 불리는 것이 아니다.
  • FirstFrame 단어 그대로 첫 프레임이 화면에 나타난 직후에 불리게 된다.

여기에서 3번째 이유가 중요한데 FirstFrame이 불리기 전까지의 Exoplayer상태를 생각해보자

  1. 일반적으로 Exoplayer 세팅
  2. shutterBackground 노출
  3. 동영상 시작

이중에 2번을 캐치할수 있다는 점이 장점이다.

따라서 최종적으로 다음과 같이 작동한다.

  • 썸네일을 받아 player어와 동일한 사이즈로 위에 덮어씌우고 있다.
  • player에 RenderedFirstFrame관련 리스너를 달아서 이벤트를 전달시킨다.
  • 세팅 → ShutterBackground 노출 → 첫프레임
  • 첫프레임이 시작되면 player위에 덮고 있던 thumbnail을 제거시켜준다.

여기에서 착각하면 안될 부분은 player는 thumbnail아래에 존재할 뿐 보여지는 VISIBLITY.VISIBLE상태라는 것이다.

만약에 여기에서 Player가 VISIBILITY.GONE이라면 onRenderedFirstFrame에 감지되지 않는다.
전적으로 ui에서 firstframe이 나오고 난 후 불려지기 때문이다.

profile
러닝커브를 따라서 등반중입니다.
post-custom-banner

0개의 댓글