תחילת העבודה עם תוסף IMA של ExoPlayer

ExoPlayer הוא נגן מדיה ברמת האפליקציה ל-Android. במדריך הזה מוסבר איך להשתמש בתוסף ExoPlayer IMA, שעוטף את IMA DAI SDK, כדי לשלוח בקשה להצגת סטרימינג של מדיה עם מודעות ותוכן.

אלה כמה מהיתרונות של התוסף:

  • מפשט את הקוד שנדרש לשילוב של IMA עם תכונות.
  • מקצר את זמן הפיתוח שנדרש כדי לעדכן לגרסאות חדשות של IMA.

התוסף ExoPlayer IMA תומך בפרוטוקולי סטרימינג של HLS ו-DASH. הנה סיכום:

תמיכה בזרם של תוסף ExoPlayer-IMA
שידור חי שידורי VOD
HLS סימן וי סימן וי
DASH סימן וי סימן וי

יש תמיכה בשידורים חיים בפורמט DASH ב-ExoPlayer-IMA בגרסה 1.1.0 ומעלה.

המדריך הזה מבוסס על המדריך בנושא ExoPlayer, ומוסבר בו איך ליצור אפליקציה מלאה ולשלב את התוסף. אפשר לראות דוגמה עם אפליקציה מלאה לדוגמה ב-ExoPlayerExample מ-GitHub.

דרישות מוקדמות

יצירת פרויקט חדש ב-Android Studio

כדי ליצור פרויקט ב-Android Studio:

  • מפעילים את Android Studio.
  • בוחרים באפשרות Start a new Android Studio project (התחלת פרויקט חדש ב-Android Studio).
  • בדף בחירת הפרויקט, בוחרים בתבנית ללא פעילות.
  • לוחצים על הבא.
  • בדף Configure your project, נותנים שם לפרויקט ובוחרים באפשרות Java כשפה.

  • לוחצים על סיום.

הוספת התוסף ExoPlayer IMA לפרויקט

מוסיפים הצהרות import לתוסף בקובץ build.gradle ברמת האפליקציה בקטע dependencies.

מגדירים את האפליקציה ומפעילים את התכונה multidex. הדבר נדרש בגלל הגודל של התוסף, והוא חובה באפליקציות שבהן הערך של minSdkVersion מוגדר כ-Android 4.4W (רמת API ‏20) או נמוך יותר.

לדוגמה:

app/build.gradle

android {

  ...

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

    ...
}
dependencies {
    implementation 'androidx.multidex:multidex:2.0.1'
    implementation 'androidx.media3:media3-ui:1.7.1'
    implementation 'androidx.media3:media3-exoplayer:1.7.1'
    implementation 'androidx.media3:media3-exoplayer-hls:1.7.1'
    implementation 'androidx.media3:media3-exoplayer-dash:1.7.1'

    // Adding the ExoPlayer IMA extension for ads will also include the IMA
    // SDK as a dependency.
    implementation 'androidx.media3:media3-exoplayer-ima:1.7.1'
}

מוסיפים את הרשאות המשתמש שנדרשות על ידי IMA DAI 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 DAI SDK -->
    <uses-permission android:name="android.permission.INTERNET"/>
    <uses-permission android:name="android.permission.ACCESS_NETWORK_STATE"/>

    ...

</manifest>

הוספת הצהרות כוונות

אם האפליקציה שלכם מטרגטת Android 11 (רמת API‏ 30) ומעלה, הגרסאות הנוכחיות והאחרונות של IMA DAI SDK מחייבות הצהרה מפורשת על הכוונה לפתוח קישורים לאתרים. כדי לאפשר למשתמשים ללחוץ על מודעות (לחיצה על הלחצן מידע נוסף), צריך להוסיף את קטע הקוד הבא לקובץ המניפסט של האפליקציה:

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

      ...

    </application>

    <queries>
      <intent>
          <action android:name="android.intent.action.VIEW" />
          <data android:scheme="https" />
      </intent>
      <intent>
          <action android:name="android.intent.action.VIEW" />
          <data android:scheme="http" />
      </intent>
    </queries>
  </manifest>

הגדרת ממשק המשתמש של ExoPlayer

יוצרים את אובייקט PlayerView לשימוש ב-ExoPlayer.

משנים את androidx.constraintlayout.widget.ConstraintLayout ל-LinearLayout, שמומלץ לשימוש בתוסף ExoPlayer IMA.

לדוגמה:

app/src/main/res/layout/activity_my.xml

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:background="@android:color/black"
    android:id="@+id/container"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    tools:context=".MyActivity"
    tools:ignore="MergeRootFrame">

    <androidx.media3.ui.PlayerView
        android:id="@+id/player_view"
        android:layout_width="match_parent"
        android:layout_height="match_parent" />

</LinearLayout>

הוספת פרמטרים לסטרימינג

בדף IMA sample stream ‎ יש נכסי זרם לדוגמה שאפשר להשתמש בהם כדי לבדוק את הפרויקט. בנוסף, אפשר לעיין בקטע בנושא DAI ב-Ad Manager כדי לקבל מידע על הגדרת סטרימינג משלכם.

