Ad Breaks API-Support einem Web Receiver hinzufügen

Mit Sammlungen den Überblick behalten Sie können Inhalte basierend auf Ihren Einstellungen speichern und kategorisieren.

1. Übersicht

Logo: Google Cast

In diesem Codelab erfährst du, wie du mit der Cast Ad Breaks API eine App für den benutzerdefinierten Webempfänger erstellst.

Was ist Google Cast?

Mit Google Cast können Nutzer Inhalte von einem Mobilgerät auf einen Fernseher streamen. Nutzer können ihr Mobilgerät dann als Fernbedienung für die Medienwiedergabe auf dem Fernseher verwenden.

Mit dem Google Cast SDK können Sie Ihre App erweitern, um einen Fernseher oder ein Soundsystem zu steuern. Mit dem Cast SDK können Sie die erforderlichen UI-Komponenten gemäß der Checkliste für das Google Cast-Design hinzufügen.

Die Checkliste für das Google Cast-Design soll dafür sorgen, dass Cast auf allen unterstützten Plattformen einfach und vorhersehbar funktioniert.

Ziele

Wenn du dieses Codelab abgeschlossen hast, hast du einen Cast Receiver erstellt, der die neue Break API nutzt.

Lerninhalte

  • VMAP- und VAST-Werbeunterbrechungen für Cast-Inhalte einschließen
  • Clips überspringen
  • Standardverhalten für Unterbrechungen bei der Suche anpassen

Voraussetzungen

  • Der aktuelle Google Chrome-Browser
  • Node Package Manager
  • Ein Google Cast-Gerät wie Chromecast oder Android TV, das mit Internetzugang konfiguriert ist.
  • Fernseher oder Monitor mit HDMI-Eingang oder Google Home Hub

Plattform

  • Dafür benötigen Sie Vorkenntnisse in der Webentwicklung.
  • Frühere Erfahrung mit der Erstellung von Sender- und Empfängeranwendungen für Cast.

Wie verwenden Sie diese Anleitung?

Nur durchlesen Lies dir die Übungen durch

Wie würden Sie Ihre Erfahrungen im Erstellen von Webanwendungen bewerten?

Neuling Fortgeschritten Profi

2. Beispielcode abrufen

Sie können den gesamten Beispielcode auf Ihren Computer herunterladen...

und entpacken Sie die heruntergeladene ZIP-Datei.

3. Receiver lokal bereitstellen

Damit Sie Ihren Receiver mit einem Übertragungsgerät verwenden können, muss es an einem Ort gehostet werden, an dem Ihr Übertragungsgerät ihn erreichen kann. Wenn Sie bereits einen Server haben, der HTTPS unterstützt, überspringen Sie einfach die folgende Anleitung. Merken Sie sich einfach die URL. Sie benötigen sie im nächsten Abschnitt.

Falls Ihnen kein Server zur Verfügung steht, ist das kein Problem. Sie können node.js, das Knotenmodul http-server und ngrok, installieren.

npm install -g http-server
npm install -g ngrok

Server ausführen

Wenn Sie http-server verwenden, gehen Sie in der Konsole so vor:

cd app-done
http-server

Sie sollten dann Folgendes sehen:

Starting up http-server, serving ./
Available on:
  http://127.0.0.1:8080
  http://172.19.17.192:8080
Hit CTRL-C to stop the server

Beachten Sie den verwendeten lokalen Port und führen Sie folgende Schritte in einem neuen Terminal aus, um den lokalen Empfänger über ngrok über HTTPS freizugeben:

ngrok http 8080

