راه‌اندازی با «درج آگهی پویا» با خدمات کامل

پلاتفرم را انتخاب کنید: HTML5 Android iOS tvOS Cast Roku

این راهنما نشان می‌دهد که چگونه IMA DAI SDK را در یک برنامه پخش‌کننده ویدیو ساده ادغام کنید. اگر می‌خواهید یک نمونه ادغام کامل‌شده را مشاهده یا دنبال کنید، BasicExample را از GitHub بارگیری کنید.

نمای کلی IMA DAI

پیاده‌سازی IMA DAI شامل چهار مؤلفه اصلی کیت توسعه نرم‌افزار است که در این راهنما نشان داده شده است:

  • StreamDisplayContainer: شیء نگهدارنده‌ای که روی عنصر بازپخش ویدیو قرار می‌گیرد و عناصر میانای کاربر آگهی را در خود جای می‌دهد.
  • AdsLoader: شیئی که درخواست جاری‌سازی می‌کند و رویدادهای راه‌اندازی‌شده توسط اشیای پاسخ درخواست جاری‌سازی را مدیریت می‌کند. باید فقط یک بارگذارنده آگهی را نمونه‌سازی کنید که بتواند درطول عمر برنامه دوباره استفاده شود.
  • StreamRequest: شیئی که درخواست جاری‌سازی را تعریف می‌کند. درخواست‌های جاری‌سازی می‌تواند برای ویدیو به‌درخواست یا جاری‌سازی زنده باشد. درخواست‌های جاری‌سازی زنده کلید دارایی را مشخص می‌کنند، درحالی‌که درخواست‌های VOD شناسه CMS و شناسه ویدیو را مشخص می‌کنند. هر دو نوع درخواست می‌توانند به‌طور اختیاری شامل یک کلید API باشند که برای دسترسی به جریان‌های مشخص‌شده لازم است، و یک کد شبکه Google Ad Manager برای IMA SDK تا شناسه‌های تبلیغات را طبق تنظیمات Google Ad Manager مدیریت کند.
  • StreamManager: شیئی که جریان‌های درج آگهی پویا و تعاملات با پس‌بک DAI را مدیریت می‌کند. مدیر جاری‌سازی همچنین پینگ‌های ردیابی را مدیریت می‌کند و رویدادهای جاری‌سازی و آگهی را به ناشر بازارسال می‌کند.

پیش‌نیازها

  • استودیو Android
  • برنامه پخش‌کننده ویدیو نمونه برای ادغام کیت توسعه نرم‌افزار

بارگیری و اجرای برنامه پخش‌کننده ویدیو نمونه

برنامه نمونه پخش‌کننده ویدیویی ارائه می‌دهد که ویدیو HLS را پخش می‌کند. از این به‌عنوان نقطه شروعی برای ادغام قابلیت‌های DAI در کیت توسعه نرم‌افزار IMA DAI استفاده کنید.

  1. برنامه نمونه پخش‌کننده ویدیو را بارگیری و از حالت فشرده خارج کنید.

  2. «استودیو Android» را راه‌اندازی کنید و باز کردن پروژه موجود در «استودیو Android» را انتخاب کنید، یا اگر «استودیو Android» ازقبل درحال اجرا است، فایل > جدید > وارد کردن پروژه را انتخاب کنید. سپس SampleVideoPlayer/build.gradle را انتخاب کنید.

  3. با انتخاب ابزارها > Android > همگام‌سازی پروژه با فایل‌های Gradle، همگام‌سازی Gradle را اجرا کنید.

  4. مطمئن شوید که برنامه پخش‌کننده بااستفاده از اجرا > اجرای «برنامه» در دستگاه Android فیزیکی یا «دستگاه مجازی Android» کامپایل و اجرا می‌شود. طبیعی است که بار شدن جاری‌سازی ویدیو چند لحظه قبل‌از پخش طول بکشد.

بررسی پخش‌کننده ویدیو نمونه