בשלב הזה מוצגת הגדרה של שידור חי, אבל התוסף ExoPlayer IMA תומך גם בשידורי DAI VOD. בשלב שמתייחס לשידורים של וידאו על פי דרישה (VOD) מוסבר אילו שינויים צריך לבצע באפליקציה כדי שהיא תוכל לטפל בשידורים של VOD.

ייבוא התוסף ExoPlayer IMA

מוסיפים את הצהרות הייבוא של תוסף ExoPlayer.

מוסיפים את המשתנים הפרטיים הבאים ל-MyActivity.java:

מוסיפים את מפתח הנכס של סטרימינג HLS של Big Buck Bunny (Live) כדי לבדוק את הסטרימינג הזה. יש עוד סטרימינג שאפשר לבדוק בדף הדוגמה של IMA.

יוצרים קבוע KEY_ADS_LOADER_STATE כדי לשמור את המצב AdsLoader ולאחזר אותו.

לדוגמה:

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


import static androidx.media3.common.C.CONTENT_TYPE_HLS;

import android.app.Activity;
import android.net.Uri;
import android.os.Bundle;
import androidx.annotation.Nullable;
import androidx.annotation.OptIn;
import androidx.media3.common.MediaItem;
import androidx.media3.common.util.Util;
import androidx.media3.datasource.DataSource;
import androidx.media3.datasource.DefaultDataSource;
import androidx.media3.exoplayer.ExoPlayer;
import androidx.media3.exoplayer.ima.ImaServerSideAdInsertionMediaSource;
import androidx.media3.exoplayer.ima.ImaServerSideAdInsertionUriBuilder;
import androidx.media3.exoplayer.source.DefaultMediaSourceFactory;
import androidx.media3.exoplayer.util.EventLogger;
import androidx.media3.ui.PlayerView;
import androidx.multidex.MultiDex;
import com.google.ads.interactivemedia.v3.api.ImaSdkFactory;
import com.google.ads.interactivemedia.v3.api.ImaSdkSettings;

...

public class MyActivity extends Activity {

  private static final String KEY_ADS_LOADER_STATE = "ads_loader_state";
  private static final String SAMPLE_ASSET_KEY = "c-rArva4ShKVIAkNfy6HUQ";

  private PlayerView playerView;
  private ExoPlayer player;
  private ImaSdkSettings imaSdkSettings;
  private ImaServerSideAdInsertionMediaSource.AdsLoader adsLoader;
  private ImaServerSideAdInsertionMediaSource.AdsLoader.State adsLoaderState;

}

יצירת מופע של adsLoader

מחליפים את השיטה onCreate כדי למצוא את PlayerView ולבדוק אם יש AdsLoader.State שמור, שאפשר להשתמש בו כשמפעילים את האובייקט adsLoader.

בנוסף, צריך להפעיל multidex אם נדרש לפי מספר השיטות של האפליקציה minSdkVersion(כמו שמוסבר בשלב 2).

לדוגמה:

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

...

public class MyActivity extends Activity {

  private static final String KEY_ADS_LOADER_STATE = "ads_loader_state";
  private static final String SAMPLE_ASSET_KEY = "c-rArva4ShKVIAkNfy6HUQ";

  private PlayerView playerView;
  private ExoPlayer player;
  private ImaSdkSettings imaSdkSettings;
  private ImaServerSideAdInsertionMediaSource.AdsLoader adsLoader;
  private ImaServerSideAdInsertionMediaSource.AdsLoader.State adsLoaderState;

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

    // Initialize the IMA SDK as early as possible when the app starts. If your app already
    // overrides Application.onCreate(), call this method inside the onCreate() method.
    // https://developer.android.com/topic/performance/vitals/launch-time#app-creation
    ImaSdkFactory.getInstance().initialize(this, getImaSdkSettings());

    playerView = findViewById(R.id.player_view);

    // Checks if there is a saved AdsLoader state to be used later when
    // initiating the AdsLoader.
    if (savedInstanceState != null) {
      Bundle adsLoaderStateBundle = savedInstanceState.getBundle(KEY_ADS_LOADER_STATE);
      if (adsLoaderStateBundle != null) {
        adsLoaderState =
            ImaServerSideAdInsertionMediaSource.AdsLoader.State.fromBundle(
                adsLoaderStateBundle);
      }
    }
  }

  private ImaSdkSettings getImaSdkSettings() {
    if (imaSdkSettings == null) {
      imaSdkSettings = ImaSdkFactory.getInstance().createImaSdkSettings();
      // Set any IMA SDK settings here.
    }
    return imaSdkSettings;
  }

}

הוספת שיטות לאתחול הנגן

מוסיפים שיטה לאתחול הנגן ומבצעים את הפעולות הבאות:

  • יוצרים מכונת AdsLoader.
  • יוצרים את ExoPlayer.
  • יוצרים MediaItem עם מפתח הנכס של השידור החי.
  • מגדירים את MediaItem בנגן.

לדוגמה:

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

public class MyActivity extends Activity {

