コンテンツ

• AndroidアプリにYouTube動画を埋め込む方法
• YouTube動画のIDを取得する
• プロジェクトのSHA-1フィンガープリントを取得します
• Google APIコンソールに登録します
• YouTube Android Player APIをダウンロードします
• マニフェストを更新する
• YouTubeプレーヤーのレイアウトを作成する
• YouTubeプレーヤーの実装
• 1. YouTubeBaseActivityを拡張する
• 2. YouTubeプレーヤーを初期化する
• 3. onInitializationSuccessおよびonInitializationFailureを実装します
• YouTubeビデオの再生：完成したコード
• YouTube Android Player APIのテスト
• DailyViewコンテンツをWebViewに表示する
• DailymotionビデオIDを取得する
• Dailymotion SDKを追加する
• インターネットアクセスをリクエストする
• DailymotionのPlayerWebViewウィジェットを追加する
• Dailymotion PlayerWebViewの構成
• Vimeoビデオの埋め込み
• マニフェストの更新
• WebViewをUIに追加する
• ビデオを選択してください
• AndroidアプリでWebページを表示する
• Vimeoアプリをテストする
• まとめ

MediaControllerが画面に表示されると、MediaControllerの進行状況バーをドラッグして、ビデオを再生、一時停止、巻き戻し、早送りしたり、クリップ内の任意のポイントにジャンプしたりできます。

AndroidアプリにYouTube動画を埋め込む方法

アプリケーションにビデオファイルを埋め込むと、デバイスのインターネット接続に関係なく、常にビデオを使用できるようになります。ただし、アプリに複数の大きな高解像度ビデオを埋め込むことも、APKのサイズを大きくするための優れた方法です！

APKのサイズが心配な場合、またはアプリケーションに追加の追加機能が追加された動画が含まれている場合は、それらの動画をオンラインプラットフォームに公開し、実行時にアプリケーションを介してストリーミングすることができます。

オンラインで動画を公開する場合、すぐに思い浮かぶウェブサイトが1つあるので、このセクションでは埋め込み方法を紹介します どれか 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 Consoleを使用して、プロジェクトのSHA-1フィンガープリントを取得できます。

• Android Studioウィンドウの右側にある[Gradle]タブを選択します。
• 「アプリ」モジュールを選択し、続いて「タスク」>「Android」>「signingReport」を選択します。

• 画面の右下に表示される[Gradle Console]タブを開きます。
• Gradle Consoleが自動的に開きます。このウィンドウでSHA-1値を見つけ、メモします。

デバッグ証明書のフィンガープリントを使用していますが、これはアプリケーションのテストにのみ適しています。アプリを公開する前に、常にそのアプリケーションのリリース証明書に基づいて新しいAPIキーを生成する必要があります。

Google APIコンソールに登録します

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クライアントライブラリをダウンロードする必要があります。このライブラリを使用する場合は、ProGuardを有効にして、APKを可能な限り軽量に保つことをお勧めします。

YouTubeライブラリをプロジェクトに追加するには：

