1. Genel bakış
Bu codelab'de Cast Ad Breaks API'yi kullanan Özel Web Alıcısı uygulamasının nasıl oluşturulacağı açıklanmaktadır.
Google Cast nedir?
Google Cast, kullanıcıların mobil cihazlardan TV'ye içerik yayınlamasına olanak tanır. Kullanıcılar daha sonra mobil cihazlarını TV'de medya oynatma için uzaktan kumanda olarak kullanabilir.
Google Cast SDK'sı, TV veya ses sistemini kontrol etmek için uygulamanızı genişletmenize olanak tanır. Cast SDK'sı, Google Cast Tasarım Listesi'ne göre gerekli kullanıcı arayüzü bileşenlerini eklemenize olanak tanır.
Google Cast Tasarım Listesi, Cast kullanıcı deneyimini desteklenen tüm platformlarda basit ve tahmin edilebilir hale getirmek amacıyla hazırlanmıştır.
Ne tür bir kampanya oluşturacağız?
Bu codelab'i tamamladığınızda yeni Break API'den yararlanan bir Yayın Alıcısı oluşturmuş olursunuz.
Neler öğreneceksiniz?
- Yayın için içeriğe VMAP ve VAST araları ekleme
- Ara klipleri atlama
- Aramada varsayılan ara davranışını özelleştirme
Gerekenler
- En son Google Chrome tarayıcı.
- Firebase Hosting veya ngrok gibi HTTPS barındırma hizmeti.
- İnternet erişimiyle yapılandırılmış Chromecast veya Android TV gibi bir Google Cast cihazı.
- HDMI girişli bir TV ya da monitör veya Google Home Hub
Deneyim
- Bunun için önce web geliştirme bilgisine sahip olmanız gerekir.
- Yayın gönderen ve alıcı uygulamaları oluşturma konusunda önceki deneyim.
Bu eğiticiyi nasıl kullanacaksınız?
Web uygulaması oluşturma deneyiminizi nasıl değerlendirirsiniz?
2. Örnek kodu alın
Tüm örnek kodu bilgisayarınıza indirebilirsiniz...
ve indirilen zip dosyasının paketini açın.
3. Alıcınızı yerel olarak dağıtma
Web alıcınızın Yayın cihazıyla kullanılabilmesi için yayın cihazınızın yayın cihazına ulaşabileceği bir yerde barındırılması gerekir. https'yi destekleyen bir sunucunuz zaten varsa aşağıdaki talimatları atlayın ve sonraki bölümde ihtiyaç duyacağınız URL'yi not edin.
Kullanabileceğiniz bir sunucunuz yoksa Firebase Hosting veya ngrok'u kullanabilirsiniz.
Sunucuyu çalıştırma
İstediğiniz hizmeti ayarladıktan sonra app-start bölümüne gidip sunucunuzu başlatın.
Barındırılan alıcınızın URL'sini not edin. Bunları bir sonraki bölümde kullanacaksınız.
4. Cast Developer Console'da uygulama kaydetme
Bu codelab'de açıklandığı şekilde Chromecast cihazlarda özel bir alıcı çalıştırabilmek için uygulamanızı kaydetmeniz gerekir. Uygulamanızı kaydettikten sonra, gönderen uygulamanızın API çağrıları yapmak için kullanması gereken bir uygulama kimliği (ör. bir alıcı uygulama başlatmak) alırsınız.
"Yeni uygulama ekle"yi tıklayın.
"Özel Alıcı"yı seçin. Oluşturduğumuz öğe budur.
Yeni alıcınızın ayrıntılarını girin. Son aldığınız URL'yi kullandığınızdan emin olun
belirleyebilirsiniz. Yeni alıcınıza atanan Uygulama Kimliğini not edin.
Ayrıca, yayınlamadan önce alıcı uygulamanıza erişebilmesi için Google Cast cihazınızı kaydetmeniz gerekir. Alıcı uygulamanız, yayınlandıktan sonra tüm Google Cast cihazlarında kullanılabilir. Bu codelab'in amaçları doğrultusunda, yayınlanmamış bir alıcı uygulamayla çalışmanızı öneririz.
"Yeni Cihaz Ekle"yi tıklayın.
Yayın cihazınızın arkasında yazılı olan seri numarasını girin ve açıklayıcı bir ad verin. Google Cast SDK Developer Console'a erişirken ekranınızı Chrome'da yayınlayarak da seri numaranızı bulabilirsiniz
Alıcınızın ve cihazınızın teste hazır olması 5-15 dakika sürer. 5-15 dakika bekledikten sonra Yayın cihazınızı yeniden başlatmanız gerekir.
5. Başlangıç Projesini Hazırlama
Bu codelab'e başlamadan önce, yeni reklam işlevine genel bakış sunan reklam geliştirici kılavuzunu incelemeniz faydalı olabilir.
İndirdiğiniz başlangıç uygulamasına, Google Cast için destek eklememiz gerekiyor. Bu codelab'de kullanacağımız bazı Google Cast terimleri şunlardır:
- Mobil cihazda veya dizüstü bilgisayarda çalışan bir gönderen uygulaması
- Google Cast cihazında çalışan bir alıcı uygulaması
Artık favori metin düzenleyicinizi kullanarak başlangıç projesini temel alabilirsiniz:
- Örnek kod indirme işleminizden
app-startdizinini seçin. js/receiver.jsve index.html dosyalarını açma
Bu codelab'de çalışırken http-server adlı kullanıcının yaptığınız değişiklikleri kabul etmesi gerektiğini unutmayın. Olmadığını fark ederseniz http-server uygulamasını sonlandırıp yeniden başlatmayı deneyin.
Gönderenimiz için bir Yayınlama oturumu başlatmak üzere CAF Alıcı Hata Ayıklamasını da kullanacağız. Alıcı, otomatik olarak yayın oynatmaya başlayacak şekilde tasarlanmıştır.
Uygulama Tasarımı
Alıcı uygulama, Yayın oturumunu başlatır ve bir gönderenden gelen YÜKLE isteği (yani bir medya parçasını çalma komutu) gelene kadar beklemede kalır.
Uygulama, index.html dilinde tanımlanan bir ana görünüm ve alıcımızın çalışması için tüm mantığı içeren js/receiver.js adlı bir JavaScript dosyasından oluşur.
index.html
Bu html dosyası, alıcı uygulamamızın tüm kullanıcı arayüzünü içerir. Şimdilik temelde boş.
alıcı.js
Bu komut dosyası, alıcı uygulamamızın mantığını yönetir. Şu anda bir temel CAF alıcısı içerir.
6. İçeriğinize VMAP ekleme
Başlamak için Chrome'da web gönderenini açın. Cast SDK Developer Console'da verilen Alıcı Uygulaması Kimliğini girin ve "Ayarla"yı tıklayın.
Alıcının içeriğe reklam ekleyebilmesi için bir mantık eklememiz gerekir.
Aşağıdaki satırı js/receiver.js dosyanıza kopyalayın. DoubleClick'ten örnek bir VMAP etiket bağlantısı ve bazı rastgele öğeler içerir.
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));
js/receiver.js file işlevinizde, playerManager.setMessageInterceptor işlevini bulun ve işlevdeki son return request; satırından önce aşağıdakini ekleyin.
request.media.vmapAdsRequest = {
adTagUrl: vmapUrl,
};
Not: Yukarıda vmapAdsRequest öğesine atanan nesne, VastAdsRequest nesnesinin kısaltılmış sürümüdür.
Sayfada js/receiver.js ile ilgili değişikliklerinizi kaydedin ve herhangi bir sayfada sağ tıklayıp "Yayınla"yı seçerek yayın oturumu başlatın. Reklam akışı hemen oynatılmaya başlar.
7. İçeriğinize VAST Ekleme
Yukarıdaki VMAP kodunu uyguladıysanız lütfen o koda yorum ekleyin. Aşağıda, içeriğe VAST reklamları nasıl uygulayabileceğiniz açıklanmaktadır.
Aşağıdaki kısmı js/receiver.js dosyanıza kopyalayın. DoubleClick'ten altı VAST ara klibi ve bazı rastgele öğeler içerir. Bu ara klipleri 5 araya atanır. Her bir aranın konumu da belirtilir.
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
}
];
};
Not: Molanın breakClipIds özelliği bir dizidir. Bu, her bir araya birden fazla ara klibi atanabileceği anlamına gelir.
js/receiver.js file işlevinde, YÜKLENİ mesajı önleyicisini, diğer bir deyişle playerManager.setMessageInterceptor ile başlayan satırı bulun ve işlevdeki son return request; satırından önce aşağıdakini ekleyin.
addVASTBreaksToMedia(request.media);
Sayfada js/receiver.js ile ilgili değişikliklerinizi kaydedin ve herhangi bir sayfada sağ tıklayıp "Yayınla"yı seçerek yayın oturumu başlatın. Reklam akışı hemen oynatılmaya başlar.
8. Reklam Aralarını Atlama
CAF'nin, reklam davranışları için özel iş kuralları uygulamanıza yardımcı olan BreakManager adlı yeni bir sınıfı vardır. Müşterilere belirli bir süre sonra reklamları atlamaları için ek süre vermek istediğinizi varsayalım.
Örneğimizdeki gönderenin medya denetimleri yok. Yayının, videodan önce gösterilen reklamdan sonra, videonun ortasında gösterilen reklamdan önce ve 15. saniyeden önce oynatılmaya başlaması için 10 saniyelik başlangıç ofseti ekleyelim.
playerManager.setMessageInterceptor ifadesini bulun ve aşağıdaki satırı return request ifadesinin önüne ekleyin.
request.currentTime = 10;
receiver.js dosyasını kaydedin ve bir Yayınlama oturumu başlatın. İçeriğin 10 saniye boyunca yüklendiğini ve ardından 5 saniye sonra bir reklam oynatıldığını görmeniz gerekir.
Şimdi videonun ortasında gösterilen reklamı 15. saniyede atlamak için bir kural ekleyelim.
Ara yüklenirken yükleme yapmak için bir BreakManager engelleme örneği oluşturmanız gerekir. Aşağıdaki satırı context ve playerManager değişkenlerini içeren satırlardan sonra js/receiver.js dosyanıza kopyalayın.
const breakManager = playerManager.getBreakManager();
Şimdi, 30 saniyeden önce gerçekleşen reklam aralarını yok sayacak bir kuralla birlikte bir araya ekleme kuralı oluşturalım. Bu aracı, PlayerManager'daki YÜKLEYİCİ önleyicisi gibi çalışır. Ancak bu sınır, BreakClips'i yüklemeye özeldir.
Aşağıdaki kısmı js/receiver.js dosyanıza kopyalayın.
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;
});
Not: Atlanması gereken BreakClips için null değerini döndürürüz.
Sayfada js/receiver.js ile ilgili değişikliklerinizi kaydedin ve herhangi bir sayfada sağ tıklayıp "Yayınla"yı seçerek yayın oturumu başlatın.
Akış oynatılmaya başlar ancak daha önce 15. saniyede gördüğümüz reklam bloku atlanır.
9. Mola Arama Davranışını Özelleştirme
Kullanıcı videoyu ileri kaydırdığında, içerik oynatma sarma modundan oynatılmaya başlamadan önce sarmalama ve sarmalama arasındaki son oynatılmayan ara oynatılır. Kullanıcı geri aradığında mola çalmaz. Bu, varsayılan ara davranışıdır.
Bir aramada hangi araların oynatılacağını özelleştirmek için BreakManager'dan yararlanırız. İstediğiniz özel davranışı belirtmek için BreakManager'ın setBreakSeekInterceptor'ını kullanırız. Bir set işlemi gerçekleştiğinde setBreakSeekInterceptor çağrılır.
setBreakSeekInterceptor'a bir geri çağırma işlevi iletiriz. Geri çağırma işlevi,{7}ile başlayan ve arama konumu arasındaki tüm araları içeren bir nesne iletir.
Şimdi, "FromFrom" konumu ile "SearchTo" konumu arasında önceden izlenmemiş bir arayı oynatmaya yönelik bir kuralla birlikte araya giren bir kullanıcı oluşturalım.
Aşağıdaki kısmı js/receiver.js dosyanıza kopyalayın.
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;
}
});
Not: Hiçbir sonuç veya boş sonuç döndürülmezse herhangi bir ara gösterilmez. breakSeekData kodunu olduğu gibi döndürürsek, fromFrom to fetch arasındaki tüm aralar oynatılır.
Sayfada js/receiver.js ile ilgili değişikliklerinizi kaydedin ve herhangi bir sayfada sağ tıklayıp "Yayınla"yı seçerek yayın oturumu başlatın. Reklam akışı hemen oynatılmaya başlar.
10. Tebrikler
Artık en son Cast Alıcı SDK'sını kullanarak alıcı uygulamanıza nasıl reklam ekleyeceğinizi biliyorsunuz.
Daha fazla bilgi için Reklam Araları geliştirici kılavuzuna bakın.