콘텐츠

• Android 앱에 YouTube 비디오를 포함시키는 방법
• YouTube 동영상 ID 검색
• 프로젝트의 SHA-1 지문을 얻으십시오
• Google API Console에 등록
• YouTube Android Player API 다운로드
• 매니페스트 업데이트
• YouTube 플레이어 레이아웃 구축
• YouTube 플레이어 구현
• 1. YouTubeBaseActivity 확장
• 2. YouTube 플레이어 초기화
• 3. 초기화 성공 및 초기화 실패 구현
• YouTube 동영상 재생 : 완료된 코드
• YouTube Android 플레이어 API 테스트
• WebView에 Dailymotion 컨텐츠 표시
• Dailymotion 비디오 ID 받기
• Dailymotion SDK 추가
• 인터넷 액세스 요청
• Dailymotion의 PlayerWebView 위젯 추가
• Dailymotion PlayerWebView 구성
• Vimeo 비디오 퍼가기
• 매니페스트 업데이트
• UI에 WebView 추가
• 비디오를 선택하십시오
• Android 앱에서 웹 페이지 표시
• Vimeo 앱 테스트
• 마무리

화면에 MediaController가 표시되면 비디오를 재생, 일시 정지, 되감기 및 빨리 감기하고 MediaController의 진행률 표시 줄을 드래그하여 클립 내 임의의 지점으로 이동할 수 있습니다.

Android 앱에 YouTube 비디오를 포함시키는 방법

응용 프로그램에 비디오 파일을 포함하면 장치의 인터넷 연결에 관계없이 비디오를 항상 사용할 수있는 좋은 방법입니다. 그러나 앱에 여러 개의 큰 고해상도 비디오를 포함시키는 것도 APK 크기를 늘리는 좋은 방법입니다!

APK 크기가 걱정되거나 애플리케이션에 추가 된 멋진 비디오가 포함 된 경우 해당 비디오를 온라인 플랫폼에 게시 한 후 런타임에 애플리케이션을 통해 스트리밍 할 수 있습니다.

온라인으로 동영상을 게시 할 때 즉시 염두에 두는 웹 사이트가 있으므로이 섹션에서는 삽입하는 방법을 보여 드리겠습니다. 어떤 YouTube Android Player API 클라이언트 라이브러리를 사용하는 앱의 YouTube 비디오

YouTube 동영상 ID 검색

시작하려면 표시 할 YouTube 동영상을 결정한 다음 고유 한 동영상 ID를 검색해야합니다.

YouTube 동영상을 사용할 수 있지만“2018의 가장 좋아하는 기술”을 선택하고 있습니다. 선택한 동영상을로드하고 브라우저의 주소 표시 줄에서 URL을 확인하십시오. 예를 들어 동영상의 URL은 다음과 같습니다.

youtube.com/watch?v=hJLBcViaX8Q

ID는이 동영상을 고유하게 식별하는 URL의 일부이며 URL의 끝에있는 문자열 (기본적으로 "="기호 뒤의 모든 것)입니다. 비디오의 비디오 ID는 다음과 같습니다.

hJLBcViaX8Q

나중에 사용할 예정이므로 동영상의 ID를 기록해 두십시오.

프로젝트의 SHA-1 지문을 얻으십시오

YouTube Android Player API에 액세스하려면 Android 제한이있는 API 키를 생성해야합니다. 여기에는 API 키를 프로젝트의 고유 한 패키지 이름 및 인증서 지문 (SHA-1)에 연결하는 작업이 포함됩니다.

Gradle 콘솔을 통해 프로젝트의 SHA-1 지문을 검색 할 수 있습니다.

• Android Studio 창의 오른쪽에서 Gradle 탭을 선택하십시오.
• “앱”모듈과“작업> Android> signingReport”를 차례로 선택하십시오.

• 화면 오른쪽 하단에 나타나는 Gradle Console 탭을 엽니 다.
• Gradle Console이 자동으로 열립니다. 이 창에서 SHA-1 값을 찾아서 기록하십시오.

애플리케이션 테스트에만 적합한 디버그 인증서 지문을 사용하고 있습니다. 앱을 게시하기 전에 항상 해당 응용 프로그램의 릴리스 인증서를 기반으로 새 API 키를 생성해야합니다.

