안드로이드 ExoPlayer2 전체화면 만들기.

유튜브 처럼 전체화면을 구현하고 싶었다.

 

내가 구현한 방법은 ExoPlayer의 비디오 컨트롤러를 변경하고 

전체화면 버튼을 눌렀을때 다른 액티비티로 이동하여 영상을 화면 가득히 보이게 하였다.

 

우선 전체화면이 될 액티비티를 만들고 

AndroidManifest.xml 에 screenOrientation 과 theme 를 변경하였다.

screenOrientation 을 fullSensor 를 하면 휴대폰을 어떤 방향으로 돌리든 화면이 돌아간다.

<activity
            android:name=".FullScreenActivity"
            android:screenOrientation="fullSensor"
            android:theme="@style/Theme.AppCompat.Light.NoActionBar" />

 

그리고 새롭게 만들 컨트롤러의 레이아웃을 만든다.

 

custom_controls.xml

<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <ImageButton
        android:id="@id/exo_play"
        style="@style/ExoMediaButton.Play"
        android:layout_width="100dp"
        android:layout_height="100dp"
        android:layout_gravity="center"
        android:background="#CC000000" />

    <ImageButton
        android:id="@id/exo_pause"
        style="@style/ExoMediaButton.Pause"
        android:layout_width="100dp"
        android:layout_height="100dp"
        android:layout_gravity="center"
        android:background="#CC000000" />

    <TextView
        android:id="@id/exo_position"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="bottom|left"
        android:layout_marginBottom="36sp"
        android:includeFontPadding="false"
        android:paddingLeft="4dp"
        android:paddingRight="4dp"
        android:textColor="#FFBEBEBE"
        android:textSize="14sp"
        android:textStyle="bold" />

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="bottom|left"
        android:layout_marginLeft="45sp"
        android:layout_marginBottom="36sp"
        android:text="/" />

    <TextView
        android:id="@id/exo_duration"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="bottom|left"
        android:layout_marginLeft="50sp"
        android:layout_marginBottom="36sp"
        android:includeFontPadding="false"
        android:paddingLeft="4dp"
        android:paddingRight="4dp"
        android:textColor="#FFBEBEBE"
        android:textSize="14sp"
        android:textStyle="bold" />

    <ImageButton
        android:id="@+id/exo_fullscreen_button"
        style="@style/ExoMediaButton"
        android:layout_gravity="end|bottom"
        android:layout_marginBottom="36sp"
        android:src="@drawable/ic_fullscreen_white_24dp" />

    <com.google.android.exoplayer2.ui.DefaultTimeBar
        android:id="@id/exo_progress"
        style="?android:attr/progressBarStyleHorizontal"
        android:layout_width="match_parent"
        android:layout_height="32dp"
        android:layout_gravity="center|bottom"
        android:focusable="false" />


</FrameLayout>

 

이제 동영상이 재생될 액티비티 레이아웃에 PlayerView를 배치한다.

 

<com.google.android.exoplayer2.ui.PlayerView
                android:id="@+id/ExoplayerView"
                android:layout_width="match_parent"
                android:layout_height="300dp"
                android:layout_gravity="center"
                android:layout_marginBottom="10sp"
                app:fastforward_increment="5000"
                app:rewind_increment="5000"
                app:controller_layout_id="@layout/custom_controls"
                android:backgroundTint="#000000" />

app:controller_layout_id="@layout/custom_controls" 

 

위에 코드가 새롭게 만든 컨트롤러로 변경이 되게 한다.

 

 // 동영상 전체 화면.
        exo_fullscreen_button.setOnClickListener {
            var videoUrl = selectedvideo.toString()
            var currentPos = player?.currentPosition
            val intent = Intent(this,FullScreenActivity::class.java)
            intent.putExtra("videoUrl",videoUrl)
            intent.putExtra("currentPos",currentPos)
            startActivity(intent)
        }

액티비티에서 이제 전체화면 버튼을 눌렀을때 FullScreenActivity 로 이동할수 있게 한다.

videoUrl 은 현재 재생되고 있는 영상의 Url 이고 

currentPos 는 영상이 시작될 위치를 나타낸다.

 

class FullScreenActivity : AppCompatActivity() { 


    private var player: SimpleExoPlayer? = null

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_full_screen)

        player = ExoPlayerFactory.newSimpleInstance(this, DefaultTrackSelector())
        playerView.setPlayer(player)

        val intent = intent
        val videoUrl = intent.getStringExtra("videoUrl")
        val currentPos = intent.getLongExtra("currentPos", 0)


        //미디어 소스 객체 생성
        val factory: DataSource.Factory = DefaultDataSourceFactory(this, "Ex90Exoplayer")
        val mediaFactory = ProgressiveMediaSource.Factory(factory)

        val mediaSource =
            mediaFactory.createMediaSource(Uri.parse(videoUrl))
        player!!.prepare(mediaSource)
        player!!.setPlayWhenReady(true)
        // 사용자가 전체화면 버튼을 누른 시점부터 재생한다.
        player!!.seekTo(currentPos)
    }
}

FullScreenActivity 의 전체 소스이다. 

이렇게 하면 전체화면 완성.