본문 바로가기
안드로이드 코틀린

[Kotlin][Android] ExoPlayer를 사용하여 영상 플레이어 만들기

by teamnova 2021. 7. 13.
728x90

ExoPlayer 라이브러리를 사용하여 영상 플레이어를 만들어보겠습니다.

 

ExoPlayer 란?

 

오디오 및 비디오 관련 작업을 처리하는 Google에서 제공하는 라이브러리입니다.

 

참고)

https://exoplayer.dev/hello-world.html


라이브러리 추가

 

먼저, build.gradle 파일 안에 ExoPlayer 라이브러리를 사용하기 위해 아래 화면처럼

추가해주시고 Sync Now 버튼을 누르시면 라이브러리가 추가됩니다.

 

 

implementation 'com.google.android.exoplayer:exoplayer:2.11.8'

 

 

인터넷권한 추가

 

다른 사이트에서 영상파일을 가져와서 사용하기 위해 권한을 추가해줍니다.

 

 

<uses-permission android:name="android.permission.INTERNET" />

다음 예제에 사용할 화면을 만들어보겠습니다.

 

 

<activity_main.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"
    tools:context=".MainActivity">

    <com.google.android.exoplayer2.ui.PlayerView
        android:id="@+id/video_player_view"
        android:layout_width="match_parent"
        android:layout_height="match_parent"/>

</androidx.constraintlayout.widget.ConstraintLayout>

다음 예제에 사용할 코드를 작성하겠습니다.

 

<MainActivity.kt>

 

1. 예제에 사용할 변수 생성

 

아래 사진을 보시면 에러가 발생하고 있는데 이 부분은 다음 코드를 추가하면 해결 됩니다.

 

 

import com.google.android.exoplayer2.SimpleExoPlayer
import com.google.android.exoplayer2.ui.PlayerView


class MainActivity : AppCompatActivity() {
    private var videoPlayer: SimpleExoPlayer? = null
    private var sampleUrl = "https://www.learningcontainer.com/wp-content/uploads/2020/05/sample-mp4-file.mp4"
    private lateinit var video_player_view: PlayerView

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

        video_player_view = findViewById(R.id.video_player_view);

        // ExoPlayer 인스턴스를 생성하고 소스를 플레이에 할당하여 비디오 플레이어 초기화
        videoPlayer = SimpleExoPlayer.Builder(this).build()
        video_player_view?.player = videoPlayer
                buildMediaSource()?.let {
            videoPlayer?.prepare(it)
        }
    }
}

 

2. 영상 플레이어 컨트롤 기능 생성

 

스틱코드를 활용한다면, 클래스에서 'ex' 까지만 작성했을 때 'ExoPlayer 영상 컨트롤 기능 생성' 이벤트가 나타납니다.

 

'ExoPlayer 영상 컨트롤 기능 생성' 이벤트를 누를 경우 코드가 자동으로 완성됩니다.

 

코드들이 생기면서 에러가 사라지는 것을 확인할 수 있습니다.

 

 

<최종코드>

import androidx.appcompat.app.AppCompatActivity
import android.os.Bundle
import com.google.android.exoplayer2.source.MediaSource
import com.google.android.exoplayer2.source.ProgressiveMediaSource
import com.google.android.exoplayer2.upstream.DefaultDataSourceFactory
import android.net.Uri
import com.google.android.exoplayer2.SimpleExoPlayer
import com.google.android.exoplayer2.ui.PlayerView


class MainActivity : AppCompatActivity() {
    private var videoPlayer: SimpleExoPlayer? = null
    private var sampleUrl = "https://www.learningcontainer.com/wp-content/uploads/2020/05/sample-mp4-file.mp4"
    private lateinit var video_player_view: PlayerView

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

        video_player_view = findViewById(R.id.video_player_view);

        // ExoPlayer 인스턴스를 생성하고 소스를 플레이에 할당하여 비디오 플레이어 초기화
        videoPlayer = SimpleExoPlayer.Builder(this).build()
        video_player_view?.player = videoPlayer
                buildMediaSource()?.let {
            videoPlayer?.prepare(it)
        }
    }

    // MediaSource: 영상에 출력할 미디어 정보를 가져오는 클래스
    private fun buildMediaSource(): MediaSource? {
        val dataSourceFactory = DefaultDataSourceFactory(this, "sample")
        return ProgressiveMediaSource.Factory(dataSourceFactory)
            .createMediaSource(Uri.parse(sampleUrl))
    }

    // 일시중지
    override fun onResume() {
        super.onResume()
        videoPlayer?.playWhenReady = true
    }

    // 정지
    override fun onStop() {
        super.onStop()
        videoPlayer?.playWhenReady = false
        if (isFinishing) {
            releasePlayer()
        }
    }

    // 종료
    private fun releasePlayer() {
        videoPlayer?.release()
    }
}

프로젝트를 실행하면 아래 사진과 같이 영상이 나오는 것을 확인할 수 있습니다.