안드로이드 스튜디오 유튜브(Youtube) 레이아웃에 띄우기, YouTubeAndroidPlayerAPI 사용하기

 

안녕하세요, 하루플스토리 입니다.😁

 

안드로이드 스튜디오로 앱 개발하면서 유튜브 영상을 띄우려 합니다.

그런데 유튜브 API를 사용해야하는 등 과정이 많이 번거롭더군요.

 

이 유튜브 API가 2015년 이후 업데이트를 하지 않아서 Androidx 에서 작동하지 않는 기능들도 있고 불편한 점이 있는데 간단한 기능을 구현할 때는 문제없을 듯 합니다.

2021년 1월 26일 글 작성일 기준으로 제가 하는 방법에서 올바르게 동작하였습니다.

하나식 따라하기 쉽게 설명해볼게요!😊

 

실행결과

치매예방 관련 앱을 개발하고 있는데 치매관련 영상을 화면에 띄우는 겁니다.

 

 

---

1. Youtube Data API 키 발급

먼저, 구글 클라우드 플랫폼에서 API키를 발급받습니다.

Youtube Data API를 검색하면 나올 겁니다.

간단한 사용자 인증 과정 등을 거치고나면 개발자 API키를 발급해줍니다.

 

https://console.developers.google.com/

Google Cloud Platform

YouTube Data API v3 를 사용하겠습니다.

 

키를 발급받습니다.

 

 

 

 

 

2. Youtube 플레이어 API 라이브러리 다운로드

developers.google.com/youtube/android/player/downloads

YouTube Android Player API - Download  |  Google Developers

API를 다운로드 받고, 압축을 풉니다.

이후 Project - app - libs 에 붙여넣습니다.

 

 

 

API를 사용하기 위해서 jar 파일을 등록해야합니다.

File - Project Structure

 

Dependencies - (+)플러스 기호 - Jar Dependency

 

 

jar 파일 경로를 복사하여 넣어줍니다.

OK 하면 자동으로 Sync가 진행될 것입니다.

이러면 이제 유튜브 API를 사용할 수 있게 되었습니다.

이제 코딩을 해야합니다.

 

 

 

3. 권한 추가

유튜브가 연결되려면 당연히 인터넷이 연결되어야겠죠😁

매니페스트에 인터넷 권한을 추가해줍니다. 

 

AndroidManifest.xml

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

이 한줄을 매니페스트에 추가해줍니다.

 

어느위치에 넣어야 할지 모르는 분들을 위해 바로 아래에 매니페스트 전체 코드를 올려두겠습니다.

참고하시기 바랍니다.

<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
    package="com.justice.prevention_of_dementia">

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

    <application
        android:allowBackup="true"
        android:icon="@mipmap/ic_launcher"
        android:label="@string/app_name"
        android:roundIcon="@mipmap/ic_launcher_round"
        android:supportsRtl="true"
        android:theme="@style/Theme.Prevention_of_Dementia">
        <activity android:name=".MainActivity">
            <intent-filter>
                <action android:name="android.intent.action.MAIN" />

                <category android:name="android.intent.category.LAUNCHER" />
            </intent-filter>
        </activity>
    </application>

</manifest>

 

 

 

 

 

 

4. xml 코딩

저는 메인화면에 유튜브 영상을 출력했기 때문에 activity_main.xml에 코딩하였습니다.

 

activity_main.xml

            <com.google.android.youtube.player.YouTubePlayerView
                android:id="@+id/youTubePlayerView"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"/>

            <Button
                android:id="@+id/youtubeBtn"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="재생"
                android:textColor="#000000"
                android:layout_gravity="center"/>

원하는 위치에 YouTubePlayerView를 넣고, 재생할 수 있는 Button 레이아웃도 넣어줍니다.

항상 그렇듯 xml은 쉽고 java가 난이도가 조금 있는편이죠

 

 

 

 

5. java 코딩

MainActivity.java

import android.os.Bundle;
import android.util.Log;
import android.view.View;
import android.widget.Button;

import com.google.android.youtube.player.YouTubeBaseActivity;
import com.google.android.youtube.player.YouTubeInitializationResult;
import com.google.android.youtube.player.YouTubePlayer;
import com.google.android.youtube.player.YouTubePlayerView;


public class MainActivity extends YouTubeBaseActivity {

    //객체 선언
    YouTubePlayerView playerView;
    YouTubePlayer player;

    //유튜브 API KEY와 동영상 ID 변수 설정
    private static String API_KEY = "본인 API를 입력하세요";
    //https://www.youtube.com/watch?v=hl-ii7W4ITg ▶ 유튜브 동영상 v= 다음 부분이 videoId
    private static String videoId = "hl-ii7W4ITg";

    //logcat 사용 설정
    private static final String TAG = "MainActivity";

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        initPlayer();

        Button btnPlay = findViewById(R.id.youtubeBtn);
        btnPlay.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
                playVideo();
            }
        });
    }

    private void playVideo() {
        if(player != null) {
            if(player.isPlaying()) {
                player.pause();
            }
            player.cueVideo(videoId);
        }
    }

    //유튜브 플레이어 메서드
    private void initPlayer() {
        playerView = findViewById(R.id.youTubePlayerView);
        playerView.initialize(API_KEY, new YouTubePlayer.OnInitializedListener() {
            @Override
            public void onInitializationSuccess(YouTubePlayer.Provider provider, YouTubePlayer youTubePlayer, boolean b) {
                player = youTubePlayer;

                player.setPlayerStateChangeListener(new YouTubePlayer.PlayerStateChangeListener() {
                    @Override
                    public void onLoading() {

                    }

                    @Override
                    public void onLoaded(String id) {
                        Log.d(TAG, "onLoaded: " + id);
                        player.play();
                    }

                    @Override
                    public void onAdStarted() {

                    }

                    @Override
                    public void onVideoStarted() {

                    }

                    @Override
                    public void onVideoEnded() {

                    }

                    @Override
                    public void onError(YouTubePlayer.ErrorReason errorReason) {
                        Log.d(TAG, "onError: " + errorReason);
                    }
                });
            }

            @Override
            public void onInitializationFailure(YouTubePlayer.Provider provider, YouTubeInitializationResult youTubeInitializationResult) {

            }
        });
    }
}

주의해야 할 점은 extends에서 AppCompatActivity가 아닌 YouTubeBaseActivity를 꼭 extends 해야합니다.

위 소스코드대로 하면 작동 잘 될거에요!

 

영상하나 실행하는게 조금 번거로운 과정들이 많았네요😢

여기까지 진행하고 본인 스마트폰을 연결하여 테스트 해보시면 됩니다!

가상 디바이스 AVD로는 오류가 있다고 합니다. (저는 테스트해보지 않았습니다. 스마트폰에서는 잘 작동되네요~)

 

 

다른 궁금한 점 있으시면 댓글로 남겨주세요~