Google API Console에 등록

YouTube Android Player API를 사용하려면 먼저 Google API Console에 애플리케이션을 등록해야합니다.

• API 콘솔로 이동하십시오.
  헤더에서 현재 프로젝트의 이름을 선택하십시오 (커서가 다음 스크린 샷에 위치).

• 다음 창에서“새 프로젝트”를 선택하십시오.
• 프로젝트 이름을 지정한 다음 "만들기"를 클릭하십시오.
• 왼쪽 메뉴에서 "자격 증명"을 선택하십시오.
• 파란색 "자격 증명 생성"버튼을 클릭 한 다음 "API 키"를 선택하십시오.
• API 키가 팝업에 표시되며 여기에는이 API 키를 제한하라는 프롬프트가 포함됩니다. 제한된 키가 더 안전하므로 특별히 제한되지 않은 API 키가 필요하지 않으면 "키 제한"을 선택하십시오.
• 다음 화면에서 API 키에 고유 한 이름을 지정하십시오.
• "Android 앱"라디오 버튼을 선택하십시오.
• "패키지 이름 및 지문 추가"를 클릭하십시오.
• 프로젝트의 SHA-1 지문을 다음 섹션에 복사하여 붙여 넣은 다음 프로젝트 패키지 이름 (모든 Java 클래스 파일의 상단과 프로젝트 매니페스트에 표시)을 입력하십시오.
• 입력 한 정보가 마음에 들면 "저장"을 클릭하십시오.

YouTube Android Player API 다운로드

다음으로 YouTube Android Player API 클라이언트 라이브러리를 다운로드해야합니다. 이 라이브러리를 사용하는 경우 APK를 최대한 가볍게 유지하려면 ProGuard를 활성화하는 것이 좋습니다.

프로젝트에 YouTube 라이브러리를 추가하려면 :

• YouTube Android Player 웹 사이트로 이동하여 최신 버전을 다운로드하십시오.
• 후속 zip 파일을 압축 해제하십시오.
• 압축이 풀린 폴더를 열고 "libs"하위 폴더로 이동합니다. "YouTubeAndroidPlayerApi.jar"파일이 포함되어 있어야합니다.
• Android Studio에서 "프로젝트"보기로 전환하십시오.
• YouTube 라이브러리가 빌드 경로에 포함되도록하려면 .jar을 프로젝트의 '/ libs”디렉토리. 프로젝트의 "app / libs"폴더를 연 다음 .jar을 끌어다 놓으십시오.

• build.gradle 파일을 열고 YouTube 라이브러리를 프로젝트 종속성으로 추가하십시오.