پخش‌کننده ویدیو نمونه هنوز حاوی هیچ کد ادغام IMA DAI SDK نیست. برنامه نمونه از دو بخش اصلی تشکیل شده است:

  1. samplevideoplayer/SampleVideoPlayer.java: یک پخش‌کننده HLS مبتنی بر ExoPlayer که به‌عنوان پایه ادغام IMA DAI عمل می‌کند.

  2. videoplayerapp/MyActivity.java: این فعالیت پخش‌کننده ویدیو را ایجاد می‌کند و Context و media3.ui.PlayerView را به آن منتقل می‌کند.

افزودن IMA DAI SDK به برنامه پخش‌کننده

همچنین باید ارجاعی به IMA DAI SDK اضافه کنید. در Android Studio، موارد زیر را به فایل build.gradle در سطح برنامه اضافه کنید، که در app/build.gradle قرار دارد. کیت توسعه نرم‌افزار IMA به فعال بودن شکرزدایی کتابخانه نیاز دارد که باید آن را با تنظیم coreLibraryDesugaringEnabled true و افزودن 'com.android.tools:desugar_jdk_libs' به‌عنوان وابستگی در فایل build.gradle انجام دهید. برای جزئیات، میاناهای برنامه‌سازی کاربردی Java 11+‎ دردسترس ازطریق شکرزدایی با مشخصات nio را ببینید.

repositories {
    google()
    mavenCentral()
}

dependencies {
    def media3_version = "1.11.0"
    coreLibraryDesugaring("com.android.tools:desugar_jdk_libs:2.1.5")
    implementation(platform("org.jetbrains.kotlin:kotlin-bom:2.3.21"))
    implementation("androidx.appcompat:appcompat:1.8.0")
    implementation("androidx.media3:media3-ui:$media3_version")
    implementation("androidx.media3:media3-exoplayer:$media3_version")
    implementation("androidx.media3:media3-exoplayer-hls:$media3_version")
    implementation("androidx.media3:media3-exoplayer-dash:$media3_version")
    implementation("androidx.mediarouter:mediarouter:1.8.1")
    implementation("com.google.ads.interactivemedia.v3:interactivemedia:3.40.0")
}

ادغام کردن کیت توسعه نرم‌افزار «درج آگهی پویا» در «آگهی‌های رسانه‌ای تعاملی»

  1. کلاس جدیدی به‌نام SampleAdsWrapper در بسته videoplayerapp (در app/java/com.google.ads.interactivemedia.v3.samples/videoplayerapp/) ایجاد کنید تا SampleVideoPlayer موجود را بپوشاند و منطق پیاده‌سازی IMA DAI را اضافه کند. برای انجام این کار، ابتدا باید یک AdsLoader ایجاد کنید که برای درخواست جاری‌سازی DAI استفاده می‌شود.

    این گزیده شامل پارامترهای نمونه برای HLS و DASH، جاری‌سازی‌های زنده و ویدیو به‌درخواست است. برای تنظیم اینکه کدام جاری‌سازی پخش شود، متغیر CONTENT_TYPE را به‌روز کنید.

    package com.google.ads.interactivemedia.v3.samples.videoplayerapp;

import android.annotation.SuppressLint;
import android.content.Context;
import android.view.ViewGroup;
import android.webkit.WebView;
import androidx.annotation.Nullable;
import com.google.ads.interactivemedia.v3.api.AdErrorEvent;
import com.google.ads.interactivemedia.v3.api.AdEvent;
import com.google.ads.interactivemedia.v3.api.AdsLoader;
import com.google.ads.interactivemedia.v3.api.AdsManagerLoadedEvent;
import com.google.ads.interactivemedia.v3.api.CuePoint;
import com.google.ads.interactivemedia.v3.api.ImaSdkFactory;
import com.google.ads.interactivemedia.v3.api.StreamDisplayContainer;
import com.google.ads.interactivemedia.v3.api.StreamManager;
import com.google.ads.interactivemedia.v3.api.StreamRequest;
import com.google.ads.interactivemedia.v3.api.StreamRequest.StreamFormat;
import com.google.ads.interactivemedia.v3.api.player.VideoProgressUpdate;
import com.google.ads.interactivemedia.v3.api.player.VideoStreamPlayer;
import com.google.ads.interactivemedia.v3.samples.samplevideoplayer.SampleVideoPlayer;
import com.google.ads.interactivemedia.v3.samples.samplevideoplayer.SampleVideoPlayer.SampleVideoPlayerCallback;
import java.util.ArrayList;
import java.util.HashMap;
import java.util.List;

