ExoPlay IMA एक्सटेंशन का इस्तेमाल शुरू करना

IMA SDK आपकी वेबसाइटों और ऐप्लिकेशन में मल्टीमीडिया विज्ञापनों को इंटिग्रेट करना आसान बनाते हैं. IMA SDK ये काम कर सकते हैं किसी भी वेबसाइट या ऐप्लिकेशन से विज्ञापनों का अनुरोध करें वीएएसटी का पालन करने वाला विज्ञापन सर्वर और अपने ऐप्लिकेशन में विज्ञापन चलाने की सुविधा को मैनेज करना. IMA क्लाइंट-साइड SDK टूल की मदद से, कॉन्टेंट वाले वीडियो के प्लेबैक पर आपका कंट्रोल रहता है, जबकि SDK टूल विज्ञापन के प्लेबैक को मैनेज करता है. विज्ञापन इसमें चलते हैं ऐप्लिकेशन के कॉन्टेंट वीडियो प्लेयर के ऊपर अलग से एक वीडियो प्लेयर रखा होगा.

इस गाइड में IMA SDK को खाली Android Studio प्रोजेक्ट में इंटिग्रेट करने का तरीका बताया गया है. इसके लिए, ExoPlayer IMA एक्सटेंशन. अगर आपको इंटिग्रेशन के पूरे हो चुके सैंपल को देखना या उसके साथ फ़ॉलो करना है, तो GitHub से मिला BasicExample.

IMA क्लाइंट-साइड की खास जानकारी

IMA क्लाइंट-साइड को लागू करने के लिए, SDK टूल के चार मुख्य कॉम्पोनेंट शामिल किए गए हैं. इनकी जानकारी इसमें दी गई है गाइड:

  • AdDisplayContainer: एक कंटेनर ऑब्जेक्ट, जहां विज्ञापन दिखाए जाते हैं.
  • AdsLoader: एक ऑब्जेक्ट जो विज्ञापनों का अनुरोध करता है और विज्ञापनों के अनुरोध के जवाबों के इवेंट मैनेज करता है. आपको सिर्फ़ एक विज्ञापन लोडर इंस्टैंशिएट करना चाहिए, जिसे ऐप्लिकेशन की पूरी अवधि के दौरान फिर से इस्तेमाल किया जा सकता है.
  • AdsRequest: विज्ञापन के अनुरोध के बारे में बताने वाला ऑब्जेक्ट. विज्ञापन अनुरोध, वीएएसटी विज्ञापन टैग के यूआरएल के साथ-साथ उस यूआरएल के बारे में भी बताते हैं अतिरिक्त पैरामीटर, जैसे विज्ञापन डाइमेंशन.
  • AdsManager: एक ऐसा ऑब्जेक्ट जो विज्ञापन के अनुरोध का जवाब देता है, विज्ञापन प्लेबैक को कंट्रोल करता है, और विज्ञापन को सुनता है SDK टूल से ट्रिगर होने वाले इवेंट.

ज़रूरी शर्तें

शुरू करने से पहले, आपको इन चीज़ों की ज़रूरत होगी Android Studio 3.0 या इसके बाद वाला वर्शन हो.

1. नया Android Studio प्रोजेक्ट बनाना

Android Studio प्रोजेक्ट बनाने के लिए, यह तरीका अपनाएं:

  1. Android Studio शुरू करें.
  2. नया Android Studio प्रोजेक्ट शुरू करें को चुनें.
  3. अपना प्रोजेक्ट चुनें पेज में, खाली गतिविधि टेंप्लेट चुनें.
  4. आगे बढ़ें पर क्लिक करें.
  5. अपना प्रोजेक्ट कॉन्फ़िगर करें पेज में, अपने प्रोजेक्ट को नाम दें और भाषा के लिए Java चुनें.
  6. पूरा करें पर क्लिक करें.

2. अपने प्रोजेक्ट में ExoPlayer IMA एक्सटेंशन जोड़ें

