Exoplayer IMA 拡張機能を使ってみる

コレクションでコンテンツを整理 必要に応じて、コンテンツの保存と分類を行います。

IMA SDK を使用すると、ウェブサイトやアプリにマルチメディア広告を簡単に統合できます。IMA SDK は、どの VAST 準拠広告サーバーからでも広告をリクエストし、アプリでの広告再生を管理できます。IMA クライアント側 SDK では、コンテンツの動画再生のコントロールを可能にし、SDK は広告の再生を処理します。広告は、アプリのコンテンツ動画プレーヤーの上部に配置された別の動画プレーヤーで再生されます。

このガイドでは、ExoPlayer IMA 拡張機能を使って、IMA SDK を空の Android Studio プロジェクトに統合する方法を説明します。完成したサンプルの統合を表示または参照する場合は、GitHub から BasicExample をダウンロードしてください。

IMA クライアントサイドの概要

IMA クライアント側の実装には、このガイドで説明する 4 つの主要な SDK コンポーネントが必要です。

  • AdDisplayContainer: 広告がレンダリングされるコンテナ オブジェクト。
  • AdsLoader: 広告をリクエストし、広告リクエストのレスポンスのイベントを処理するオブジェクト。広告ローダーを 1 回だけインスタンス化する必要があります。このローダーはアプリの存続期間中に再利用できます。
  • AdsRequest: 広告リクエストを定義するオブジェクト。広告リクエストでは、VAST 広告タグの URL と追加のパラメータ（広告サイズなど）を指定します。
  • AdsManager: 広告リクエストへのレスポンスを含むオブジェクトで、広告再生を制御し、SDK によって発行された広告イベントをリッスンします。

Prerequisites

始める前に、Android Studio 3.0 以降が必要です。

1. 新しい Android Studio プロジェクトの作成

Android Studio プロジェクトを作成する手順は次のとおりです。

  1. Android Studio を起動します。
  2. [Start a new Android Studio project] を選択します。
  3. [Choose your project] ページで、[Empty Activity] テンプレートを選択します。
  4. [次へ] をクリックします。
  5. [Configure your project] ページで、プロジェクトに名前を付けて、言語として [Java] を選択します。
  6. [Finish] をクリックします。

2. ExoPlayer IMA 拡張機能をプロジェクトに追加する

まず、アプリケーション レベルの build.gradle ファイルで、拡張機能のインポートを dependencies セクションに追加します。ExoPlayer IMA 拡張機能のサイズが大きいため、ここに multidex を実装して有効にします。これは、minSdkVersion が 20 以下に設定されているアプリに必要です。また、新しい compileOptions を追加して Java バージョンの互換性情報を指定します。

app/build.gradle 
android {
    compileSdkVersion 30

    compileOptions {
        sourceCompatibility JavaVersion.VERSION_11
        targetCompatibility JavaVersion.VERSION_11
    }
  }

  defaultConfig {
      applicationId "com.google.ads.interactivemedia.v3.samples.videoplayerapp"
      minSdkVersion 16
      targetSdkVersion 30
      multiDexEnabled true
      versionCode 1
      versionName "1.0"
  }

    ...
}
dependencies {
    implementation 'androidx.multidex:multidex:2.0.1'
    implementation 'androidx.appcompat:appcompat:1.3.1'
    implementation 'com.google.android.exoplayer:exoplayer-core:2.18.1'
    implementation 'com.google.android.exoplayer:exoplayer-ui:2.18.1'
    implementation 'com.google.android.exoplayer:extension-ima:2.18.1'

    ...
}

IMA SDK で広告のリクエストに必要なユーザー権限を追加します。

app/src/main/AndroidManifest.xml 
<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
    package="com.example.project name">

    <!-- Required permissions for the IMA SDK -->
    <uses-permission android:name="android.permission.INTERNET"/>
    <uses-permission android:name="android.permission.ACCESS_NETWORK_STATE"/>

    ...

</manifest>

3.広告 UI コンテナを作成する

適切な ID で StyledPlayerView オブジェクトを作成して、ExoPlayer PlayerView として使用するビューを作成します。また、androidx.constraintlayout.widget.ConstraintLayout を LinearLayout に変更します。

app/src/main/res/layout/activity_main.xml
<?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_height="match_parent"
    tools:context=".MainActivity">

    <com.google.android.exoplayer2.ui.StyledPlayerView
        android:id="@+id/player_view"
        android:layout_width="match_parent"
        android:layout_height="wrap_content" />

</LinearLayout>

4. 広告リクエストにコンテンツ URL と広告タグ URL を追加する

コンテンツ URL と VAST 広告タグ URL を保存するエントリを strings.xml に追加します。

