초보자를 위한 안드로이드 앱 개발 – 유튜브 플레이어(Youtube Player)

안드로이드 앱 개발은 아이돌튜브(Idol Tube) – K-POP, 아이돌 – 구글플레이 앱 https://play.google.com/store/apps/details?id=com.wsquare.idoltube

아이돌튜브 – KPOP, IDOL – 구글플레이 앱 아이돌튜브는 Idols.play.google.com 에 관심있는 사람들을 위한 앱입니다

부자 튜브(Rich Tube) – 경제, 주식, 부동산 – Google Play 앱https://play.google.com/store/apps/details?id=com.wsquare.richtube

부자 튜브(Rich Tube) – 경제, 주 식, 부산 – 구글 플레이 리치 Tube 앱은 경제, 주식, 리얼 estate.play.google.com 에 관심이 있는 사람들을 위한 앱입니다

위의 두 가지 앱을 만드는 과정에서 참고할 만한 사항과 과정을 정리하는 글입니다.

아이돌 튜브와 부자이면, firebase를 데이터베이스로 사용하고 유ー뷰ー브콤텡츠을 데이터베이스에 저장하고 그 자료를 다운로드하고 사용자에게 유ー뷰ー브에서 제공하는 앱이다.

이 앱의 핵심은 크게 데이터를 다운로드하고 유튜브 플레이어를 이용하고 재생을 제공하는 것이다.

우선, 데이터를 다운로드 받는 것은 구현해야 할 부분이 많아서 유튜브 플레이어를 구현하는 것부터 하자.☆ YouTube플레이어 API☆ Youtube Player API YouTube플레이어에 대해서 네이버에 검색하면 자료가 거의 없다w개발의 포스팅을 네이버에 넣는 사람이 드물기 때문에 w이 글은 구글에서 많이 검색하고 제가 구현하고 싶게 구현한 과정을 작성한 내용이어서 유사한 앱을 만들려는 사람에게는 많은 도움이 될 거야.유튜브 앱으로 구현하려면 3가지 정도의 방법이 가능하다.

1>Google에서 제공하는 Youtube API에서 Android용 API을 이용하는 방법 2>Google에서 제공하는 Youtube API에서 IFrame용 API을 이용하는 방법 3>웹 뷰에 유튜브 전체 화면에서 실행하는 방법의 차이를 설명하면 되지만 이는 직접 만들어 보고 어떤 차이가 있는지 보는 편이 좋다.

차이가 궁금하다면 뒷부분에 차이를 먼저 보고 또 올라와서 고민하고 보는 것을 권한다.

그럼 메인 액티비티에 버튼을 3개 먼저 만든 후 처음으로 보자!

<?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”xmlns:tools=”http://schemas.android.com/tools”android:layout_width=”match_parent”android:layout_width=”match_parent”tools:context=.<LinearLayout android:layout_width=”match_parent=wraplayout_wrodioletion_wriddoiddoadoadique-wraparielyt

<?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 “xmlns:tools=”http://schemas.android.com/tools “android:layout_width=”match_parent”android:layout_width= “match_parent”tools:context=.<LinearLayout android:layout_width= “match_parent=wraplayout_wrodioletion_wriddoiddoadoadique-wraparielyt

다음 기능을 구현할 부분을 코딩합니다.

다음 기능을 구현할 부분을 코딩합니다.

먼저, 가장 간단한 1 > WebView 전체 화면 방식을 구현해 보겠습니다!
유튜브를 재생하는 활동을 추가합니다.

마우스 우클릭 -> new -> Activity -> Empty Activity를 선택합니다Youtube Player 3 Activity를 생성한다.

액티비티를 생성하면 bt3.onClick으로 가서 아래 코드를 삽입한다.

bt3.setOnClickListener(새 뷰).OnClickListener(){@Override public void onClick(View){Intentint=newIntent(MainActivity). YouTube Player3Activity.class);startActivity(intent);}});MainActivity로 YoutubePlayer3Activity를 열자는 코드다.

왕초보용 Android앱 개발 프로젝트…:네이버 블로그(naver.com)을 참고해서 에뮬레이터를 세트 하고 실행하면서 흉내 내어 보는 것도 코드를 이해하는 방법 중 좋은 방법이다.

여기까지 실행하면 3번 버튼을 누르면, 액티비티가 하나 열리기까지 확인할 수 있다.

다음은 역동성에 웹 뷰를 적용한다.

먼저 만든 activity_youtube_player3.xml를 열어 WebView를 추가한다.

<?xml version=”1.0″encoding=”utf-8″요?><androidx.constrain레이아웃입니다.

위젯입니다.

ConstraintLayoutxmlns: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=. YoutubePlayer3Activity”><WebView안드로이드:id=”@+id/wb_player”android:layout_width=”match_parent”android:layout_height=”match_parent”/></androidx.constrain레이아웃입니다.

위젯입니다.

제약 레이아웃요>아이디를 wb_player로 했습니다.