Dadurch wird ein ngrok-Tunnel zu Ihrem lokalen HTTP-Server eingerichtet. Dadurch erhalten Sie einen global verfügbaren HTTPS-gesicherten Endpunkt, den Sie im nächsten Schritt verwenden können (https://116ec943.eu.ngrok.io):

ngrok by @inconshreveable                                                                                                                                                                                                                                     (Ctrl+C to quit)

Session Status         online
Version                2.2.4
Web Interface          http://127.0.0.1:8080
Forwarding             http://116ec943.eu.ngrok.io -> localhost:8080
Forwarding             https://116ec943.eu.ngrok.io -> localhost:8080

Sowohl ngrok als auch http-server sollten während des Codelabs weiter ausgeführt werden. Alle lokal vorgenommenen Änderungen sind sofort verfügbar.

4. Anwendung in der Cast Developer Console registrieren

Sie müssen Ihre Anwendung registrieren, um einen in diesem Codelab integrierten benutzerdefinierten Empfänger auf Chromecast-Geräten ausführen zu können. Nachdem Sie Ihre Anwendung registriert haben, erhalten Sie eine Anwendungs-ID, die Ihre Absenderanwendung zum Ausführen von API-Aufrufen verwenden muss, z. B. um eine Empfängeranwendung zu starten.

Bild der Google Cast SDK Developer Console mit hervorgehobener Schaltfläche „Neue App hinzufügen“

Klicken Sie auf "Neue App hinzufügen".

Bild der Seite „App für neuen Empfänger“ mit markierter Option „Benutzerdefinierter Empfänger“

Wählen Sie „Benutzerdefinierter Empfänger“ aus – so wird er erstellt.

Bild des Bildschirms „Neuer benutzerdefinierter Empfänger“ mit einer URL, die jemand in das Feld „App-URL des Empfängers“ eingibt

Gib die Details des neuen Empfängers ein und verwende dabei die URL,

im letzten Abschnitt. Merken Sie sich die Anwendungs-ID, die dem neuen Empfänger zugewiesen ist.

Außerdem müssen Sie Ihr Google Cast-Gerät registrieren, damit es vor der Veröffentlichung auf die Empfängeranwendung zugreifen kann. Nachdem Sie die Empfängeranwendung veröffentlicht haben, ist sie auf allen Google Cast-Geräten verfügbar. Für dieses Codelab solltest du mit einer nicht veröffentlichten Empfängeranwendung arbeiten.

Bild der Google Cast SDK Developer Console mit hervorgehobener Schaltfläche „Neues Gerät hinzufügen“

Klicken Sie auf „Neues Gerät hinzufügen“.

Bild des Dialogfelds "Cast-Empfänger hinzufügen"

Geben Sie die Seriennummer auf der Rückseite Ihres Übertragungsgeräts ein und geben Sie ihr einen aussagekräftigen Namen. Sie können die Seriennummer auch finden, indem Sie Ihren Bildschirm über die Google Cast SDK Developer Console in Chrome streamen.

Es dauert 5–15 Minuten, bis der Empfänger und das Gerät für den Test bereit sind. Nachdem Sie 5 bis 15 Minuten gewartet haben, müssen Sie Ihr Übertragungsgerät neu starten.

5. Startprojekt vorbereiten

Bevor Sie mit diesem Codelab beginnen, ist es möglicherweise hilfreich, sich den Entwicklerleitfaden für Anzeigen mit einer Übersicht über die neuen Anzeigenfunktionen anzusehen.

Wir müssen die heruntergeladene Start-App für Google Cast unterstützen. Im Folgenden finden Sie einige Begriffe von Google Cast, die wir in diesem Codelab verwenden werden:

  • eine Absender-App auf einem Mobilgerät oder Laptop ausgeführt wird,
  • Eine Empfänger-App wird auf dem Google Cast-Gerät ausgeführt.

Jetzt können Sie mit Ihrem bevorzugten Texteditor auf dem Projekt „Starter“ aufbauen:

  1. Wählen Sie das Verzeichnis Ordnersymbolapp-start aus dem Beispielcode-Download aus.
  2. Öffnen Sie js/receiver.js und index.html.

Hinweis: Während Sie dieses Codelab durcharbeiten, sollte http-server von Ihnen vorgenommene Änderungen übernehmen. Wenn dies der Fall ist, versuchen Sie, http-server zu beenden und neu zu starten.

Für den Absender verwenden wir zur Fehlerbehebung die Fehlerbehebung beim CAF-Empfänger. Der Receiver ist so konzipiert, dass er automatisch einen Stream startet.

App-Design

Die Empfänger-App initialisiert die Streaming-Sitzung und wartet, bis eine LOAD-Anfrage (also der Befehl zur Wiedergabe eines Medienelements) von einem Absender eingeht.

Die App besteht aus einer Hauptansicht (in index.html definiert) und einer JavaScript-Datei namens js/receiver.js, die die gesamte Logik für unseren Empfänger enthält.

index.html

Diese HTML-Datei enthält die gesamte Benutzeroberfläche der Empfänger-App. Im Moment ist sie praktisch leer.

Empfänger.js

Dieses Skript verwaltet die gesamte Logik für unsere Receiver-App. Im Moment enthält es einen einfachen CAF-Receiver.

6. VMAP in Inhalte einfügen

Öffnen Sie zuerst den Websender in Chrome. Geben Sie die Empfänger-App-ID ein, die Sie in der Cast SDK Developer Console erhalten haben, und klicken Sie auf „Festlegen“.

Im Empfänger müssen wir eine Logik hinzufügen, um Anzeigen in den Content aufzunehmen.

Kopieren Sie die folgende Zeile in Ihre js/receiver.js-Datei. Sie enthält ein Beispiel für einen VMAP-Tag-Link von DoubleClick sowie einige Zufallszahlen.

const vmapUrl = "https://pubads.g.doubleclick.net/gampad/ads?sz=640x480&iu=/124319096/external/ad_rule_samples&ciu_szs=300x250&ad_rule=1&impl=s&gdfp_req=1&env=vp&output=vmap&unviewed_position_start=1&cust_params=deployment%3Ddevsite%26sample_ar%3Dpremidpost&cmsid=496&vid=short_onecue&correlator=" + Math.floor(Math.random() * Math.pow(10, 10));

Suchen Sie in der js/receiver.js file-Funktion die Funktion playerManager.setMessageInterceptor und fügen Sie vor der letzten return request;-Zeile Folgendes ein:

request.media.vmapAdsRequest = {
    adTagUrl: vmapUrl,
};

Hinweis: Das Objekt vmapAdsRequest, das oben zugewiesen wurde, ist eine Kurzversion eines VastAdsRequest-Objekts.

Speichere deine Änderungen in js/receiver.js und starte eine Streamingsitzung auf dem Websender. Klicke dazu mit der rechten Maustaste auf eine beliebige Stelle auf der Seite und wähle dann „Streamen“ aus. Der Anzeigenstream sollte sofort wiedergegeben werden.

7. VAST zu Content hinzufügen

Wenn Sie den VMAP-Code oben implementiert haben, kommentieren Sie ihn aus. Im Folgenden erfahren Sie, wie Sie VAST-Anzeigen im Content implementieren.

Kopieren Sie Folgendes in Ihre js/receiver.js-Datei. Sie enthält sechs VAST-Werbeclips von VAST sowie einige zufällige Reihenfolgen. Diese Pausenclips sind 5 Unterbrechungen zugewiesen. Außerdem wird die Position jeder Pause angegeben.

const addVASTBreaksToMedia = (mediaInformation) => {
    mediaInformation.breakClips = [
        {
            id: "bc1",
            title: "bc1 (Pre-roll)",
            vastAdsRequest: {
                adTagUrl: 'https://pubads.g.doubleclick.net/gampad/ads?slotname=/124319096/external/ad_rule_samples&sz=640x480&ciu_szs=300x250&cust_params=deployment%3Ddevsite%26sample_ar%3Dpremidpost&url=&unviewed_position_start=1&output=xml_vast3&impl=s&env=vp&gdfp_req=1&ad_rule=0&vad_type=linear&vpos=preroll&pod=1&ppos=1&lip=true&min_ad_duration=0&max_ad_duration=30000&vrid=6256&correlator=' + Math.floor(Math.random() * Math.pow(10, 10)) + '&video_doc_id=short_onecue&cmsid=496&kfa=0&tfcd=0'
            }
        },
        {
            id: "bc2",
            title: "bc2 (Mid-roll)",
            vastAdsRequest: {
                adTagUrl: 'https://pubads.g.doubleclick.net/gampad/ads?slotname=/124319096/external/ad_rule_samples&sz=640x480&ciu_szs=300x250&cust_params=deployment%3Ddevsite%26sample_ar%3Dpremidpost&url=&unviewed_position_start=1&output=xml_vast3&impl=s&env=vp&gdfp_req=1&ad_rule=0&cue=15000&vad_type=linear&vpos=midroll&pod=2&mridx=1&rmridx=1&ppos=1&lip=true&min_ad_duration=0&max_ad_duration=30000&vrid=6256&correlator=' + Math.floor(Math.random() * Math.pow(10, 10)) + '&video_doc_id=short_onecue&cmsid=496&kfa=0&tfcd=0'
            }
        },
        {
            id: "bc3",
            title: "bc3 (Mid-roll)",
            vastAdsRequest: {
                adTagUrl: 'https://pubads.g.doubleclick.net/gampad/ads?slotname=/124319096/external/ad_rule_samples&sz=640x480&ciu_szs=300x250&cust_params=deployment%3Ddevsite%26sample_ar%3Dpremidpost&url=&unviewed_position_start=1&output=xml_vast3&impl=s&env=vp&gdfp_req=1&ad_rule=0&cue=15000&vad_type=linear&vpos=midroll&pod=2&mridx=1&rmridx=1&ppos=1&lip=true&min_ad_duration=0&max_ad_duration=30000&vrid=6256&correlator=' + Math.floor(Math.random() * Math.pow(10, 10)) + '&video_doc_id=short_onecue&cmsid=496&kfa=0&tfcd=0'
            }
        },
        {
            id: "bc4",
            title: "bc4 (Mid-roll)",
            vastAdsRequest: {
                adTagUrl: 'https://pubads.g.doubleclick.net/gampad/ads?slotname=/124319096/external/ad_rule_samples&sz=640x480&ciu_szs=300x250&cust_params=deployment%3Ddevsite%26sample_ar%3Dpremidpost&url=&unviewed_position_start=1&output=xml_vast3&impl=s&env=vp&gdfp_req=1&ad_rule=0&cue=15000&vad_type=linear&vpos=midroll&pod=2&mridx=1&rmridx=1&ppos=1&lip=true&min_ad_duration=0&max_ad_duration=30000&vrid=6256&correlator=' + Math.floor(Math.random() * Math.pow(10, 10)) + '&video_doc_id=short_onecue&cmsid=496&kfa=0&tfcd=0'
            }
        },
        {
            id: "bc5",
            title: "bc5 (Mid-roll)",
            vastAdsRequest: {
                adTagUrl: 'https://pubads.g.doubleclick.net/gampad/ads?slotname=/124319096/external/ad_rule_samples&sz=640x480&ciu_szs=300x250&cust_params=deployment%3Ddevsite%26sample_ar%3Dpremidpost&url=&unviewed_position_start=1&output=xml_vast3&impl=s&env=vp&gdfp_req=1&ad_rule=0&cue=15000&vad_type=linear&vpos=midroll&pod=2&mridx=1&rmridx=1&ppos=1&lip=true&min_ad_duration=0&max_ad_duration=30000&vrid=6256&correlator=' + Math.floor(Math.random() * Math.pow(10, 10)) + '&video_doc_id=short_onecue&cmsid=496&kfa=0&tfcd=0'
            }
        },
        {
            id: "bc6",
            title: "bc6 (Post-roll)",
            vastAdsRequest: {
                adTagUrl: 'https://pubads.g.doubleclick.net/gampad/ads?slotname=/124319096/external/ad_rule_samples&sz=640x480&ciu_szs=300x250&cust_params=deployment%3Ddevsite%26sample_ar%3Dpremidpost&url=&unviewed_position_start=1&output=xml_vast3&impl=s&env=vp&gdfp_req=1&ad_rule=0&vad_type=linear&vpos=postroll&pod=3&ppos=1&lip=true&min_ad_duration=0&max_ad_duration=30000&vrid=6256&correlator=' + Math.floor(Math.random() * Math.pow(10, 10)) + '&video_doc_id=short_onecue&cmsid=496&kfa=0&tfcd=0'
            }
        }
    ];
    mediaInformation.breaks = [
        {
            id: "b1",
            breakClipIds: ["bc1"],
            position: 0
        },
        {
            id: "b2",
            breakClipIds: ["bc2"],
            position: 15
        },
        {
            id: "b3",
            breakClipIds: ["bc3","bc4"],
            position: 60
        },
        {
            id: "b4",
            breakClipIds: ["bc5"],
            position: 100
        },
        {
            id: "b5",
            breakClipIds: ["bc6"],
            position: -1
        }
    ];
};

Hinweis:Das Attribut breakClipIds einer Werbeunterbrechung ist ein Array. Das bedeutet, dass jeder Pause mehrere Unterbrechungsclips zugewiesen werden können.

Suchen Sie in Ihrer js/receiver.js file nach dem Abfangen von Nachrichten, d. h. nach der Zeile, die mit playerManager.setMessageInterceptor beginnt, und fügen Sie vor der letzten return request;-Zeile in der Funktion Folgendes ein:

addVASTBreaksToMedia(request.media);

Speichere deine Änderungen in js/receiver.js und starte eine Streamingsitzung auf dem Websender. Klicke dazu mit der rechten Maustaste auf eine beliebige Stelle auf der Seite und wähle dann „Streamen“ aus. Der Anzeigenstream sollte sofort wiedergegeben werden.

8. Werbeunterbrechungen überspringen

CAF hat eine neue Klasse namens BreakManager, die Sie bei der Implementierung benutzerdefinierter Geschäftsregeln für das Anzeigenverhalten unterstützt. Angenommen, Sie möchten es Kunden ermöglichen, Anzeigen nach einem bestimmten Zeitraum zu überspringen.

Der Absender in unserem Beispiel hat keine Mediensteuerelemente. Fügen Sie einen Startversatz von 10 Sekunden ein, damit der Stream nach der Pre-Roll-Anzeige, aber vor der ersten Mid-Roll-Pause bei der 15-Sekunden-Marke beginnt.

Suchen Sie den playerManager.setMessageInterceptor und fügen Sie die folgende Zeile vor dem return request hinzu.

request.currentTime = 10;

Speichern Sie die Datei receiver.js und starten Sie eine Streamingsitzung. Der Content sollte 10 Sekunden lang geladen werden und 5 Sekunden später eine Anzeige wiedergeben.

Als Nächstes fügen wir eine Regel hinzu, mit der die Mid-Roll bei der 15-Sekunden-Markierung übersprungen werden kann.

Sie benötigen eine Instanz des BreakManager, um ein Abfangen für das Laden der Werbeunterbrechung festzulegen. Kopieren Sie die folgende Zeile in die Datei js/receiver.js nach den Zeilen mit den Variablen context und playerManager.

const breakManager = playerManager.getBreakManager();

Als Nächstes richten wir einen Abfangen mit einer Regel ein, die vor 30 Sekunden alle Werbeunterbrechungen ignoriert. Dieser Interceptor funktioniert wie der LOAD fanger auf dem PlayerManager, jedoch bezieht sich dieser nur auf das Laden von BreakClips.

Kopieren Sie Folgendes in Ihre js/receiver.js-Datei.

breakManager.setBreakClipLoadInterceptor((breakClip, breakCtx) => {
  /** Below code will skip playback of break clips if the break position is less than 30 **/
  let breakObj = breakCtx.break;
  if(breakObj.position < 30)
    return null;
  else
    return breakClip;
});

Hinweis: Für BreakClips, die übersprungen werden sollen, wird hier null zurückgegeben.

Speichere deine Änderungen in js/receiver.js und starte eine Streamingsitzung auf dem Websender. Klicke dazu mit der rechten Maustaste auf eine beliebige Stelle auf der Seite und wähle dann „Streamen“ aus.

Die Wiedergabe des Streams sollte beginnen, aber der vorher bei 15 Sekunden sichtbare Anzeigenblock wird übersprungen.

9. Verhalten der Suche nach Unterbrechung anpassen

Springt ein Nutzer vorwärts, wird die letzte nicht wiedergegebene Pause zwischenseeseite und -suchzeit abgespielt, bevor die Inhaltswiedergabe an der "suchTo"-Position beginnt. Wenn ein Nutzer zurückspringen möchte, wird keine Pause abgespielt. Dies ist das Standardverhalten für Unterbrechungen.

Mit BreakManager können Sie festlegen, welche Pausen bei einer Suche abgespielt werden. Das von uns gewünschte benutzerdefinierte Verhalten wird mit dem setBreakSeekInterceptor des BreakManager festgelegt. Der setBreakSeekInterceptor wird jedes Mal aufgerufen, wenn ein Suchvorgang ausgeführt wird.

Wir übergeben eine Callback-Funktion an den setBreakSeekInterceptor. An die Callback-Funktion wird ein Objekt übergeben, das alle Unterbrechungen zwischen der „suchFrom“-Position und der „seeTo“-Position enthält.

Richten wir nun einen Abfangen mit einer Regel ein, über die eine Pause zwischen den Positionen „suchFrom“ und „suchTo“ abgespielt wird.

Kopieren Sie Folgendes in Ihre js/receiver.js-Datei.

breakManager.setBreakSeekInterceptor(function(breakSeekData) {
     /**
     *
     * Below code will play an unwatched break between seekFrom and seekTo position
     * Note: If the position of a break is less than 30 then it will be skipped due to the setBreakClipLoadInterceptor code
     */

    let breakToPlay;
    for (let i = 0; i < breakSeekData.breaks.length; i++) {
        if (!breakSeekData.breaks[i].isWatched) {
            breakToPlay = breakSeekData.breaks[i];
        }
    }
    if (breakToPlay){
        breakSeekData.breaks = [breakToPlay];
        return breakSeekData;
    }
});

Hinweis: Wenn wir nichts oder null zurückgeben, wird keine Pause abgespielt. Wenn wir „breakSeekData“ zurückgeben, wie sie sind, werden alle Unterbrechungen zwischen „seeFrom“ und „seetTo“ abgespielt.

Speichere deine Änderungen in js/receiver.js und starte eine Streamingsitzung auf dem Websender. Klicke dazu mit der rechten Maustaste auf eine beliebige Stelle auf der Seite und wähle dann „Streamen“ aus. Der Anzeigenstream sollte sofort wiedergegeben werden.

10. Glückwunsch

Jetzt wissen Sie, wie Sie Ihrer Empfängeranwendung mithilfe des aktuellen Cast Receiver SDK Anzeigen hinzufügen.

Weitere Informationen findest du im Entwicklerleitfaden für Werbeunterbrechungen.