app/src/main/res/values/strings.xml 
<resources>
    <string name="app_name">Your_Project_Name</string>
    <string name="content_url"><![CDATA[https://storage.googleapis.com/gvabox/media/samples/stock.mp4]]></string>
    <string name="ad_tag_url"><![CDATA[https://pubads.g.doubleclick.net/gampad/ads?iu=/21775744923/external/single_ad_samples&sz=640x480&cust_params=sample_ct%3Dlinear&ciu_szs=300x250%2C728x90&gdfp_req=1&output=vast&unviewed_position_start=1&env=vp&impl=s&correlator=]]></string>

</resources>

5. ExoPlayer IMA 拡張機能をインポートする

ExoPlayer 拡張機能のインポート ステートメントを追加します。次に、PlayerView、SimpleExoPlayer、ImaAdsLoader のプライベート変数を追加して、Activity を拡張するように MainActivity クラスを更新します。

app/src/main/java/com/example/project name/MainActivity.java 

import android.app.Activity;
import android.net.Uri;
import android.os.Bundle;
import androidx.multidex.MultiDex;
import com.google.android.exoplayer2.ExoPlayer;
import com.google.android.exoplayer2.MediaItem;
import com.google.android.exoplayer2.ext.ima.ImaAdsLoader;
import com.google.android.exoplayer2.source.DefaultMediaSourceFactory;
import com.google.android.exoplayer2.source.MediaSourceFactory;
import com.google.android.exoplayer2.ui.StyledPlayerView;
import com.google.android.exoplayer2.upstream.DataSource;
import com.google.android.exoplayer2.upstream.DefaultDataSourceFactory;
import com.google.android.exoplayer2.util.Util;

...

public class MainActivity extends Activity {

  private StyledPlayerView playerView;
  private ExoPlayer player;
  private ImaAdsLoader adsLoader;

}

6. adsLoader インスタンスを作成する

onCreate メソッドを上書きし、必要な変数の割り当てを追加して、広告タグの URL で新しい adsLoader オブジェクトを作成します。

app/src/main/java/com/example/project name/MainActivity.java 

...

public class MainActivity extends Activity {

  private StyledPlayerView playerView;
  private ExoPlayer player;
  private ImaAdsLoader adsLoader;

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

    playerView = findViewById(R.id.player_view);

    // Create an AdsLoader.
    adsLoader = new ImaAdsLoader.Builder(/* context= */ this).build();
  }

}

7. プレーヤーを初期化して解放する

プレーヤーを初期化して解放するためのメソッドを追加します。初期化メソッドで SimpleExoPlayer を作成します。次に、AdsMediaSource を作成してプレーヤーに設定します。

app/src/main/java/com/example/project name/MainActivity.java 
public class MainActivity extends Activity {

  ...

  private void releasePlayer() {
    adsLoader.setPlayer(null);
    playerView.setPlayer(null);
    player.release();
    player = null;
  }

  private void initializePlayer() {
    // Set up the factory for media sources, passing the ads loader and ad view providers.
    DataSource.Factory dataSourceFactory = new DefaultDataSource.Factory(this);

    MediaSourceFactory mediaSourceFactory =
        new DefaultMediaSourceFactory(dataSourceFactory)
                .setAdsLoaderProvider(unusedAdTagUri -> adsLoader)
                .setAdViewProvider(playerView);

    // Create an ExoPlayer and set it as the player for content and ads.
    player = new ExoPlayer.Builder(this).setMediaSourceFactory(mediaSourceFactory).build();
    playerView.setPlayer(player);
    adsLoader.setPlayer(player);

    // Create the MediaItem to play, specifying the content URI and ad tag URI.
    Uri contentUri = Uri.parse(getString(R.string.content_url));
    Uri adTagUri = Uri.parse(getString(R.string.ad_tag_url));
    MediaItem mediaItem =
        new MediaItem.Builder()
            .setUri(contentUri)
            .setAdsConfiguration(new MediaItem.AdsConfiguration.Builder(adTagUri).build())
            .build();

    // Prepare the content and ad to be played with the SimpleExoPlayer.
    player.setMediaItem(mediaItem);
    player.prepare();

    // Set PlayWhenReady. If true, content and ads will autoplay.
    player.setPlayWhenReady(false);
  }
}

8. プレーヤー イベントを処理する

最後に、プレーヤーのライフサイクル イベントのコールバックを作成します。

  • onStart
  • onResume
  • onStop
  • onPause
  • onDestroy
app/src/main/java/com/example/project name/MainActivity.java 
public class MainActivity extends Activity {

  private PlayerView playerView;
  private SimpleExoPlayer player;
  private ImaAdsLoader adsLoader;

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

      playerView = findViewById(R.id.player_view);

      // Create an AdsLoader with the ad tag url.
      adsLoader = new ImaAdsLoader(this, Uri.parse(getString(R.string.ad_tag_url)));
  }

  @Override
  public void onStart() {
    super.onStart();
    //
    if (Util.SDK_INT > 23) {
      initializePlayer();
      if (playerView != null) {
        playerView.onResume();
      }
    }
  }

  @Override
  public void onResume() {
    super.onResume();
    if (Util.SDK_INT <= 23 || player == null) {
      initializePlayer();
      if (playerView != null) {
        playerView.onResume();
      }
    }
  }

  @Override
  public void onPause() {
    super.onPause();
    if (Util.SDK_INT <= 23) {
      if (playerView != null) {
        playerView.onPause();
      }
      releasePlayer();
    }
  }

  @Override
  public void onStop() {
    super.onStop();
    if (Util.SDK_INT > 23) {
      if (playerView != null) {
        playerView.onPause();
      }
      releasePlayer();
    }
  }

  @Override
  protected void onDestroy() {
    super.onDestroy();
    adsLoader.release();
  }

  ...

}

これで、これで、IMA SDK を使用して広告のリクエストと表示が完了しました。その他の SDK 機能については、他のガイドまたは GitHub のサンプルをご覧ください。