Premiers pas avec le SDK IMA DAI

Les SDK IMA facilitent l'intégration d'annonces multimédias dans vos sites Web et applications. Les SDK IMA demander des annonces compatible avec la norme VAST et gérer la lecture des annonces dans vos applications. Avec les SDK IMA DAI, les applications demande de flux pour une annonce et du contenu vidéo (VOD ou en direct). Le SDK renvoie ensuite un flux vidéo combiné, pour vous éviter d'avoir à gérer le basculement entre l'annonce et la vidéo de contenu. dans votre application.

Sélectionnez la solution d'insertion dynamique d'annonce qui vous intéresse

Insertion dynamique d'annonces à service complet

Ce guide explique comment intégrer le SDK IMA DAI dans un lecteur vidéo simple l'application. Si vous souhaitez consulter ou suivre un exemple terminé téléchargez la classe BasicExample à partir de GitHub.

Présentation de l'insertion dynamique d'annonces IMA

Comme le montre cet exemple, quatre composants principaux du SDK guide:

  • StreamDisplayContainer: Objet conteneur placé au-dessus de l'élément de lecture vidéo et héberge les éléments d'interface utilisateur de l'annonce.
  • AdsLoader: Objet qui demande des flux et gère les événements déclenchés par des objets de réponse aux requêtes de flux. Vous ne devez instancier qu'un seul chargeur d'annonces, qui peut être réutilisé tout au long de la durée de vie du application.
  • StreamRequest: Objet qui définit une requête de flux. Les demandes de diffusion peuvent concerner des vidéos à la demande ou des diffusions en direct. flux. Les requêtes spécifient un ID de contenu, ainsi qu'une clé API ou un jeton d'authentification paramètres.
  • StreamManager: Objet qui gère les flux d'insertion dynamique d'annonces et les interactions avec le backend d'insertion dynamique d'annonce. La Stream Manager gère également les pings de suivi, et transfère les événements de flux et d'annonces au à un éditeur.

Prérequis

  • Android Studio
  • Exemple d'application de lecteur vidéo pour l'intégration du SDK

Télécharger et exécuter l'application exemple de lecteur vidéo

L'application exemple fournit un lecteur vidéo fonctionnel qui lit une vidéo HLS. Utiliser en tant que un point de départ pour intégrer les fonctionnalités du SDK IMA DAI.

  1. Téléchargez l'exemple de lecteur vidéo. l'application mobile et l'extraire.

  2. Lancez Android Studio, puis sélectionnez Open an existing Android Studio project (Ouvrir un projet Android Studio existant). Si Android Studio est déjà en cours d'exécution, sélectionnez File > Nouveau > Importer Projet. Choisissez ensuite SampleVideoPlayer/build.gradle.

  3. Exécutez une synchronisation Gradle en sélectionnant Tools > Android > Synchroniser le projet avec les fichiers Gradle

  4. Assurez-vous que l'application du lecteur est compilée et exécutée sur un appareil Android physique ou un appareil virtuel Android en utilisant Run > Exécutez "app". C'est normal que la vidéo peut prendre quelques instants à se charger avant de commencer à jouer.

Examiner l'exemple de lecteur vidéo

L'exemple de lecteur vidéo ne contient pas encore de code d'intégration du SDK IMA DAI. L'application exemple se compose de deux parties principales:

  1. samplevideoplayer/SampleVideoPlayer.java: un Lecteur HLS basé sur ExoPlayer qui sert de sur la base de l'intégration de l'outil d'insertion dynamique d'annonces.

  2. videoplayerapp/MyActivity.java: cette activité crée le lecteur vidéo et lui transmet Context et SimpleExoPlayerView.

Ajouter le SDK IMA DAI à l'application Player

Vous devez également inclure une référence au SDK IMA DAI. Dans Android Studio, ajoutez le suivi dans le fichier build.gradle au niveau de l'application, situé à l'adresse app/build.gradle:

repositories {
  google()
  mavenCentral()
}

dependencies {
    implementation 'androidx.appcompat:appcompat:1.6.1'
    implementation 'androidx.media3:media3-exoplayer:1.3.1'
    implementation 'com.google.ads.interactivemedia.v3:interactivemedia:3.34.0'
}