  ...

  
  // Create a server side ad insertion (SSAI) AdsLoader.
  private ImaServerSideAdInsertionMediaSource.AdsLoader createAdsLoader() {
    ImaServerSideAdInsertionMediaSource.AdsLoader.Builder adsLoaderBuilder =
        new ImaServerSideAdInsertionMediaSource.AdsLoader.Builder(this, playerView);

    // Attempt to set the AdsLoader state if available from a previous session.
    if (adsLoaderState != null) {
      adsLoaderBuilder.setAdsLoaderState(adsLoaderState);
    }

    return adsLoaderBuilder
        .setImaSdkSettings(getImaSdkSettings())
        .build();
  }

  private void initializePlayer() {
    adsLoader = createAdsLoader();

    // Set up the factory for media sources, passing the ads loader.
    DataSource.Factory dataSourceFactory = new DefaultDataSource.Factory(this);
    DefaultMediaSourceFactory mediaSourceFactory = new DefaultMediaSourceFactory(dataSourceFactory);

    // MediaSource.Factory to create the ad sources for the current player.
    ImaServerSideAdInsertionMediaSource.Factory adsMediaSourceFactory =
        new ImaServerSideAdInsertionMediaSource.Factory(adsLoader, mediaSourceFactory);

    // 'mediaSourceFactory' is an ExoPlayer component for the DefaultMediaSourceFactory.
    // 'adsMediaSourceFactory' is an ExoPlayer component for a MediaSource factory for IMA server
    // side inserted ad streams.
    mediaSourceFactory.setServerSideAdInsertionMediaSourceFactory(adsMediaSourceFactory);

    // 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);

    // Build an IMA SSAI media item to prepare the player with.
    Uri ssaiLiveUri =
        new ImaServerSideAdInsertionUriBuilder()
            .setAssetKey(SAMPLE_ASSET_KEY)
            .setFormat(CONTENT_TYPE_HLS) // Use CONTENT_TYPE_DASH for dash streams.
            .build();

    // Create the MediaItem to play, specifying the stream URI.
    MediaItem ssaiMediaItem = MediaItem.fromUri(ssaiLiveUri);

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

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

הוספת שיטה לשחרור הנגן

מוסיפים שיטה לשחרור הנגן ברצף הזה:

  • מגדירים את הפניות של הנגן ל-null ומשחררים את המשאבים של הנגן.
  • משחררים את המצב של adsLoader.

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

public class MyActivity extends Activity {

  ...

  private void releasePlayer() {
    // Set the player references to null and release the player's resources.
    playerView.setPlayer(null);
    player.release();
    player = null;

    // Release the adsLoader state so that it can be initiated again.
    adsLoaderState = adsLoader.release();
  }

טיפול באירועי שחקנים

לבסוף, יוצרים קודים להתקשרות חזרה לאירועים במחזור החיים של הפעילות כדי לטפל בהפעלת הסטרימינג.

כדי לתמוך בגרסה 24 ומעלה של Android SDK:

כדי לתמוך בגרסאות Android SDK נמוכות מ-24:

onStart() ו-onResume() ממופים ל-playerView.onResume(), ו-onStop() ו-onPause() ממופים ל-playerView.onPause().

בשלב הזה נעשה שימוש גם באירוע onSaveInstanceState() כדי לנסות לשמור את adsLoaderState.

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

public class MyActivity extends Activity {

  ...

  @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
  public void onSaveInstanceState(Bundle outState) {
    // Attempts to save the AdsLoader state to handle app backgrounding.
    if (adsLoaderState != null) {
      outState.putBundle(KEY_ADS_LOADER_STATE, adsLoaderState.toBundle());
    }
  }

  ...

}

הגדרה של שידור VOD (אופציונלי)

אם האפליקציה שלכם נדרשת להפעיל תוכן VOD עם מודעות, תצטרכו לבצע את הפעולות הבאות:

  1. מוסיפים CMS ID ו-Video ID לזרם בדיקה של VOD.
  2. יוצרים URI של VOD עם SSAI באמצעות ImaServerSideAdInsertionUriBuilder().
  3. משתמשים ב-URI החדש כפריט המדיה של הנגן.

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

public class MyActivity extends Activity {

  private static final String KEY_ADS_LOADER_STATE = "ads_loader_state";
  private static final String SAMPLE_ASSET_KEY = "c-rArva4ShKVIAkNfy6HUQ";
  private static final String SAMPLE_CMS_ID = "2548831";
  private static final String SAMPLE_VIDEO_ID = "tears-of-steel";

  ...

  private void initializePlayer() {

     ...

    Uri ssaiVodUri =
        new ImaServerSideAdInsertionUriBuilder()
            .setContentSourceId(SAMPLE_CMS_ID)
            .setVideoId(SAMPLE_VIDEO_ID)
            .setFormat(CONTENT_TYPE_HLS)
            .build();

    // Create the MediaItem to play, specifying the stream URI.
    MediaItem ssaiMediaItem = MediaItem.fromUri(ssaiVodUri);

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

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

זהו! עכשיו אתם מבקשים ומפעילים זרם מדיה באמצעות התוסף ExoPlayer IMA. הקוד המלא זמין בדוגמאות ל-DAI ב-Android ב-GitHub.