/** This class adds ad-serving support to Sample HlsVideoPlayer */
@SuppressLint("UnsafeOptInUsageError")
/* @SuppressLint is needed for new media3 APIs. */
public class SampleAdsWrapper
    implements AdEvent.AdEventListener, AdErrorEvent.AdErrorListener, AdsLoader.AdsLoadedListener {

  // Live HLS stream asset key.
  private static final String TEST_HLS_ASSET_KEY = "c-rArva4ShKVIAkNfy6HUQ";

  // Live DASH stream asset key.
  private static final String TEST_DASH_ASSET_KEY = "PSzZMzAkSXCmlJOWDmRj8Q";

  // VOD HLS content source and video IDs.
  private static final String TEST_HLS_CONTENT_SOURCE_ID = "2548831";
  private static final String TEST_HLS_VIDEO_ID = "tears-of-steel";

  // VOD DASH content source and video IDs.
  private static final String TEST_DASH_CONTENT_SOURCE_ID = "2559737";
  private static final String TEST_DASH_VIDEO_ID = "tos-dash";

  private static final String NETWORK_CODE = "21775744923";

  private static final String PLAYER_TYPE = "DAISamplePlayer";

  private enum ContentType {
    LIVE_HLS,
    LIVE_DASH,
    VOD_HLS,
    VOD_DASH,
  }

  // Set CONTENT_TYPE to the associated enum for the stream type you would like to test.
  private static final ContentType CONTENT_TYPE = ContentType.VOD_HLS;

  /** Log interface, so we can output the log commands to the UI or similar. */
  public interface Logger {
    void log(String logMessage);
  }

  private final ImaSdkFactory sdkFactory;
  private AdsLoader adsLoader;
  private StreamManager streamManager;
  private final List<VideoStreamPlayer.VideoStreamPlayerCallback> playerCallbacks;

  private final SampleVideoPlayer videoPlayer;
  private final Context context;
  private final ViewGroup adUiContainer;

  private String fallbackUrl;
  private Logger logger;

  /**
   * Creates a new SampleAdsWrapper that implements IMA direct-ad-insertion.
   *
   * @param context the app's context.
   * @param videoPlayer underlying HLS video player.
   * @param adUiContainer ViewGroup in which to display the ad's UI.
   */
  public SampleAdsWrapper(Context context, SampleVideoPlayer videoPlayer, ViewGroup adUiContainer) {
    this.videoPlayer = videoPlayer;
    this.context = context;
    this.adUiContainer = adUiContainer;
    sdkFactory = ImaSdkFactory.getInstance();
    playerCallbacks = new ArrayList<>();
    createAdsLoader();
  }

  private void enableWebViewDebugging() {
    WebView.setWebContentsDebuggingEnabled(true);
  }

  private void createAdsLoader() {
    enableWebViewDebugging();
    VideoStreamPlayer videoStreamPlayer = createVideoStreamPlayer();
    StreamDisplayContainer displayContainer =
        ImaSdkFactory.createStreamDisplayContainer(adUiContainer, videoStreamPlayer);
    videoPlayer.setSampleVideoPlayerCallback(createSampleVideoPlayerCallback());
    adsLoader =
        sdkFactory.createAdsLoader(context, MyActivity.getImaSdkSettings(), displayContainer);
  }

  public void requestAndPlayAds() {
    adsLoader.addAdErrorListener(this);
    adsLoader.addAdsLoadedListener(this);
    adsLoader.requestStream(buildStreamRequest());
  }

  2. یک روش کمکی createSampleVideoPlayerCallback() برای مدیریت ایجاد یک نمونه واسط SampleVideoPlayerCallback که VideoStreamPlayer.VideoStreamPlayerCallback را گسترش می‌دهد ایجاد کنید.

    برای کار با DAI، پخش‌کننده باید رویدادهای ID3 را به IMA DAI SDK ارسال کند. روش callback.onUserTextReceived() این کار را در نمونه کد زیر انجام می‌دهد.

    private SampleVideoPlayerCallback createSampleVideoPlayerCallback() {
  return new SampleVideoPlayerCallback() {
    @Override
    public void onUserTextReceived(String userText) {
      for (VideoStreamPlayer.VideoStreamPlayerCallback callback : playerCallbacks) {
        callback.onUserTextReceived(userText);
      }
    }

    @Override
    public void onSeek(int windowIndex, long positionMs) {
      // See if we would seek past an ad, and if so, jump back to it.
      long newSeekPositionMs = positionMs;
      if (streamManager != null) {
        CuePoint prevCuePoint = streamManager.getPreviousCuePointForStreamTimeMs(positionMs);
        if (prevCuePoint != null && !prevCuePoint.isPlayed()) {
          newSeekPositionMs = prevCuePoint.getStartTimeMs();
        }
      }
      videoPlayer.seekTo(windowIndex, newSeekPositionMs);
    }

    @Override
    public void onContentComplete() {
      for (VideoStreamPlayer.VideoStreamPlayerCallback callback : playerCallbacks) {
        callback.onContentComplete();
      }
    }

    @Override
    public void onPause() {
      for (VideoStreamPlayer.VideoStreamPlayerCallback callback : playerCallbacks) {
        callback.onPause();
      }
    }

    @Override
    public void onResume() {
      for (VideoStreamPlayer.VideoStreamPlayerCallback callback : playerCallbacks) {
        callback.onResume();
      }
    }

    @Override
    public void onVolumeChanged(int percentage) {
      for (VideoStreamPlayer.VideoStreamPlayerCallback callback : playerCallbacks) {
        callback.onVolumeChanged(percentage);
      }
    }
  };
}

  3. برای ایجاد SteamRequest، روش buildStreamRequest() را اضافه کنید. این روش براساس نحوه تنظیم متغیر CONTENT_TYPE، بین جاری‌سازی‌های مختلف جابه‌جا می‌شود. جاری‌سازی پیش‌فرض استفاده‌شده در این راهنما، جاری‌سازی نمونه VOD HLS مربوط به IMA است.

    @Nullable
private StreamRequest buildStreamRequest() {
  StreamRequest request;
  switch (CONTENT_TYPE) {
    case LIVE_HLS:
      // Live HLS stream request.
      return sdkFactory.createLiveStreamRequest(TEST_HLS_ASSET_KEY, null, NETWORK_CODE);
    case LIVE_DASH:
      // Live DASH stream request.
      return sdkFactory.createLiveStreamRequest(TEST_DASH_ASSET_KEY, null, NETWORK_CODE);
    case VOD_HLS:
      // VOD HLS request.
      request =
          sdkFactory.createVodStreamRequest(
              TEST_HLS_CONTENT_SOURCE_ID, TEST_HLS_VIDEO_ID, null, NETWORK_CODE);
      request.setFormat(StreamFormat.HLS);
      return request;
    case VOD_DASH:
      // VOD DASH request.
      request =
          sdkFactory.createVodStreamRequest(
              TEST_DASH_CONTENT_SOURCE_ID, TEST_DASH_VIDEO_ID, null, NETWORK_CODE);
      request.setFormat(StreamFormat.DASH);
      return request;
  }
  // Content type not selected.
  return null;
}

  4. همچنین برای پخش جاری‌سازی به VideoStreamPlayer نیاز دارید، بنابراین روش createVideoStreamPlayer() را اضافه کنید که کلاس ناشناسی ایجاد می‌کند که VideoStreamPlayer را پیاده‌سازی می‌کند.

    private VideoStreamPlayer createVideoStreamPlayer() {
  return new VideoStreamPlayer() {
    @Override
    public void loadUrl(String url, List<HashMap<String, String>> subtitles) {
      videoPlayer.setStreamUrl(url);
      videoPlayer.play();
    }

    @Override
    public void pause() {
      // Pause player.
      videoPlayer.pause();
    }

    @Override
    public void resume() {
      // Resume player.
      videoPlayer.play();
    }

    @Override
    public int getVolume() {
      // Make the video player play at the current device volume.
      return 100;
    }

    @Override
    public void addCallback(VideoStreamPlayerCallback videoStreamPlayerCallback) {
      playerCallbacks.add(videoStreamPlayerCallback);
    }

    @Override
    public void removeCallback(VideoStreamPlayerCallback videoStreamPlayerCallback) {
      playerCallbacks.remove(videoStreamPlayerCallback);
    }

    @Override
    public void onAdBreakStarted() {
      // Disable player controls.
      videoPlayer.enableControls(false);
      log("Ad Break Started\n");
    }

    @Override
    public void onAdBreakEnded() {
      // Re-enable player controls.
      if (videoPlayer != null) {
        videoPlayer.enableControls(true);
      }
      log("Ad Break Ended\n");
    }

    @Override
    public void onAdPeriodStarted() {
      log("Ad Period Started\n");
    }

    @Override
    public void onAdPeriodEnded() {
      log("Ad Period Ended\n");
    }

    @Override
    public void seek(long timeMs) {
      // An ad was skipped. Skip to the content time.
      videoPlayer.seekTo(timeMs);
      log("seek");
    }

    @Override
    public VideoProgressUpdate getContentProgress() {
      return new VideoProgressUpdate(
          videoPlayer.getCurrentPositionMs(), videoPlayer.getDuration());
    }
  };
}

  5. شنوندگان لازم را پیاده‌سازی کنید و پشتیبانی برای رسیدگی به خطا را اضافه کنید.

    به پیاده‌سازی AdErrorListener توجه کنید، زیرا اگر آگهی‌ها پخش نشوند، نشانی وب جایگزین را فراخوانی می‌کند. ازآنجایی‌که محتوا و آگهی‌ها در یک جاری‌سازی هستند، باید آماده باشید تا درصورت مواجه شدن جاری‌سازی DAI با خطا، جاری‌سازی بازگشتی را فراخوانی کنید.

    /** AdErrorListener implementation */
@Override
public void onAdError(AdErrorEvent event) {
  log(String.format("Error: %s\n", event.getError().getMessage()));
  // play fallback URL.
  log("Playing fallback Url\n");
  videoPlayer.setStreamUrl(fallbackUrl);
  videoPlayer.enableControls(true);
  videoPlayer.play();
}

/** AdEventListener implementation */
@Override
public void onAdEvent(AdEvent event) {
  switch (event.getType()) {
    case AD_PROGRESS:
      // Do nothing or else log will be filled by these messages.
      break;
    default:
      log(String.format("Event: %s\n", event.getType()));
      break;
  }
}

/** AdsLoadedListener implementation */
@Override
public void onAdsManagerLoaded(AdsManagerLoadedEvent event) {
  streamManager = event.getStreamManager();
  streamManager.addAdErrorListener(this);
  streamManager.addAdEventListener(this);
  streamManager.init();
}

/** Sets fallback URL in case ads stream fails. */
void setFallbackUrl(String url) {
  fallbackUrl = url;
}

  6. کد را برای ثبت کردن اضافه کنید.

    /** Sets logger for displaying events to screen. Optional. */
void setLogger(Logger logger) {
  this.logger = logger;
}

private void log(String message) {
  if (logger != null) {
    logger.log(message);
  }
}

  7. ‫MyActivity را در videoplayerapp اصلاح کنید تا SampleAdsWrapper را نمونه‌سازی و فراخوانی کنید. همچنین، بااستفاده از روش کمکی برای ایجاد نمونه ImaSdkSettings، با ImaSdkFactory.initialize() در اینجا تماس بگیرید.

    package com.google.ads.interactivemedia.v3.samples.videoplayerapp;

import android.annotation.SuppressLint;
import android.app.Activity;
import android.content.res.Configuration;
import android.os.Bundle;
import android.util.Log;
import android.view.View;
import android.widget.ImageButton;
import android.widget.ScrollView;
import android.widget.TextView;
import com.google.ads.interactivemedia.v3.api.ImaSdkFactory;
import com.google.ads.interactivemedia.v3.api.ImaSdkSettings;
import com.google.ads.interactivemedia.v3.samples.samplevideoplayer.SampleVideoPlayer;

/** Main Activity that plays media using {@link SampleVideoPlayer}. */
@SuppressLint("UnsafeOptInUsageError")
/* @SuppressLint is needed for new media3 APIs. */
public class MyActivity extends Activity {

  private static final String DEFAULT_STREAM_URL =
      "https://storage.googleapis.com/interactive-media-ads/media/bbb.m3u8";
  private static final String APP_LOG_TAG = "ImaDaiExample";
  private static final String PLAYER_TYPE = "DAISamplePlayer";
  private static ImaSdkSettings imaSdkSettings;

  protected SampleVideoPlayer sampleVideoPlayer;
  protected ImageButton playButton;

  private boolean contentHasStarted = false;

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

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

    View rootView = findViewById(R.id.videoLayout);
    sampleVideoPlayer =
        new SampleVideoPlayer(rootView.getContext(), rootView.findViewById(R.id.playerView));
    sampleVideoPlayer.enableControls(false);
    playButton = rootView.findViewById(R.id.playButton);
    final SampleAdsWrapper sampleAdsWrapper =
        new SampleAdsWrapper(this, sampleVideoPlayer, rootView.findViewById(R.id.adUiContainer));
    sampleAdsWrapper.setFallbackUrl(DEFAULT_STREAM_URL);

    final ScrollView scrollView = findViewById(R.id.logScroll);
    final TextView textView = findViewById(R.id.logText);

    sampleAdsWrapper.setLogger(
        logMessage -> {
          Log.i(APP_LOG_TAG, logMessage);
          if (textView != null) {
            textView.append(logMessage);
          }
          if (scrollView != null) {
            scrollView.post(() -> scrollView.fullScroll(View.FOCUS_DOWN));
          }
        });

    // Set up play button listener to play video then hide play button.
    playButton.setOnClickListener(
        view -> {
          if (contentHasStarted) {
            sampleVideoPlayer.play();
          } else {
            contentHasStarted = true;
            sampleVideoPlayer.enableControls(true);
            sampleAdsWrapper.requestAndPlayAds();
          }
          playButton.setVisibility(View.GONE);
        });
    orientVideoDescription(getResources().getConfiguration().orientation);
  }

  8. روش کمکی getImaSdkSettings() را برای ایجاد نمونه ImaSdkSettings اضافه کنید.

    public static ImaSdkSettings getImaSdkSettings() {
  if (imaSdkSettings == null) {
    imaSdkSettings = ImaSdkFactory.getInstance().createImaSdkSettings();
    imaSdkSettings.setPlayerType(PLAYER_TYPE);
    // Set any additional IMA SDK settings here.
  }
  return imaSdkSettings;
}

  9. فایل چیدمان Activity activity_my.xml را اصلاح کنید تا عناصر میانای کاربر برای ثبت کردن اضافه شود.

    <!-- UI element for viewing SDK event log -->
<ScrollView
    android:id="@+id/logScroll"
    android:layout_width="match_parent"
    android:layout_height="0dp"
    android:layout_weight="0.5"
    android:padding="5dp"
    android:background="#DDDDDD">

    <TextView
        android:id="@+id/logText"
        android:layout_width="match_parent"
        android:layout_height="wrap_content">
    </TextView>
</ScrollView>

تبریک! اکنون در برنامه Android خود آگهی‌های ویدیویی درخواست و نمایش می‌دهید. برای تنظیم دقیق پیاده‌سازی خود، به نشانک‌ها، Snapback، و اسناد API مراجعه کنید.

عیب‌یابی

اگر در پخش آگهی ویدیویی با مشکل مواجه هستید، BasicExample تکمیل‌شده را بارگیری کنید. اگر در BasicExample به‌درستی کار می‌کند، احتمالاً مشکلی در کد ادغام IMA برنامه‌تان وجود دارد.

اگر همچنان مشکل دارید، به تالار گفتمان IMA SDK مراجعه کنید.