• YouTube Android PlayerのWebサイトにアクセスして、最新バージョンをダウンロードしてください。
• 後続のzipファイルを解凍します。
• 新しく解凍したフォルダーを開き、その「libs」サブフォルダーに移動します。これには「YouTubeAndroidPlayerApi.jar」ファイルが含まれているはずです。
• Android Studioで、「プロジェクト」ビューに切り替えます。
• YouTubeライブラリがビルドパスに確実に含まれるようにするには、プロジェクトの「/ 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を使用する場合は、そのレイアウトの対応するActivityクラスで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、new YouTubePlayer.OnInitializedListener（）{

3. onInitializationSuccessおよびonInitializationFailureを実装します

最後に、初期化が成功したか失敗したかに応じて、アプリケーションの反応を指定する必要があります。 YouTubeプレーヤーが正常に初期化された場合、一意の動画IDを渡すことで動画を読み込むことができます。

public void onInitializationSuccess（YouTubePlayer.Provider provider、YouTubePlayer youTubePlayer、boolean b）{//動画IDを指定する// youTubePlayer.loadVideo（ "hJLBcViaX8Q"）;

次に、失敗した初期化を処理する方法をアプリケーションに指示する必要があります。トーストを表示します。

public void onInitializationFailure（YouTubePlayer.Provider provider、YouTubeInitializationResult youTubeInitializationResult）{Toast.makeText（MainActivity.this、 "エラーが発生しました"、Toast.LENGTH_SHORT）.show（）; }

YouTubeビデオの再生：完成したコード

MainActivityに上記のすべてを追加すると、次のような結果になります。

import android.os.Bundle; import 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 extends YouTubeBaseActivity {//これを独自の一意のAPIキーに置き換えることを忘れないでください// public static final String YOUR_API_KEY = "YOUR_API_KEY_HERE"; @Override protected void onCreate（Bundle savedInstanceState）{super.onCreate（savedInstanceState）; setContentView（R.layout.activity_main）; YouTubePlayerView youTubePlayerView =（YouTubePlayerView）findViewById（R.id.YouTubePlayer）; // YouTubeプレーヤーの初期化// youTubePlayerView.initialize（YOUR_API_KEY、new YouTubePlayer.OnInitializedListener（）{@Override // YouTubeプレーヤーが正常に初期化された場合... // public void onInitializationSuccess（YouTubePlayer.Provider provider、YouTubePlayer youTubePlayer、boolean b）{// ..その後、次の動画の再生を開始// youTubePlayer.loadVideo（ "hJLBcViaX8Q"）;} @Override //初期化に失敗した場合... // public void onInitializationFailure（YouTubePlayer.Provider provider、YouTubeInitializationResult youTubeInitializationResult） {// ...次に、トーストを表示します// Toast.makeText（MainActivity.this、 "エラーが発生しました"、Toast.LENGTH_SHORT）.show（）;}}）; }}

YouTube Android Player APIのテスト

このアプリケーションは、物理的なAndroidスマートフォンまたはタブレット、またはAVDでテストできます。 AVDを使用している場合は、Google Play開発者サービスを含むシステムイメージを使用していることを確認してください。 YouTube APIは、YouTube for Androidアプリの一部として配信されるサービスに依存しているため、YouTubeアプリもAVDまたは物理的なAndroidデバイスにインストールする必要があります。

プロジェクトをデバイスにインストールすると、アプリケーションが読み込まれるとすぐに、YouTubeビデオの再生が自動的に開始されます。ビデオをタップすると、ビデオの一時停止、再生、早送り、巻き戻しに使用できる使い慣れたすべてのYouTubeコントロールにアクセスできます。

DailyViewコンテンツをWebViewに表示する

Androidアプリへの動画の埋め込みに関しては、さまざまな動画共有プラットフォームを選択できます。一部のプラットフォームでは、Dailymotionなど、コンテンツとのやり取りを支援するSDKを作成しています。

Android用のDailymotion Player SDKは、AndroidのWebViewコンポーネントの薄いラッパーを提供します。これにより、アプリケーションにDailymotionビデオを簡単に埋め込むことができます。

このセクションでは、サードパーティのDailymotion Player SDKを使用して、Dailymotion Webサイトからビデオをストリーミングする方法を示します。

DailymotionビデオIDを取得する

まず、Dailymotionに移動して、表示するビデオを見つけ、そのビデオIDを取得します。

この霧のタイムラプスビデオを使用します。次のURLがあります。

www.dailymotion.com/video/x71jlg3

動画のIDはURLの末尾にある一意の文字列であるため、私の動画IDはx71jlg3です。

Dailymotion SDKを追加する

Dailymotion SDKを使用しているため、プロジェクトの依存関係として宣言する必要があります。プロジェクトのbuild.gradleファイルを開き、次を追加します。

依存関係{implementation fileTree（dir：libs、include：）//以下を追加//実装com.dailymotion.dailymotion-sdk-android：sdk：0.1.29 implementation com.android.support:appcompat-v7:28.0.0 implementation com.android.support:design:28.0.0 implementation 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の主要なコンポーネントは、AndroidのWebViewコンポーネントの薄いラッパーを提供するPlayerWebView UI要素です。

次のセクションでWebViewについて詳しく説明しますが、WebViewを使用すると、アプリケーションにWebページを埋め込むことができます。 SDKの専用PlayerWebViewを使用していなかった場合、AndroidのバニラWebViewコンポーネントを使用して、アプリケーション内にDailymotion Webページ全体を表示できます。

代わりに、レイアウトにPlayerWebViewを追加しましょう。

Dailymotion PlayerWebViewの構成

PlayerWebViewウィジェットを実装したら、対応するActivityクラスでプレーヤーを構成する必要があります。

MainActivityを開き、PlayerWebViewへの参照を取得することから始めます。

dailyMotionPlayer =（PlayerWebView）findViewById（R.id.dailymotionPlayer）;

次に、「dailyMotionPlayer.load」を呼び出して、以前に取得したビデオIDを渡します。

dailyMotionPlayer.load（ "x71jlg3"）;

これにより、次のことがわかります。

import android.support.v7.app.AppCompatActivity; import 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（Bundle savedInstanceState）{super.onCreate（savedInstanceState）; setContentView（R.layout.activity_main）; // PlayerWebView //を取得しますdailyMotionPlayer =（PlayerWebView）findViewById（R.id.dailymotionPlayer）;地図 playerParams = new HashMap <>（）; //パラメータを使用して動画を読み込みます// playerParams.put（ "key"、 "value"）; //動画IDを渡します// dailyMotionPlayer.load（ "x71jlg3"）; }}

物理的なAndroidデバイスまたはエミュレーターにプロジェクトをインストールすると、Dailymotionビデオが自動的に再生を開始します。

Vimeoビデオの埋め込み

ビデオコンテンツの埋め込みに関しては、可能な限りプラットフォーム固有のAPIまたはプラットフォーム固有のSDKを使用するのが一般的です。しかし、念頭に置いているビデオ共有プラットフォーム用に、利用可能なSDKまたはAPIがない場合はどうなりますか？

これらのシナリオでは、AndroidのWebViewコンポーネントを使用して、アクティビティのレイアウトに埋め込まれたWebページとしてビデオを表示できます。この最後のセクションでは、WebViewを使用して、人気のあるVimeoプラットフォームからビデオを埋め込む方法を紹介します。

ビデオコンテンツの表示に加えて、WebViewは他の多くのシナリオで役立ちます。たとえば、定期的に更新する必要があるコンテンツがあるとします。そのコンテンツをオンラインでホストし、WebViewを介してアプリケーションに表示すると、新しいバージョンのアプリを公開することなく、いつでもそのコンテンツをオンラインで変更できる柔軟性が得られます。ただし、WebViewは通常スタンドアロンのWebブラウザーに期待される機能の多くをサポートしていないため、WebViewを使用する場合は注意してください。特に、WebViewにはアドレスバーやナビゲーションコントロールがないため、ユーザーがコンテンツを操作しにくくなる可能性があります。

WebViewを使用する前に、デバイスのデフォルトのWebブラウザーにコンテンツをオフロードしたり、Chromeカスタムタブを実装したりするなど、代替ソリューションがより適切かどうかを常に検討する必要があります。

マニフェストの更新

インターネットからビデオをストリーミングしているので、マニフェストにインターネット許可を追加する必要があります。

また、MainActivityをランドスケープモードで起動します。

WebViewをUIに追加する

次に、アプリにWebViewを追加しましょう。 WebViewをアクティビティのレイアウトに追加するか、アプリケーションのonCreate（）メソッドに実装することにより、アクティビティ全体をWebViewに変換できます。

アプリケーションのレイアウトにWebViewを追加します。

ビデオを選択してください

もう一度、表示する動画が必要ですが、今回は じゃない ビデオIDを使用して：

• Vimeoに移動して、使用するビデオを選択します。この冬の時間経過を選択しました。
• [共有]ボタンをクリックします。
• 「埋め込み」アイコンを選択します。これにより、次のような埋め込みコードが提供されます。

このコードは次の情報を提供します。

• iframe。 現在のコンテキスト内に別のHTMLページを埋め込むことを指定します。
• src。 動画のパス。アプリはこの動画の場所を知っています。
• 幅高さ。 ビデオの寸法。
• 枠線。 ビデオのフレームの周囲に境界線を表示するかどうか。可能な値は、ボーダー（1）とボーダーなし（0）です。
• allowfullscreen。 これにより、ビデオをフルスクリーンモードで表示できます。

この埋め込みコードをプロジェクトに文字列として追加するため、この情報をコピーして次のテンプレートに貼り付ける必要があります。

文字列vimeoVideo = "リンクはこちら';

残念なことに、埋め込みコードがAndroidアプリと互換性を持つ前に、いくつかの変更を行う必要があります。まず、Android Studioが誤ったフォーマットについて文句を言わないように、「」文字をいくつか追加する必要があります。

文字列vimeoVideo = "';

最後に、一部のAndroidスマートフォンの画面では、デフォルトのビデオサイズが大きすぎる場合があります。
実稼働環境では、通常、さまざまなディメンションを試して、可能な限り多くの異なる画面構成で最適な結果が得られるものを確認します。ただし、この記事を手に負えないようにするために、次のものを使用します。これにより、「典型的な」Androidスマートフォンの画面で良い結果が得られます。

文字列vimeoVideo = "';

AndroidアプリでWebページを表示する

これで、レイアウトを作成し、HTMLをすべて準備し、MainActivityを開いて、WebViewを実装できます。

HTML文字列を追加することから始めます。

文字列vimeoVideo = "';

次に、loadUrl（）メソッドを使用して、WebViewに上記のWebページをロードする必要があります。

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; import android.os.Bundle; import android.webkit.WebResourceRequest; import android.webkit.WebSettings; import 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アプリをテストする

これまでにドリルを知っています。このプロジェクトを物理的なAndroidデバイスまたはAVDにインストールします。 WebViewは自動的に再生するように設定されていないため、Vimeoのメディアコントロールを表示するには、ビデオをタップする必要があります。その後、動画を再生、一時停止、巻き戻し、早送りして、正しく機能することを確認できます。

まとめ

この記事では、プラットフォーム固有のAPIとSDK、Android独自のWebViewコンポーネントを使用して、YouTube、Vimeo、Dailymotionの動画をアプリに追加する方法を示しました。また、ビデオファイルをアプリケーションにバンドルして、ローカルに保存および再生できるようにする方法も示しました。

ユーザーにマルチメディアコンテンツを表示するためのお気に入りの方法は何ですか？以下のコメントでお知らせください！