Intégrer le SDK IMA DAI

  1. Créez une classe appelée SampleAdsWrapper dans le package videoplayerapp. (dans app/java/com.google.ads.interactivemedia.v3.samples/videoplayerapp/) vers encapsulez le SampleVideoPlayer existant et ajoutez une logique pour implémenter l'insertion dynamique d'annonces IMA. À cela, vous devez d'abord créer un AdsLoader qui sera utilisé pour demander des annonces à partir d'ad servers.

    videoplayerapp/SampleAdsWrapper.java
    package com.google.ads.interactivemedia.v3.samples.videoplayerapp;

import android.annotation.TargetApi;
import android.content.Context;
import android.os.Build;
import android.view.ViewGroup;
import android.webkit.WebView;

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.ImaSdkSettings;
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.player.VideoProgressUpdate;
import com.google.ads.interactivemedia.v3.api.player.VideoStreamPlayer;
import com.google.ads.interactivemedia.v3.samples.samplevideoplayer.SampleVideoPlayer;

import java.util.ArrayList;
import java.util.HashMap;
import java.util.List;

public class SampleAdsWrapper implements AdEvent.AdEventListener,
        AdErrorEvent.AdErrorListener, AdsLoader.AdsLoadedListener {

    // Livestream asset key.
    private static final String TEST_ASSET_KEY = "sN_IYUG8STe1ZzhIIE_ksA";

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

    private static final String PLAYER_TYPE = "DAISamplePlayer";

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

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

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

    private String fallbackUrl;
    private Logger logger;

    public SampleAdsWrapper(Context context, SampleVideoPlayer videoPlayer,
                            ViewGroup adUiContainer) {
        this.videoPlayer = videoPlayer;
        this.context = context;
        this.adUiContainer = adUiContainer;
        sdkFactory = ImaSdkFactory.getInstance();
        playerCallbacks = new ArrayList<>();
        createAdsLoader();
        displayContainer = sdkFactory.createStreamDisplayContainer(
            this.adUiContainer,
            videoStreamPlayer
        );
    }

    private void createAdsLoader() {
        ImaSdkSettings settings = new ImaSdkSettings();
        adsLoader = sdkFactory.createAdsLoader(context);
    }

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

  2. Ajoutez une méthode buildStreamRequest() à AdsLoader pour qu'il puisse demander une avec des annonces. Il s'agit d'une diffusion en direct avec des annonces (paramètre par défaut) flux de vidéo à la demande qui lit du contenu préenregistré avec des annonces. À activer le flux de vidéo à la demande, commenter la demande de diffusion en direct et annuler la mise en commentaire Requête de flux de vidéo à la demande.

    Pour utiliser l'insertion dynamique d'annonce, les joueurs doivent transmettre les événements ID3 des diffusions en direct à l'outil d'insertion dynamique d'annonces IMA. SDK. Dans l'exemple de code suivant, cette opération est effectuée par callback.onUserTextReceived().

    videoplayerapp/SampleAdsWrapper.java
    private StreamRequest buildStreamRequest() {
    VideoStreamPlayer videoStreamPlayer = createVideoStreamPlayer();
    videoPlayer.setSampleVideoPlayerCallback(
            new SampleVideoPlayer.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 you would seek past an ad, and if so, jump back to it.
                    long newSeekPositionMs = positionMs;
                    if (streamManager != null) {
                        CuePoint prevCuePoint  =
                                streamManager.getPreviousCuePointForStreamTime(positionMs / 1000);
                        if (prevCuePoint != null && !prevCuePoint.isPlayed()) {
                            newSeekPositionMs = (long) (prevCuePoint.getStartTime() * 1000);
                        }
                    }
                    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);
                    }
                }
            });

    // Livestream request.
    StreamRequest request = sdkFactory.createLiveStreamRequest(
            TEST_ASSET_KEY, null, displayContainer);

    // VOD request. Comment the createLiveStreamRequest() line above and uncomment this
    // createVodStreamRequest() below to switch from a livestream to a VOD stream.
    // StreamRequest request = sdkFactory.createVodStreamRequest(TEST_CONTENT_SOURCE_ID,
    //        TEST_VIDEO_ID, null, displayContainer);
    return request;
}

  3. Vous avez également besoin d'un VideoStreamPlayer pour lire le flux. Ajoutez donc une createVideoStreamPlayer(), qui crée une classe anonyme implémente VideoStreamPlayer.

    videoplayerapp/SampleAdsWrapper.java
    private VideoStreamPlayer createVideoStreamPlayer() {
    VideoStreamPlayer player = new VideoStreamPlayer() {
        @Override
        public void loadUrl(String url, List<HashMap<String, String>> subtitles) {
            videoPlayer.setStreamUrl(url);
            videoPlayer.play();
        }

        @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.
            videoPlayer.enableControls(true);
            log("Ad Break Ended\n");
        }

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

        @Override
        public int getVolume() {
            return videoPlayer.getVolume();
        }
    };
    return player;
}

  4. Implémentez les écouteurs requis et ajoutez la prise en charge de la gestion des erreurs.

    Notez l'implémentation de AdErrorListener, car elle appelle une URL de remplacement si le les annonces ne sont pas diffusées. Le contenu et les annonces étant dans un seul flux, vous devez prêt à appeler un flux de remplacement si le flux d'insertion dynamique d'annonce rencontre une erreur.

    videoplayerapp/SampleAdsWrapper.java
    /** AdErrorListener implementation **/
