9. VOD 보기

9.1. 화면 구성하기

화면 구성을 위해 SDK에서 FFView를 제공합니다. 이 View를 가지고 VOD 보는 화면 UI(xml 파일)에 구성합니다.

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout
   xmlns:android="http://schemas.android.com/apk/res/android"
   xmlns:app="http://schemas.android.com/apk/res-auto"
   xmlns:tools="http://schemas.android.com/tools"
   android:layout_width="match_parent"
   android:layout_height="match_parent">

  <com.jocoos.flipflop.view.FFView
     android:id="@+id/playerView"
     android:layout_width="match_parent"
     android:layout_height="match_parent"
    app:controller_layout_id="@layout/player_controller_view"
     android:background="@color/black"
     app:layout_constraintBottom_toBottomOf="parent"
     app:layout_constraintTop_toTopOf="parent" />

  …

</androidx.constraintlayout.widget.ConstraintLayout>

player_controller_view는 플레이어의 컨트롤러입니다. VOD를 볼 때 컨트롤러가 필요한 경우 원하시는 대로 가공하여 연결해 주시면 됩니다.

xml id	설명
exo_play	동영상 시작 버튼
exo_pause	동영상 중단 버튼
exo_progress	동영상 프로그레스 바
exo_position	동영상 플레이 시간

아래는 참고용 컨트롤러 예입니다.

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
   xmlns:android="http://schemas.android.com/apk/res/android"
   xmlns:app="http://schemas.android.com/apk/res-auto"
   android:id="@+id/player_controller"
   android:layout_width="match_parent"
   android:layout_height="wrap_content"
   android:layout_gravity="bottom"
   android:layout_marginTop="4dp"
   android:layout_marginBottom="24dp"
   android:gravity="center_vertical"
   android:orientation="horizontal">

   <ImageButton
       android:id="@+id/exo_play"
       android:layout_width="40dp"
       android:layout_height="40dp"
       android:background="@drawable/circle_white20"
       android:src="@drawable/ic_group_4_copy"
       android:scaleType="centerInside"
       android:contentDescription="@string/play"
       android:layout_marginStart="10dp" />

   <ImageButton
       android:id="@+id/exo_pause"
       android:layout_width="40dp"
       android:layout_height="40dp"
       android:background="@drawable/circle_white20"
       android:src="@drawable/ic_group_5"
       android:scaleType="centerInside"
       android:contentDescription="@string/pause"
       android:layout_marginStart="10dp" />

   <com.google.android.exoplayer2.ui.DefaultTimeBar
       android:id="@id/exo_progress"
       android:layout_width="0dp"
       android:layout_height="26dp"
       android:layout_weight="1"
       android:paddingStart="10dp"
       android:paddingEnd="10dp"
       app:bar_height="2dp"
       app:buffered_color="@color/white80"
       app:played_color="@color/white"
       app:scrubber_drawable="@drawable/circle_white"
       app:unplayed_color="@color/white20"/>

   <TextView android:id="@id/exo_position"
       android:layout_width="wrap_content"
       android:layout_height="wrap_content"
       android:includeFontPadding="false"
       android:paddingEnd="10dp"
       android:textColor="@color/white80"
       android:textSize="13sp"/>

</LinearLayout>

9.2. VOD를 보기 위한 인스턴스 생성

VOD를 보려면 VOD를 보기위한 인스턴스를 생성해야 합니다.

// video : VOD를 보기 위한 비디오 객체
// 보통의 경우 VOD 리스트를 가져오는 함수를 통해 라이브 정보를 가져올 수 있습니다.
// VOD 리스트를 가져오는 방법은 아래에서 설명합니다.
// VOD를 보기 위한 객체 생성
// sdk는 사용자 등록에서 받아온 인스턴스입니다.
val player = sdk.getPlayer(requireContext(), video)
// 화면 구성하기에서 구성한 뷰를 인스턴스에 연결합니다.
// bind.playerView : 1. 화면 구성하기에서 설정한 FFView
player.prepare(requireContext(), bind.playerView)

VOD를 보기위한 인스턴스를 얻으려면 Video 객체를 파라메터로 넣어주어야 합니다. 이를 위해 SDK에서는 라이브 리스트를 가져오기 위한 함수를 제공하고 있습니다.

사용 방법은 아래와 같습니다.

val page = 0 // zero-based page index
val size = 10 // the size of the page to be returned
when (val result = sdk.getVideos(page, size, null, VideoType.BROADCASTED)) {
  is FFResult.Success -> {
    // success
  }
  is FFResult.Failure -> {
    // error
  }
}

'getVideos' 함수에 사용할 수 있는 필드는 다음과 같습니다.

필드	설명
page	가져올 동영상의 페이지 번호
size	가져올 동영상의 개수
userId	사용자 ID. 지정 사용자의 동영상만 가져오고 싶을 때 사용
type	동영상의 타입. (BROADCASTED : 라이브를 진행했거나 진행중인 동영상, UPLOADED : 라이브가 아닌 업로드한 동영상)
state	동영상의 상태. (LIVE : 현재 라이브 중인 동영상, VOD : VOD로 볼 수 있는 동영상)

플레이어의 상태를 알고 싶으면 FFPlayerListener를 연결해줍니다.

// 상태 리스너를 연결합니다.
player.listener = object : FFPlayerListener { … }

함수	설명
onPrepared	동영상을 볼 준비가 되었음을 알려줍니다. prepare 함수 실행이 정상적으로 이루어지면 호출됩니다.
onStarted	동영상을 볼 수 있을 때 호출됩니다.
onChatMessageReceived	채팅 메시지가 들어오면 호출됩니다.
onStopped	동영상이 중단되면 호출됩니다.
omCompleted	동영상이 끝난 경우 호출됩니다.
onSeek	동영상이 지정 시간으로 이동한 경우에 호출됩니다.
onError	동영상을 보는 중 에러가 발생하면 호출됩니다.

9.3. 안드로이드 라이프사이클에 연결하기

VOD를 보기위해 생성한 player는 안드로이드의 라이프 사이클과 연결을 해주어야 합니다. 홈 화면으로 나갔거나 하는 경우 화면을 멈추어 주어야 하기 때문입니다.

아래와 같이 관련 함수를 호출해 주어야 합니다.

override fun onResume() {
  player.start()
  player.resume()
}

override fun onStop() {
  player.pause()
  player.stop()
  player.reset()
}

9.4. 채팅 보기

이전에 라이브중일 때 사용자들이 주고 받은 채팅 메시지를 볼 수 있습니다.

라이브중에 사용자들이 보낸 채팅 메시지가 FFPlayerListener의 onChatMessageReceived 리스너로 들어옵니다. 이 함수 안에서 받은 메시지에 대한 처리를 합니다.

override fun onChatMessageReceived(item: FFMessage) {
  // 받은 메시지  처리
  …
}