Einführung in das IMA DAI SDK

Mit IMA SDKs können Sie Multimedia-Anzeigen ganz einfach in Ihre Websites und Apps einbinden. IMA SDKs können Anzeigen von beliebigen <ph type="x-smartling-placeholder"></ph> VAST-kompatiblen Ad-Server bereitstellen und die Anzeigenwiedergabe in Ihren Apps verwalten. Mit IMA SDKs für die dynamische Anzeigenbereitstellung Streamanfrage für Anzeigen- und Contentvideo (VOD- oder Livecontent) Das SDK gibt dann kombinierten Videostream, sodass Sie nicht zwischen Anzeige und Contentvideo wechseln müssen. in Ihrer App.

Gewünschte Lösung für die dynamische Anzeigenbereitstellung auswählen

<ph type="x-smartling-placeholder"></ph>

Dynamische Anzeigenbereitstellung mit Komplettservice

In diesem Leitfaden wird gezeigt, wie Sie das IMA DAI SDK in einen einfachen Videoplayer integrieren. Wenn Sie sich eine fertige Stichprobe ansehen oder mit ihr einhergehen möchten -Datenintegration, laden Sie das BasicExample von GitHub

Dynamische Anzeigenbereitstellung mit IMA – Übersicht

Die Implementierung der dynamischen Anzeigenbereitstellung von IMA erfolgt mit vier SDK-Hauptkomponenten. Leitfaden:

  • StreamDisplayContainer: Ein Containerobjekt, das sich über dem Videowiedergabeelement befindet und die UI-Elemente der Anzeige enthält.
  • AdsLoader: Ein Objekt, das Streams anfordert und Ereignisse verarbeitet, die von Antwortobjekten für Streamanfragen ausgelöst werden. Sie sollten nur ein Anzeigenladeprogramm instanziieren, das während der gesamten Lebensdauer des .
  • StreamRequest: Ein Objekt, das eine Streamanfrage definiert. Streamanfragen können entweder für On-Demand-Videos oder für Livestreams gelten. Streams. Anfragen geben eine Content-ID sowie einen API-Schlüssel oder ein Authentifizierungstoken und andere Parameter.
  • StreamManager: Ein Objekt, das Streams zur dynamischen Anzeigenbereitstellung und Interaktionen mit dem Back-End für die dynamische Anzeigenbereitstellung verarbeitet. Die Stream Manager verarbeitet außerdem Tracking-Pings und leitet Stream- und Anzeigenereignisse an den Publisher.

Vorbereitung

  • Android Studio
  • Beispiel für eine Videoplayer-App für die SDK-Integration

Beispiel-Videoplayer-App herunterladen und ausführen

Die Beispiel-App stellt einen funktionierenden Videoplayer bereit, der HLS-Videos wiedergibt. Verwenden als dient als Ausgangspunkt für die Integration der Funktionen des IMA DAI SDK für die dynamische Anzeigenbereitstellung.

  1. Beispiel-Videoplayer herunterladen App und extrahieren können.

  2. Starten Sie Android Studio und wählen Sie Vorhandenes Android Studio-Projekt öffnen aus. Wenn Android Studio bereits ausgeführt wird, wählen Sie Datei > Neu > Importieren Projekt. Wählen Sie dann SampleVideoPlayer/build.gradle aus.

  3. Führen Sie eine Gradle-Synchronisierung aus, indem Sie Tools > Android > Projekt mit Gradle-Dateien synchronisieren

  4. Stellen Sie sicher, dass die Player-App auf einem physischen Android-Gerät oder ein virtuelles Android-Gerät, indem Sie auf Ausführen > Führen Sie „app“ aus. Es ist normal, dass das Video einen kurzen Moment zum Laden brauchen, bevor du loslegst.

Beispielvideoplayer ansehen

Der Beispielvideoplayer enthält noch keinen Integrationscode für das IMA DAI SDK. Die Beispielanwendung besteht aus zwei Hauptteilen:

  1. samplevideoplayer/SampleVideoPlayer.java: ein ExoPlayer-basierter HLS-Player, der als ist die Grundlage für die Integration der dynamischen Anzeigenbereitstellung von IMA.

  2. videoplayerapp/MyActivity.java: Durch diese Aktivität werden der Videoplayer und Context und SimpleExoPlayerView.

IMA DAI SDK zur Player-App hinzufügen

Außerdem müssen Sie einen Verweis auf das IMA DAI SDK angeben. Fügen Sie in Android Studio den folgend der Datei build.gradle auf Anwendungsebene, die sich im folgenden Verzeichnis befindet: 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'
}

IMA DAI SDK integrieren

  1. Erstellen Sie im Paket videoplayerapp eine neue Klasse mit dem Namen SampleAdsWrapper. (in app/java/com.google.ads.interactivemedia.v3.samples/videoplayerapp/) nach die vorhandene SampleVideoPlayer umschließen und eine Logik zur Implementierung der dynamischen Anzeigenbereitstellung von IMA hinzufügen. Bis müssen Sie zuerst ein AdsLoader erstellen, das zum Anfordern von Anzeigen verwendet wird. von Ad-Servern.

    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. Fügen Sie dem AdsLoader eine buildStreamRequest()-Methode hinzu, damit es eine Anfrage anfordern kann. mit Anzeigen streamen. Das ist entweder ein Livestream mit Anzeigen (standardmäßig festgelegt) oder ein Video-on-Demand-Stream(VOD), der vorher aufgezeichnete Inhalte mit Anzeigen wiedergibt. Bis den VOD-Stream aktivieren, die Livestream-Anfrage auskommentieren und die Kommentarzeichen VOD-Streamanfrage

    Damit die dynamische Anzeigenbereitstellung verwendet werden kann, muss ein Player ID3-Ereignisse für Livestreams an die dynamische Anzeigenbereitstellung übergeben. SDKs. Im folgenden Beispielcode erfolgt dies durch den callback.onUserTextReceived()-Methode.

    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. Zum Abspielen des Streams benötigst du außerdem eine VideoStreamPlayer. Füge daher einen createVideoStreamPlayer()-Methode, die eine anonyme Klasse erstellt, implementiert 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. Implementieren Sie die erforderlichen Listener und fügen Sie Unterstützung für die Fehlerbehandlung hinzu.

    Beachten Sie die AdErrorListener-Implementierung, da sie eine Fallback-URL aufruft, wenn der nicht wiedergegeben werden. Da sich Content und Anzeigen in einem Stream befinden, müssen Sie kann ein Fallback-Stream aufgerufen werden, wenn im Stream für die dynamische Anzeigenbereitstellung ein Fehler auftritt.

    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. Fügen Sie Code für das Logging hinzu.

    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. Ändern Sie MyActivity in videoplayerapp, um zu instanziieren und aufzurufen 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. Ändere die Layoutdatei „activity_my.xml“ der Aktivität, um UI-Elemente für Logging.

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

Glückwunsch! Sie fordern jetzt Videoanzeigen auf Ihrem Android-Gerät an Informationen zur Feinabstimmung Ihrer Implementierung finden Sie unter Lesezeichen Snapback, und die API Dokumentation.

Fehlerbehebung

Falls bei der Wiedergabe einer Videoanzeige Probleme auftreten, laden Sie die fertige BasicExample. Wenn er im BasicExample ordnungsgemäß funktioniert, liegt wahrscheinlich ein Problem mit Ihrem den IMA-Integrationscode der App.

Sollten weiterhin Probleme auftreten, rufen Sie das IMA SDK Forum.