1. Przegląd
Dzięki nim dowiesz się, jak stworzyć niestandardową aplikację internetową, która korzysta z interfejsu Cast Ad Breaks API.
Co to jest Google Cast?
Google Cast pozwala użytkownikom przesyłać treści z urządzeń mobilnych na telewizor. Następnie użytkownicy mogą używać swoich urządzeń mobilnych jako pilota do odtwarzania multimediów na telewizorze.
Pakiet SDK Google Cast pozwala poszerzyć aplikację o telewizor lub system audio. SDK Cast pozwala dodać niezbędne komponenty interfejsu zgodnie z listą kontrolną projektowania Google Cast.
Lista kontrolna projektu Google Cast ułatwia obsługę Cast na wszystkich obsługiwanych platformach.
Co zamierzamy utworzyć?
Po ukończeniu ćwiczeń z programowania utworzysz odbiornik Cast, który będzie korzystać z nowego interfejsu Break API.
Czego się nauczysz
- Jak uwzględnić przerwy w treściach VMAP i VAST w treściach
- Jak pomijać klipy z przerwami
- Jak dostosować domyślne działanie przerwy w trakcie wyszukiwania
Czego potrzebujesz
- Najnowsza przeglądarka Google Chrome.
- Usługa hostingu HTTPS, np. Hosting Firebase lub ngrok.
- urządzenia Google Cast, na przykład Chromecasta lub Androida TV skonfigurowanego z dostępem do internetu;
- Telewizor, monitor z wejściem HDMI lub urządzenie Google Home Hub
Funkcja
- Musisz mieć doświadczenie w tworzeniu stron internetowych.
- Poprzednie doświadczenie w tworzeniu aplikacji przesyłających i odbierających.
Jak będziesz korzystać z tego samouczka?
Jak oceniasz tworzenie aplikacji internetowych?
2. Pobieranie przykładowego kodu
Możesz pobrać cały przykładowy kod na komputer.
i rozpakuj pobrany plik ZIP.
3. Wdrażanie odbiornika lokalnie
Aby używać odbiornika internetowego z urządzeniem przesyłającym, musi być ono hostowane w miejscu, w którym może ono być dostępne. Jeśli masz już dostępny serwer obsługujący https, pomiń poniższe instrukcje i zanotuj adres URL. Będzie on potrzebny w następnej sekcji.
Jeśli nie masz serwera, którego możesz użyć, możesz użyć Hostingu Firebase lub ngrok.
Uruchom serwer
Po skonfigurowaniu wybranej usługi otwórz app-start i uruchom serwer.
Zanotuj adres URL hostowanego odbiornika. Użyjesz ich w następnej sekcji.
4. Rejestrowanie aplikacji w Konsoli programisty Cast
Musisz zarejestrować swoją aplikację, aby móc używać niestandardowego odbiornika (umieszczonego w tym module) na urządzeniach Chromecast. Po zarejestrowaniu aplikacji otrzymasz identyfikator, którego aplikacja nadawcy musi używać do wykonywania wywołań interfejsu API – na przykład do uruchamiania aplikacji odbiornika.
Kliknij „Dodaj nową aplikację”.
Wybierz „Niestandardowy odbiornik”, nad którym właśnie pracujemy.
Wpisz szczegóły nowego odbiorcy. Pamiętaj, by użyć adresu URL z końca adresu.
w ostatniej sekcji. Zanotuj identyfikator aplikacji przypisany do nowego odbiorcy.
Musisz też zarejestrować urządzenie Google Cast, aby mieć dostęp do aplikacji odbiornika przed jego opublikowaniem. Udostępniona aplikacja odbiornika będzie dostępna na wszystkich urządzeniach Google Cast. Na potrzeby tego ćwiczenia zalecamy korzystanie z nieopublikowanej aplikacji odbiornika.
Kliknij „Dodaj nowe urządzenie”.
Wpisz numer seryjny na odwrocie urządzenia przesyłającego i nadaj mu opisową nazwę. Możesz też go znaleźć, przesyłając ekran z Chrome w konsoli Google Cast SDK.
Odbiorca i urządzenie będą gotowe do testowania w ciągu 5–15 minut. Po odczekaniu 5–15 minut musisz ponownie uruchomić urządzenie przesyłające.
5. Przygotowanie projektu Start
Przed rozpoczęciem ćwiczeń z programowania możesz zapoznać się z przewodnikiem dla programistów po reklamach, w którym znajdziesz omówienie nowych funkcji reklam.
Musimy dodać obsługę Google Cast do pobranej aplikacji. Oto terminologia Google Cast, którą będziemy wykorzystywać podczas ćwiczeń z programowania:
- nadawca działa na urządzeniu mobilnym lub laptopie,
- odbiornik na urządzeniu Google Cast.
Teraz możesz kontynuować pracę nad projektem dla początkujących, korzystając z ulubionego edytora tekstu:
- Wybierz katalog
app-startz przykładowego kodu do pobrania. - Otwórz plik
js/receiver.jsi index.html
Ćwiczenia z programowania powinny być dostosowane do zmian wprowadzanych przez użytkownika http-server. Jeśli się nie rozpocznie, spróbuj go zamknąć i ponownie uruchomić http-server.
Do zainicjowania sesji przesyłania w przypadku nadawcy użyjemy funkcji debugowania odbiornika CAF. Odbiornik umożliwia automatyczne rozpoczęcie odtwarzania transmisji.
Projektowanie aplikacji
Aplikacja odbiornika inicjuje sesję przesyłania i przełącza się w tryb gotowości, aż pojawi się żądanie LOAD (czyli polecenie odtworzenia multimediów) od nadawcy.
Aplikacja składa się z jednego głównego widoku zdefiniowanego w index.html i 1 pliku JavaScript o nazwie js/receiver.js, który zawiera wszystkie funkcje logiczne umożliwiające działanie odbiornika.
index.html
Ten plik HTML będzie zawierał cały interfejs naszej aplikacji odbiornika. Na razie jest pusty.
odbiornik.js
Ten skrypt zarządza wszystkimi funkcjami logicznymi naszej aplikacji odbiornika. Obecnie zawiera podstawowy odbiornik CAF.
6. Dodaj VMAP do swoich treści
Aby rozpocząć, otwórz nadawcę w przeglądarce. Wpisz identyfikator aplikacji odbiornika podany w Konsoli programisty SDK i kliknij „Ustaw”.
W odbiorniku musimy dodać logikę, aby umieścić reklamy w treści.
Skopiuj ten wiersz do pliku js/receiver.js. Zawiera on link do przykładowego tagu VMAP z usługi DoubleClick oraz niektóre z losowych parametrów.
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));
W funkcji js/receiver.js file znajdź funkcję playerManager.setMessageInterceptor i dodaj następującą pozycję przed ostatnim wierszem return request; w funkcji.
request.media.vmapAdsRequest = {
adTagUrl: vmapUrl,
};
Uwaga: obiekt przypisany do vmapAdsRequest powyżej jest skróconą wersją obiektu VastAdsRequest.
Zapisz zmiany w pliku js/receiver.js i rozpocznij sesję przesyłania u nadawcy w sieci, klikając prawym przyciskiem myszy w dowolnym miejscu na stronie i wybierając „Przesyłaj”. Strumień reklam powinien rozpocząć się natychmiast.
7. Dodaj VAST do swoich treści
Jeśli kod VMAP został zaimplementowany powyżej, skomentuj go. W dalszej części pokażemy, jak wdrożyć reklamy VAST w treści.
Skopiuj ten kod do pliku js/receiver.js. Zawiera on 6 klipów wideo VAST z DoubleClick i pewną sekwencję. Te klipy są przypisane do 5 przerw. Określono też pozycję każdej przerwy.
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
}
];
};
Uwaga: właściwość breakClipIds przerwy na reklamę to tablica. Do każdej przerwy można przypisać wiele klipów.
W js/receiver.js file znajdź blok wiadomości LOAD, czyli wiersz, który zaczyna się od playerManager.setMessageInterceptor, i dodaj ten fragment przed ostatnim wierszem return request; w funkcji.
addVASTBreaksToMedia(request.media);
Zapisz zmiany w pliku js/receiver.js i rozpocznij sesję przesyłania u nadawcy w sieci, klikając prawym przyciskiem myszy w dowolnym miejscu na stronie i wybierając „Przesyłaj”. Strumień reklam powinien rozpocząć się natychmiast.
8. Pomijanie przerw na reklamę
CAF ma nową klasę o nazwie BreakManager, która pomoże Ci wdrożyć niestandardowe reguły biznesowe dotyczące zachowań reklam. Załóżmy, że chcesz zezwolić klientom na pomijanie reklam po pewnym czasie.
Nadawca w naszym przykładzie nie ma opcji sterowania multimediami. Dodajmy 10-sekundowe przesunięcie czasu rozpoczęcia, tak aby strumień rozpoczynał się po reklamie przed filmem, ale przed pierwszą przerwą w trakcie filmu po 15 sekundach.
Znajdź pole playerManager.setMessageInterceptor i dodaj ten wiersz przed tekstem „return request”.
request.currentTime = 10;
Zapisz plik receiver.js i rozpocznij sesję przesyłania. Treść powinna się wczytywać po 10 sekundach, a po 5 sekundach odtwarzania reklamy.
Teraz dodaj regułę, która ma pomijać reklamę w trakcie filmu po 15 sekundach.
Aby ustawić narzędzie do przechwytywania przerw na reklamę, musisz mieć instancję BreakManager. Skopiuj ten wiersz do pliku js/receiver.js za wierszami ze zmiennymi context i playerManager.
const breakManager = playerManager.getBreakManager();
Teraz skonfigurujmy przechwytujący, który ignoruje wszystkie przerwy na reklamę, które nastąpią przed upływem 30 sekund. Ten przechwytujący działa jak odtwarzacz LOAD w Menedżerze odtwarzaczy, z tym wyjątkiem, że chodzi o ładowanie BreakClips.
Skopiuj ten kod do pliku js/receiver.js.
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;
});
Uwaga: w przypadku tych przerw zwracamy wartość null.
Zapisz zmiany w pliku js/receiver.js i rozpocznij sesję przesyłania u nadawcy w sieci, klikając prawym przyciskiem myszy w dowolnym miejscu na stronie i wybierając „Przesyłaj”.
Strumień powinien rozpocząć odtwarzanie, ale blok reklam, który wcześniej widzieliśmy w 15 sekundach, zostanie pominięty.
9. Dostosowywanie działania wyszukiwania przerw
Gdy użytkownik przewinie do przodu, rozpocznie się ostatnia nieodtworzona przerwa między wyszukiwaniem a wyszukiwaniem, zanim rozpocznie się odtwarzanie treści od miejsca do znalezienia. Gdy użytkownik przewija do tyłu, żadna przerwa nie jest odtwarzana. Jest to domyślne działanie przerwy.
Aby określić, które przerwy mają być odtwarzane podczas wyszukiwania, używamy BreakManager. Aby określić pożądane zachowanie niestandardowe, używamy polecenia setBreakSeekInterceptor elementu BreakManager. Parametr setBreakSeekInterceptor jest wywoływany przy każdym wykonaniu operacji wyszukiwania.
Przekazujemy funkcję wywołania zwrotnego do funkcjiBreakBreakSeekInterceptor. Funkcja wywołania zwrotnego jest przekazywana do obiektu, który zawiera wszystkie przerwy między pozycją searchFrom i pozycją szukającym.
Teraz skonfigurujmy punkt przechwytywania z regułą odtwarzającą przerwę, która nie była jeszcze oglądana między pozycją „fromFrom” i „ToTo”.
Skopiuj ten kod do pliku js/receiver.js.
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;
}
});
Uwaga: jeśli nie zwrócimy niczego/braku, przerwa nie zostanie odtworzona. Jeśli zwrócimy breakSeekData w niezmienionym stanie, odtworzone zostaną wszystkie przerwy między funkcją „Od” i „Do”.
Zapisz zmiany w pliku js/receiver.js i rozpocznij sesję przesyłania u nadawcy w sieci, klikając prawym przyciskiem myszy w dowolnym miejscu na stronie i wybierając „Przesyłaj”. Strumień reklam powinien rozpocząć się natychmiast.
10. Gratulacje
Wiesz już, jak dodawać reklamy do aplikacji odbiornika przy użyciu najnowszego pakietu SDK odbiornika.
Więcej informacji znajdziesz w przewodniku dla deweloperów dotyczącym przerw na reklamy.