다시 YoutubePlayer3Activity.자바로 돌아가서 웹뷰를 설정합니다.

컨트롤을 코딩을 했는데 임포트가 안 돼서 빨간색이 되면 alt+enter를 누르면 임포트 클래스가 나오는데 그걸 선택하면 자동으로 임포트가 돼서 오류가 사라집니다.

package com.wsquare.kidztube;androidx.appcompat.app를 가져옵니다.

AppCompatActivity;android.os를 가져옵니다.

번들;Android를 가져옵니다.

Webkit을 사용합니다.

WebView;퍼블릭 반 YoutubePlayer3입니다 액티비티에서는 AppCompatActivity{@Override protected void onCreate(Bundle savedInstanceState){super.onCreate(savedInstanceState);setContentView(R.layout.activity_youtube_player3);WebView wb=findViewById(R.id . wb_player);wb.getSettings(). setJavaScriptEnabled(true);wb.loadUrl(“https://www.youtube.com/embed/YZS-hF1fm0Y”);}}}을 클릭합니다WebView에 접속하셔서 URL을 쓰시면 됩니다.

일반적인 YouTube 실행 주소는 https://www.youtube.com/watch?v=YZS-hF1fm0Y 입니다이렇게 이용하는 데 전체 화면에서 유튜브를 실행하려면 https://www.youtube.com/embed/YZS-hF1fm0Y[MV]HYOJUNG(양), ARIN( 아린, JANGWONYOUNG(장·우오뇨은)LEESEO(이소)SERIM(세림), JUNGMO(존 모)_BLUE&BLACK[MV]HYOJUNG(양), ARIN( 아린, JANGWONYOUNG(장·우오뇨은)LEESEO(이소), SERIM(세림), JANGWONGWONYOUNG(장·우오뇨은), BLACK LEESEONMO-POP의 모든 1 BLACK KNOWONDUE!
:)Welcom…이에 나이 www.youtube.com이렇게 embed/영상 ID를 입력하면 전체 화면에서 실행된다.

영상 ID는 유튜브의 각 영상 주소의 “youtube.com/watch?v=XXXXXXX”이 부분의 코드를 뜻한다.

영상이 들어가WebView의 크기에 의해서 영상의 크기가 바뀐다.

앱으로 유튜브를 실행하려면 인터넷 권한이 필요하다.

실행하기 전에 Android Manifest.xml에 이하의 코드를 추가한다.

인터넷 권한만 주고 스마트 폰에서 실행하면 SERVICE_MISSING라는 오류가 발생하여, 플레이어가 작동하지 않지만 이를 방지하기 위해서 query->intent->action부분도 함께 추가한다.

<uses-permission android:name=”android.permission.INTERNET”/><queries><intent><action android:name=”com.google.android.youtube.api.service.START” /></intent></queries><uses-permission android:name=”android.permission.INTERNET”/><queries><intent><action android:name=”com.google.android.youtube.api.service.START” /></intent></queries><uses-permission android:name=”android.permission.INTERNET”/><queries><intent><action android:name=”com.google.android.youtube.api.service.START” /></intent></queries>아래 안드로이드를 선택해서 들어가 봅시다.

이렇게 목차가 나오고 일단 Download로 들어간다.

업데이트를 안 해서 계속 이 상태인 것 같아.최근에 누가 jar 파일을 받아서 프로젝트에 추가를 하냐면, 이 사람은 2013년 이후로 업그레이드가 되지 않았기 때문에 여전히 jar 파일을 다운로드해서 root\app\libs 경로에 YouTube Android Player Api.jar를 복사해 두어야 한다.

libs 아래에 복사한다.

그리고 root\app\build.gradle을 열고 dependencies아래에구현파일 Tree(dir: ‘libs’, include: [‘*.jar’])libs 경로의 jar 파일을 프로젝트에서 참조하도록 한다.

그러면 유튜브 플레이어가 사용할 수 있는 라이브러리 추가가 완료됐다.

다음 항목인 Register your App을 수행해야 할 것 같은데.. 이것을 하지 않아도 유튜브 플레이어의 재생은 잘 된다.

바로 플레이어를 하나 만들어보자.이번에는 Youtube Player 1 Activity를 작성해보자.이번에도 activity_youtube_player 1.xml 리소스 파일을 열고 youtube player를 추가한다.

<?xml version=”1.0″encoding=”utf-8″요?><androidx.constrain레이아웃입니다.

위젯입니다.

ConstraintLayoutxmlns: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=. YoutubePlater1Activity”><com.google.android.입니다.

youtube입니다.

를 클릭합니다.

YouTube PlayerView안드로이드:id=”@+id/playerView”android:layout_width=”match_parent”android:layout_height=”match_parent”/></androidx.constraint레이아웃입니다.

위젯입니다.

제약 레이아웃요>첫 번째 예제에서는 웹뷰를 추가를 했는데 이번에는 Youtube Player View를 추가를 했습니다.

id는 player View로 줬습니다.

다음 YoutubePlayer1Activity.java 파일을 열고 아래 부분을 수정합니다.

퍼블릭 클래스YoutubePlater1 액티비티 확장 AppCompat 액티비티 {액티비티는 기본적으로 AppCompatActivity를 상속하고 있습니다.

유튜브 플레이어를 이용하려면 이를 유튜브 베이스 액티비티로 변경해야 합니다.

퍼블릭 클래스 유튜브 Plater1 유튜브의 기본적인 액티비티를 확장하는 액티비티 {다음 코드를 작성합니다.

다음 코드를 작성합니다.

다음 코드를 작성합니다.

다음 코드를 작성합니다.

다음 코드를 작성합니다.

YouTube 플레이어 Android 용 YouTube 플레이어 IFrame 용 웹 뷰 전체 화면 플레이 리스트 OOX API 지원 OOX 자동 재생 OXX 화면 컨트롤 XOO 팝업 플레이 XOO 영상 제한 XOO 배속 재생 XOO표로 만들면 대개 이 정도의 차이가 있다.

우선, 플레이 리스트는 복수의 영상을 순차적으로 재생하는 기능이다.

다음/이전 단추도 자동적으로 생성되거나 플레이 리스트 목록이 표시되기도 한다.

안드로이드용으로 IFrame용 표시 방식이 약간 다르지만 복수의 영상을 배열 형태로 전달하면 순차적으로 재생이 가능하다.

다음은 API지원 유튜브 API인 때문에 영상 재생에 필요한 다양한 옵션을 제공한다.

API는 https://developers.google.com/youtube?hl=koYouTube | Google Developers 귀하의 사이트 및 apps.developers.google.com 에 YouTube 기능 추가여기서 확인할 수 있습니다.

플레이 리스트도 API기능의 하나라고 생각하면 됩니다.

자동 재생은 Android플레이어는 기본적으로 제공하지만 IFrame및 Web뷰의 경우 자동 재생하려면 뮤트로 할 필요가 있습니다.

이는 구글 정책이지만, 해제할 방법을 아무리 찾아도 발견되지 않았습니다.

다음 화면 컨트롤, 이것은 무엇인가 하면 안드로이드 플레이어는 실행되면 기본적으로 이전/다음의 버튼 등이 유튜브 영상 위에 오버레이 되어 나타납니다.

이런 버튼 기능을 사용자 지정하려면 YouTube플레이어의 위에 다른 컴포넌트를 업로드할 필요가 있지만, Android플레이어는 YouTube플레이어 뷰의 위에 어떤 컴포넌트도 업로드하는 것을 허가하지 않습니다.

만약 내가 임의에 컴포넌트를 들면, 영상의 재생이 자동적으로 멈추게 되어 있습니다.

구글 정책이라 바꿀 수 없습니다.

그러나 IFrame및 웹 뷰는 문자 그대로 웹 뷰이므로 웹 뷰의 위에 커스터마이즈 할 수 있습니다.

예를 들면, 화면 잠금 기능이나 임의의 단추를 만들어 놓고 영상 재생 중에 버튼 기능을 추가해서 플레이어 컨트롤이 가능합니다.

다음은 팝업 플레이어지만 이것도 역시 안드로이드로 듀얼 뷰나 팝업 실행을 할 경우 안드로이드 플레이어의 경우 화면에 다른 것이 오버레이 된 것으로 간주하고, 영상 재생이 멈춥니다.

그래서 멀티 스태킹에서 실행하고 싶을 때에 영상 재생이 없어요.물론 IFrame및 웹 뷰 플레이어는 웹 뷰 뿐이어서 잘 재생됩니다.

다음은 영상 제한, 이는 IFrame및 웹 뷰 플레이어의 경우 일부 영상이 영상 업 로더가 올려금지(?)를 체크하고 업로드하면, 영상 재생이 없어요.”이 동영상은 볼 수 없습니다”라고 표시되고 재생되지 않습니다.

그래서 IFrame에서 개발하면서 상당수의 영상을 재생할 수 없다는 단점이 발생합니다.

다음에배속으로 재생, 1.5x, 2x재생 등배속으로 재생을 옵션에서 선택 여부입니다.

유감이지만, 안드로이드 플레이어로는배속으로 재생 옵션이 없습니다.

그래서 IFrame방식을 이용하고 추가 기능을 만들었습니다.

여기에서 가장 안타까운 것은 IFrame방식은 일부 영상의 재생 제한에 따른 모든 영상을 제공하지 않는다는 것입니다.

각각 선수별로 장단점을 갖고 있어 무엇을 선택하고 사용할지는 개발자가 판단해야 할 것 같습니다.

이번 장에서는 YouTube플레이어를 적용하는 방법 소개했습니다.

다음에서는 이 유튜브 플레이어를 좀 더 다듬은 과정을 만들어 보겠습니다!
#유튜브 플레이어 API,#Youtube API,#Youtube개발,#유튜브 api,#유튜브 플레이어 개발