@Override
public void onAdError(AdErrorEvent event) {
    // play fallback URL.
    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 are 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;
}

  5. Ajoutez du code pour la journalisation.

    videoplayerapp/SampleAdsWrapper.java
    /** 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);
    }
}

  6. Modifiez MyActivity dans videoplayerapp pour instancier et appeler SampleAdsWrapper

    videoplayerapp/MyActivity.java
    import android.view.ViewGroup;
import android.widget.ScrollView;
...
public class MyActivity extends AppCompatActivity {
...
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_my);
        View rootView = findViewById(R.id.videoLayout);
        videoPlayer = new SampleVideoPlayer(rootView.getContext(),
                (SimpleExoPlayerView) rootView.findViewById(R.id.playerView));
        videoPlayer.enableControls(false);

        final SampleAdsWrapper sampleAdsWrapper = new SampleAdsWrapper(this, videoPlayer,
            (ViewGroup) rootView.findViewById(R.id.adUiContainer));
        sampleAdsWrapper.setFallbackUrl(DEFAULT_STREAM_URL);

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

        sampleAdsWrapper.setLogger(new SampleAdsWrapper.Logger() {
            @Override
            public void log(String logMessage) {
                Log.i(APP_LOG_TAG, logMessage);
                if (textView != null) {
                    textView.append(logMessage);
                }
                if (scrollView != null) {
                    scrollView.post(new Runnable() {
                        @Override
                        public void run() {
                            scrollView.fullScroll(View.FOCUS_DOWN);
                        }
                    });
                }
            }
        });

        playButton = (ImageButton) rootView.findViewById(R.id.playButton);
        // Set up play button listener to play video then hide play button.
        playButton.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
                sampleAdsWrapper.requestAndPlayAds();
                playButton.setVisibility(View.GONE);
            }
        });
    }
...
}

  7. Modifiez le fichier de mise en page activity_my.xml de l'activité afin d'ajouter des éléments d'interface utilisateur pour la journalisation.

    res/layout/activity_my.xml
    ...
    <TextView
        android:id="@+id/playerDescription"
        android:text="@string/video_description"
        android:textAlignment="center"
        android:gravity="center_horizontal"
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="0.1"
        android:textSize="@dimen/font_size" />
    <!-- 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>
...

Félicitations ! Vous demandez et affichez à présent des annonces vidéo sur votre appareil Android. l'application. Pour affiner votre implémentation, consultez Favoris, Snapback et l'API documentation.

Dépannage

Si vous rencontrez des problèmes lors de la lecture d'une annonce vidéo, essayez de télécharger le fichier BasicExample. Si tout fonctionne correctement dans l'exemple de base, il y a probablement un problème avec votre le code d'intégration IMA de votre application.

Si le problème persiste, consultez le SDK IMA forum.