सबसे पहले, ऐप्लिकेशन-लेवल की build.gradle फ़ाइल में, डिपेंडेंसी सेक्शन में देखें. ExoPlayer IMA एक्सटेंशन के साइज़ को ध्यान में रखते हुए, इसे लागू करें और चालू करें मल्टीडेक्स देखें. यह उन ऐप्लिकेशन के लिए ज़रूरी है जिनमें minSdkVersion को 20 या उससे कम पर सेट किया गया है. साथ ही, Java वर्शन के साथ काम करने से जुड़ी जानकारी देने के लिए, नया compileOptions जोड़ें.

app/build.gradle 
android {
    namespace 'com.google.ads.interactivemedia.v3.samples.exoplayerexample'
    compileSdkVersion 34

    compileOptions {
        sourceCompatibility JavaVersion.VERSION_17
        targetCompatibility JavaVersion.VERSION_17
    }
  }

  defaultConfig {
      applicationId "com.google.ads.interactivemedia.v3.samples.exoplayerexample"
      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.3.1'
    implementation 'androidx.media3:media3-exoplayer:1.3.1'
    implementation 'androidx.media3:media3-exoplayer-ima:1.3.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>

इंटेंट से जुड़े एलान जोड़ें

अगर आपका ऐप्लिकेशन, Android 11 (एपीआई लेवल 30) या उसके बाद के वर्शन को टारगेट करता है, तो IMA 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>

3. विज्ञापन यूज़र इंटरफ़ेस (यूआई) कंटेनर बनाएं

StyledPlayerView बनाकर, ExoPlayer PlayerView के तौर पर इस्तेमाल करने के लिए व्यू बनाएं ऑब्जेक्ट को सही आईडी के साथ सबमिट करें. यह भी बदलें LinearLayout के लिए androidx.constraintlayout.widget.ConstraintLayout.

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">

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

</LinearLayout>

4. विज्ञापन अनुरोध के लिए, अपने कॉन्टेंट यूआरएल और विज्ञापन टैग का यूआरएल जोड़ें

अपने कॉन्टेंट यूआरएल और वीएएसटी विज्ञापन टैग के यूआरएल को स्टोर करने के लिए, 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 एक्सटेंशन के लिए इंपोर्ट स्टेटमेंट जोड़ें. इसके बाद, प्राइवेट वैरिएबल को जोड़कर, Activity को बढ़ाने के लिए MainActivity क्लास PlayerView, SimpleExoPlayer, और ImaAdsLoader.

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

import android.app.Activity;
import android.net.Uri;
import android.os.Bundle;
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.ImaAdsLoader;
import androidx.media3.exoplayer.source.DefaultMediaSourceFactory;
import androidx.media3.exoplayer.source.MediaSource;
import androidx.media3.ui.PlayerView;
import androidx.multidex.MultiDex;

...

public class MainActivity extends Activity {

  private PlayerView playerView;
  private ExoPlayer player;
  private ImaAdsLoader adsLoader;

}

6. adsLoader इंस्टेंस बनाएं

onCreate तरीके को ओवरराइट करें. साथ ही, प्रॉपर्टी बनाने के लिए, ज़रूरी वैरिएबल असाइनमेंट जोड़ें विज्ञापन टैग के यूआरएल वाला नया adsLoader ऑब्जेक्ट.

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

...

public class MainActivity extends Activity {

  private PlayerView 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)
            .setAdEventListener(buildAdEventListener())
            .build();
  }

  public AdEvent.AdEventListener buildAdEventListener() {

    AdEvent.AdEventListener imaAdEventListener = event -> {
      AdEvent.AdEventType eventType = event.getType();
      // Log IMA events for debugging.
      // The ExoPlayer IMA extension already handles IMA events and does not need anything
      // additional here to function.
    };

    return imaAdEventListener;
  }

}

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

    MediaSource.Factory mediaSourceFactory =
        new DefaultMediaSourceFactory(dataSourceFactory)
            .setLocalAdInsertionComponents(unusedAdTagUri -> adsLoader, 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.
      adsLoader =
        new ImaAdsLoader.Builder(/* context= */ this)
            .setAdEventListener(buildAdEventListener())
            .build();
  }

  @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 पर सैंपल.