종속성 {구현 fileTree (dir : libs, include :) 구현 com.android.support:appcompat-v7:28.0.0 구현 com.android.support:design:28.0.0 구현 com.android.support.constraint : constraint-layout : 1.1.3 testImplementation junit : junit : 4.12 androidTestImplementation com.android.support.test : runner : 1.0.2 // 다음 // 구현 파일 추가 (libs / YouTubeAndroidPlayerApi.jar)}

• 메시지가 표시되면 Gradle 파일을 동기화하십시오.

매니페스트 업데이트

응용 프로그램이 표시 될 경우 어떤 온라인 동영상 콘텐츠를 사용하려면 인터넷에 액세스해야합니다.

프로젝트의 매니페스트를 열고 인터넷 권한을 추가하십시오.

사용자에게 영화와 같은 와이드 스크린 경험을 제공하기 위해 가로 모드에서 시작하도록 MainActivity를 설정합니다.

YouTube 플레이어 레이아웃 구축

다음 중 하나를 사용하여 YouTube 비디오를 표시 할 수 있습니다.

• YouTubePlayerView. 레이아웃에서 YouTubePlayerView를 사용하려면 해당 레이아웃의 해당 활동 클래스에서 YouTubeBaseActivity를 확장해야합니다.
• YouTubePlayerFragment. 이것은 YouTubePlayerView를 포함하는 조각입니다. YouTubePlayerFragment를 구현하기로 선택한 경우 습관 YouTubeBaseActivity에서 확장해야합니다.

YouTubePlayerView를 사용하겠습니다. 프로젝트의 "activity_main.xml"파일을 열고 YouTubePlayerView 위젯을 추가하십시오.

YouTube 플레이어 구현

그런 다음 MainActivity를 열고 다음 태스크를 완료하십시오.

1. YouTubeBaseActivity 확장

레이아웃에서 YouTubePlayerView를 사용하고 있으므로 YouTubeBaseActivity를 확장해야합니다.

공개 클래스 MainActivity, YouTubeBaseActivity {

2. YouTube 플레이어 초기화

initialize ()를 호출하고 앞에서 만든 API 키를 전달하여 YouTube 플레이어를 초기화합니다.

YouTubePlayerView youTubePlayerView = (YouTubePlayerView) findViewById (R.id.YouTubePlayer); youTubePlayerView.initialize (YOUR_API_KEY, 새로운 YouTubePlayer.OnInitializedListener () {

3. 초기화 성공 및 초기화 실패 구현

마지막으로 초기화가 성공인지 실패인지에 따라 애플리케이션의 반응 방식을 지정해야합니다. YouTube 플레이어가 성공적으로 초기화되면 고유 한 비디오 ID를 전달하여 비디오를로드 할 수 있습니다.

public void onInitializationSuccess (YouTubePlayer.Provider 제공 업체, YouTubePlayer youTubePlayer, 부울 b) {// 비디오 ID를 지정합니다 .//YouTubePlayer.loadVideo("hJLBcViaX8Q ");

다음으로 실패한 초기화를 처리하는 방법을 응용 프로그램에 알려야합니다. 토스트를 표시하겠습니다 :

public void onInitializationFailure (YouTubePlayer.Provider 제공 업체, YouTubeInitializationResult youTubeInitializationResult) {Toast.makeText (MainActivity.this, "오류가 발생했습니다", Toast.LENGTH_SHORT) .show (); }

YouTube 동영상 재생 : 완료된 코드

위의 모든 내용을 MainActivity에 추가하면 다음과 같은 결과가 나타납니다.

android.os.Bundle 가져 오기; android.widget.Toast 가져 오기; 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; // YouTubeBaseActivity 확장 // public class MainActivity는 YouTubeBaseActivity 확장 {// 고유 한 API 키로 바꾸는 것을 잊지 마세요 // public static final String YOUR_API_KEY = "YOUR_API_KEY_HERE"; @Override protected void onCreate (번들 저장 인스턴스 상태) {super.onCreate (savedInstanceState); setContentView (R.layout.activity_main); YouTubePlayerView youTubePlayerView = (YouTubePlayerView) findViewById (R.id.YouTubePlayer); // YouTube Player를 초기화합니다. b) {// .. 다음 비디오 재생을 시작합니다. {// ... 토스트 표시 // Toast.makeText (MainActivity.this, "오류가 발생했습니다", Toast.LENGTH_SHORT) .show ();}}); }}

YouTube Android 플레이어 API 테스트

실제 Android 스마트 폰 또는 태블릿 또는 AVD에서이 애플리케이션을 테스트 할 수 있습니다. AVD를 사용하는 경우 Google Play 서비스가 포함 된 시스템 이미지를 사용하고 있는지 확인하십시오. YouTube API는 Android 용 YouTube 앱의 일부로 배포되는 서비스에 의존하므로 YouTube 앱은 AVD 또는 실제 Android 기기에도 설치해야합니다.

기기에 프로젝트를 설치하면 애플리케이션이로드되는 즉시 YouTube 동영상이 자동으로 재생됩니다. 동영상을 탭하면 동영상을 일시 중지, 재생, 빨리 감기 및 되감기하는 데 사용할 수있는 모든 친숙한 YouTube 컨트롤에 액세스 할 수 있습니다.

WebView에 Dailymotion 컨텐츠 표시

Android 앱에 비디오를 임베드 할 때 선택할 수있는 다양한 비디오 공유 플랫폼이 있으며 일부 플랫폼은 Dailymotion을 포함하여 컨텐츠와의 상호 작용을 돕는 전용 SDK를 제작하기도했습니다.

Android 용 Dailymotion Player SDK는 Android WebView 구성 요소를 얇게 포장하여 응용 프로그램에 Dailymotion 비디오를 쉽게 포함시킬 수 있습니다.

이 섹션에서는 타사 Dailymotion Player SDK를 사용하여 Dailymotion 웹 사이트에서 비디오를 스트리밍하는 방법을 보여줍니다.

Dailymotion 비디오 ID 받기

먼저 Dailymotion으로 이동하여 표시 할 비디오를 찾은 다음 비디오 ID를 검색하십시오.

다음 URL이 포함 된 안개의 시간 경과 비디오를 사용하겠습니다.

www.dailymotion.com/video/x71jlg3

동영상 ID는 URL 끝에있는 고유 한 문자열이므로 내 동영상 ID는 x71jlg3입니다.

Dailymotion SDK 추가

Dailymotion SDK를 사용하고 있으므로이를 프로젝트 종속성으로 선언해야합니다. 프로젝트의 build.gradle 파일을 열고 다음을 추가하십시오.

의존성 {구현 fileTree (dir : libs, include :) // 다음 추가 // 구현 com.dailymotion.dailymotion-sdk-android : sdk : 0.1.29 구현 com.android.support:appcompat-v7:28.0.0 구현 추가 com.android.support:design:28.0.0 구현 com.android.support.constraint : constraint-layout : 1.1.3 testImplementation junit : junit : 4.12 androidTestImplementation com.android.support.test : runner : 1.0.2}

메시지가 표시되면 "Gradle 파일과 프로젝트 동기화"를 선택하십시오.

기본적으로 Dailymotion SDK는 비디오 제목 및 설명과 같은 Dailymotion의 공개 데이터에만 액세스 할 수 있도록합니다.Dailymotion 플랫폼에 응용 프로그램을 등록하면 몇 가지 추가 작업을 수행 할 수 있지만 비디오를 삽입하기 만하면되므로 응용 프로그램 등록에 대해 걱정할 필요가 없습니다.

앱에 Dailymotion 기능을 추가하는 데 관심이 있다면 공식 문서를 통해 Dailymotion에 애플리케이션을 등록하는 방법에 대해 자세히 알아볼 수 있습니다.

인터넷 액세스 요청

다시 한 번, 월드 와이드 웹 (World Wide Web)에서 콘텐츠를 스트리밍하고 있으므로 프로젝트에는 인터넷 권한이 필요합니다.

Dailymotion 컨텐츠를 표시하는 모든 활동에는 "android : configChanges"속성이 있어야하므로 MainActivity에 다음을 추가하십시오.

Dailymotion의 PlayerWebView 위젯 추가

Dailymotion SDK의 주요 구성 요소는 PlayerWebView UI 요소로, Android WebView 구성 요소 주위에 얇은 래퍼를 제공합니다.

다음 섹션에서 WebView를 자세히 살펴볼 것이지만 WebViews는 기본적으로 응용 프로그램에 웹 페이지를 포함시키는 방법을 제공합니다. SDK의 특수 PlayerWebView를 사용하지 않는 경우 Android의 바닐라 WebView 구성 요소를 사용하여 애플리케이션 내에 전체 Dailymotion 웹 페이지를 표시 할 수 있습니다.

대신 레이아웃에 PlayerWebView를 추가해 보겠습니다.

Dailymotion PlayerWebView 구성

이제 PlayerWebView 위젯을 구현했습니다. 해당 활동 클래스에서 플레이어를 구성해야합니다.

MainActivity를 열고 PlayerWebView에 대한 참조를 가져옵니다.

dailyMotionPlayer = (PlayerWebView) findViewById (R.id.dailymotionPlayer);

그런 다음 "dailyMotionPlayer.load"를 호출하고 이전에 검색 한 비디오 ID를 전달하십시오.

dailyMotionPlayer.load ( "x71jlg3");

이것은 우리에게 다음을 제공합니다.

import android.support.v7.app.AppCompatActivity; android.os.Bundle 가져 오기; import com.dailymotion.android.player.sdk.PlayerWebView; import java.util.HashMap; import java.util.Map; 공개 클래스 MainActivity는 AppCompatActivity를 확장합니다. {private PlayerWebView dailyMotionPlayer; @Override protected void onCreate (번들 저장 인스턴스 상태) {super.onCreate (savedInstanceState); setContentView (R.layout.activity_main); // PlayerWebView 검색 // dailyMotionPlayer = (PlayerWebView) findViewById (R.id.dailymotionPlayer); 지도 playerParams = 새로운 HashMap <> (); // 매개 변수로 동영상을로드합니다 // playerParams.put ( "key", "value"); // 비디오 ID를 전달합니다 .// dailyMotionPlayer.load ( "x71jlg3"); }}

실제 Android 기기 또는 에뮬레이터에 프로젝트를 설치하면 Dailymotion 비디오가 자동으로 재생됩니다.

Vimeo 비디오 퍼가기

비디오 컨텐츠를 임베드 할 때는 일반적으로 가능하면 플랫폼 별 API 또는 플랫폼 별 SDK를 사용하는 것이 좋습니다. 그러나 비디오 공유 플랫폼에 사용할 수있는 SDK 또는 API가없는 경우 어떻게해야합니까?

이 시나리오에서는 Android의 WebView 구성 요소를 사용하여 비디오를 활동의 레이아웃에 포함 된 웹 페이지로 표시 할 수 있습니다. 이 마지막 섹션에서는 WebView를 사용하여 인기있는 Vimeo 플랫폼의 비디오를 포함하는 방법을 보여줍니다.

비디오 컨텐츠를 표시하는 것 외에도 WebViews는 여러 다른 시나리오에서 유용 할 수 있습니다. 예를 들어, 정기적으로 업데이트해야하는 컨텐츠가 있다고 가정하십시오. 해당 컨텐츠를 온라인으로 호스팅 한 다음 WebView를 통해 애플리케이션에 표시하면 새 버전의 앱을 게시하지 않고도 언제든지 컨텐츠를 온라인으로 변경할 수 있습니다. 그러나 WebView를 사용할 때는 일반적으로 독립형 웹 브라우저에서 기대하는 많은 기능을 지원하지 않으므로주의해야합니다. 특히 WebView에는 주소 표시 줄이나 탐색 컨트롤이 없으므로 사용자가 콘텐츠를 사용하기가 어려울 수 있습니다.

WebView를 사용하기 전에 대체 솔루션이 더 적합한 지 항상 고려해야합니다 (예 : 콘텐츠를 기기의 기본 웹 브라우저로 오프로드하거나 Chrome 맞춤 탭을 구현할 수 있음).

매니페스트 업데이트

인터넷에서 비디오를 스트리밍하고 있으므로 매니페스트에 인터넷 권한을 추가해야합니다.

가로 모드에서 MainActivity를 시작하겠습니다.

UI에 WebView 추가

다음으로 앱에 WebView를 추가하겠습니다. 애플리케이션의 onCreate () 메소드에서 WebView를 액티비티 레이아웃에 추가하거나 전체 액티비티를 WebView로 변환 할 수 있습니다.

애플리케이션의 레이아웃에 WebView를 추가하겠습니다.

비디오를 선택하십시오

다시 한 번, 표시 할 비디오가 필요하지만 이번에는 아니 비디오 ID를 사용하는 경우 :

• Vimeo로 가서 사용하려는 비디오를 선택하십시오. 이번 겨울 시간 경과를 선택했습니다.
• “공유”버튼을 클릭하십시오.
• “Embed”아이콘을 선택하십시오. 이렇게하면 다음과 같은 소스 코드가 제공됩니다.

이 코드는 다음 정보를 제공합니다.

• iframe. 현재 컨텍스트 내에 다른 HTML 페이지를 포함하도록 지정합니다.
• src. 동영상의 경로를 통해 앱에서이 동영상을 찾을 수있는 위치를 알 수 있습니다.
• 폭 / 높이. 동영상의 크기
• 프레임 테두리. 비디오 프레임 주위에 테두리를 표시할지 여부 가능한 값은 경계선 (1)과 경계선 없음 (0)입니다.
• 전체 화면 허용. 비디오를 전체 화면 모드로 표시 할 수 있습니다.

이 소스 코드를 프로젝트에 문자열로 추가 할 것이므로이 정보를 다음 템플릿에 복사 / 붙여 넣기해야합니다.

문자열 vimeoVideo = "귀하의 링크가 여기에 있습니다';

실망스럽게도 임베드 코드가 Android 앱과 호환되기 전에 몇 가지 사항을 변경해야합니다. 먼저 Android Studio가 잘못된 형식에 대해 불평하지 않도록 몇 개의“”문자를 추가해야합니다.

문자열 vimeoVideo = "';

마지막으로 일부 Android 스마트 폰 화면에서는 기본 비디오 크기가 너무 클 수 있습니다.
프로덕션 환경에서는 일반적으로 다양한 크기로 실험하여 가능한 한 많은 다른 화면 구성에서 최상의 결과를 제공하는 것이 무엇인지 확인합니다. 그러나이 도움말이 통제되지 않도록하려면 다음을 사용하여 '일반적인'Android 스마트 폰 화면에서 좋은 결과를 얻을 수 있습니다.

문자열 vimeoVideo = "';

Android 앱에서 웹 페이지 표시

이제 레이아웃을 만들고 HTML을 모두 준비하고 MainActivity를 열고 WebView를 구현할 수 있습니다.

HTML 문자열을 추가하여 시작하십시오.

문자열 vimeoVideo = "';

다음으로 loadUrl () 메소드를 사용하여 WebView에 위의 웹 페이지를로드해야합니다.

webView.loadUrl (request.getUrl (). toString ());

JavaScript는 기본적으로 비활성화되어 있으므로 WebView에서 JavaScript를 활성화해야합니다.

WebView를 만들 때마다 기본 WebSettings 집합이 자동으로 할당됩니다. getSettings () 메소드를 사용하여이 WebSettings 객체를 검색 한 다음 setJavaScriptEnabled ()를 사용하여 JavaScript를 활성화합니다.

WebSettings webSettings = webView.getSettings (); webSettings.setJavaScriptEnabled (true);

이 모든 것을 MainActivity에 추가하면 코드는 다음과 같아야합니다.

import android.support.v7.app.AppCompatActivity; android.os.Bundle 가져 오기; import android.webkit.WebResourceRequest; import android.webkit.WebSettings; android.webkit.WebView 가져 오기; import android.webkit.WebViewClient; 공용 클래스 MainActivity 확장 AppCompatActivity {@Override protected void onCreate (Bundle savedInstanceState) {super.onCreate (savedInstanceState); setContentView (R.layout.activity_main); 문자열 vimeoVideo = ""; WebView webView = (WebView) findViewById (R.id.myWebView); webView.setWebViewClient (new WebViewClient () {@Override public boolean shouldOverrideUrlLoading (WebView webView, WebResourceRequest request) {webView.loadUrl (request.getUrl (). toString ()); return true;}}); WebSettings webSettings = webView.getSettings (); webSettings.setJavaScriptEnabled (true); webView.loadData (vimeoVideo, "text / html", "utf-8");}}

Vimeo 앱 테스트

당신은 지금부터 훈련을 알고 있습니다 : 실제 안드로이드 장치 또는 AVD 에이 프로젝트를 설치하십시오. WebView가 자동으로 재생되도록 설정되어 있지 않으므로 Vimeo의 미디어 컨트롤을 표시하려면 비디오를 탭해야합니다. 그런 다음 비디오가 제대로 작동하는지 확인하기 위해 비디오를 재생, 일시 정지, 되감기 및 빨리 감을 수 있습니다.

마무리

이 기사에서는 플랫폼 별 API 및 SDK와 Android 자체 WebView 구성 요소를 사용하여 YouTube, Vimeo 및 Dailymotion 비디오를 앱에 추가하는 방법을 설명했습니다. 또한 비디오 파일을 응용 프로그램과 번들로 묶는 방법을 보여 주므로 로컬로 저장하고 재생할 수 있습니다.

멀티미디어 콘텐츠를 사용자에게 표시하는 가장 좋아하는 방법은 무엇입니까? 아래 의견에 알려주십시오!