💡 어플리케이션을 사용하다보면 앱 안에서 유튜브를 바로 볼 수 있는 기능들을 보신 적이 있을 것입니다.
이번에 새로운 프로젝트를 시작하면서 저도 그 기능을 구현해볼 수 있는 기회가 생겨 이 포스트를 작성합니다.
Youtube Android Player API
유튜브 api는 api를 사용함에 있어 gradle이 아닌, jar파일을 등록하여 api를 사용합니다.
Youtube Android Player API Download
위의 사이트로 들어가서 YoutubeAndroidPlayerApi-1.2.2.zip을 다운로드 받아줍니다.
그 후 프로젝트 내부의 libs 폴더 내에 위치시켜줍니다.
옮겼다고 끝이 아닌, 이것을 사용하겠다고 studio에게 알려주어야 합니다.
app을 우클릭 한 후, Open Module Settings를 클릭합니다.
왼쪽의 메뉴에서 Dependencies를 클릭 한 후, 상단의 + 버튼을 눌러준 뒤, JAR/AAR Dependency를 눌러줍니다.
그 후, 첫 번째 칸에 파일의 경로를 작성한 후 OK를 누르면 됩니다.
그리고 구글한테 우리가 이거 쓴다! 라고 얘기해주어야 합니다.
https://console.cloud.google.com 로 들어가서 사용자 인증정보를 등록해준 뒤,
검색에 유튜브를 검색하면 아래처럼 YouTube Data API v3가 나올텐데,
이를 클릭하여 들어간 뒤 사용한다고 눌러주면 됩니다.
AndroidManifest.xml
유튜브는 기본적으로 인터넷을 사용합니다.
그렇기에 우리는 internet permission을 추가하여 줍시다.
<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
package="com.hand.cookie">
<uses-permission android:name="android.permission.INTERNET" />
...Activity (layout)
<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
xmlns:app="http://schemas.android.com/apk/res-auto">
<com.google.android.youtube.player.YouTubePlayerView
android:id="@+id/youtube_player_view"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintEnd_toEndOf="parent"/>
</androidx.constraintlayout.widget.ConstraintLayout>그냥 유튜브 영상을 볼 수 있는 공간만 구현했습니다.
Activity (class)
private fun initYoutubePlayer(key: String) {
val youtubeView = binding.youtubePlayerView
youtubeView.initialize("develop", object : YouTubePlayer.OnInitializedListener {
override fun onInitializationSuccess(p0: YouTubePlayer.Provider, p1: YouTubePlayer, p2: Boolean ) {
if (!p2) {
p1.cueVideo(key)
}
}
override fun onInitializationFailure(p0: YouTubePlayer.Provider?, p1: YouTubeInitializationResult? ) {
}
})
}유튜브 영상의 주소를 보시면 v라는 쿼리스트링을 받아서 영상을 보여주는 것을 확인할 수 있습니다.
https://www.youtube.com/watch?v=My-fv5Org-4
(예시를 위한 제가 좋아하는 노래입니다.)
이 영상의 경우 My-fv50rg-4라는 쿼리스트링을 확인할 수 있습니다.
이 값을 key에 위치시켜주면 됩니다!!
❗️ 이렇게 한 뒤, 에뮬레이터를 실행시키면 분명히 오류가 발생했다고 뜨실겁니다.
에뮬레이터에서는 작동이 안된다고 하네요. 가지고 있는 디바이스를 연결해서 확인하시면 정상적으로 작동하는 것을 확인하실 수 있습니다.
