IMA SDK'ları, multimedya reklamları web sitelerinize ve uygulamalarınıza entegre etmeyi kolaylaştırır. IMA SDK'ları, herhangi bir VAST uyumlu reklam sunucusundan reklam isteğinde bulunabilir ve uygulamalarınızda reklam oynatmayı yönetebilir. IMA DAI SDK'ları sayesinde uygulamalar, reklam ve içerik videosu (VOD veya canlı içerik) için akış isteği gönderir. SDK daha sonra birleştirilmiş bir video akışı döndürür. Böylece uygulamanızda reklam ve içerik videosu arasında geçiş yapmanız gerekmez.
Tercih ettiğiniz DAI çözümünü seçin:
- Tam hizmet DAI ile kurulum: Google Ad Manager, reklamları seçer ve doğrudan içerik akışınızda birleştirir.
- Kapsül yayınlama DAI ile ayarlama: Google Ad Manager, bir video oynatıcıya birleştirilebilecek veya yüklenebilecek reklam kapsülleri sağlar.
Google Cloud Video Stitcher API'ye kayıtlı canlı yayınları oynatma
Bu kılavuzda, Google Cloud Video Stitcher API ile kayıtlı bir etkinlik için canlı yayın isteğinde bulunmak ve canlı yayını oynatmak üzere HTML5 için IMA DAI SDK'nın nasıl kullanılacağı ve oynatma sırasında reklam arasının nasıl ekleneceği açıklanmaktadır.
Bu kılavuz, IMA DAI için Başlangıç kılavuzundaki temel örneği genişletir.
Diğer platformlarla entegrasyon veya IMA istemci tarafı SDK'larını kullanma hakkında bilgi için Interactive Media Ads SDK'ları bölümüne bakın.
Tamamlanmış bir örnek entegrasyonu görüntülemek veya takip etmek için HLS veya DASH için Cloud Video Stitcher örneğini indirin.
Google Cloud projesi oluşturun
Google Cloud projesi oluşturun ve projeye erişmek için hizmet hesaplarını yapılandırın.
Kendi canlı yayın içeriğinizi veya test canlı yayını kullanarak canlı yayın etkinliği için yapılandırma oluşturun. Bu kılavuzda bir HLS yayını kullanıldığı varsayılır.
IMA SDK'da kullanılacak aşağıdaki değişkenleri girin:- Konum
- Canlı yapılandırmanızın oluşturulduğu Google Cloud bölgesi:
LOCATION - Proje numarası
- Video Stitcher API'yi kullanan Google Cloud proje numarası:
PROJECT_NUMBER - OAuth jetonu
Video Stitcher kullanıcı rolüne sahip bir hizmet hesabının kısa süreli OAuth jetonu:
OAUTH_TOKEN
Hizmet hesapları için kısa süreli kimlik bilgileri oluşturma hakkında daha fazla bilgi edinin. OAuth jetonu, süresi dolmadığı sürece birden fazla istekte yeniden kullanılabilir.
- Ağ kodu
Reklam isteğinde bulunmak için Ad Manager ağ kodu:
NETWORK_CODE
- Canlı yapılandırma kimliği
- Canlı yayın etkinliğinizi oluştururken belirttiğiniz canlı yapılandırma kimliği:
LIVE_CONFIG_ID - Özel öğe anahtarı
- Video Stitcher API ile canlı yayın etkinliği için yapılandırma oluşturma işlemi sırasında oluşturulan Ad Manager özel öğe anahtarı:
CUSTOM_ASSET_KEY
Geliştirme ortamı yapılandırma
IMA örnek uygulamaları yalnızca HLS akış isteklerini gösterir. VideoStitcherLiveStreamRequest sınıfını oluştururken DASH akışlarını kullanmaya devam edebilirsiniz. DASH uyumlu oynatıcınızı ayarlarken video oynatıcınızın ilerleme etkinlikleri için videonun meta verilerini StreamManager.processMetadata()'ye sağlayabilecek bir dinleyici ayarlamanız gerekir.
Bu işlev üç parametre alır:
type: HLS akışları için'ID3', DASH akışları için'urn:google:dai:2018'olarak ayarlanması gereken bir dize.data: DASH etkinlik mesajları için bu, mesaj veri dizesidir.timestamp: DASH akışları için etkinlik mesajı başlangıç zamanını belirten sayı.
Meta verileri, oynatıcı etkinliklerinizin sağlayabileceği en kısa sürede ve en sık şekilde gönderin. Meta veriler eksik veya yanlışsa IMA DAI SDK'sı reklam etkinliklerini tetiklemeyebilir ve bu da reklam etkinliklerinin yanlış raporlanmasına neden olabilir.
HTML5 için IMA DAI örneklerini indirin ve HLS.js basit örneğini yeni bir klasöre çıkarın. Bu örnek, test amacıyla yerel olarak barındırabileceğiniz bir web uygulamasıdır.
Örneği yerel olarak barındırmak için yeni klasöre gidin ve bir web sunucusu başlatmak için aşağıdaki python komutunu çalıştırın:
python3 -m http.server 8000http.server yalnızca Python 3.x'te kullanılabilir. Apache HTTP Server veya Node JS gibi başka bir web sunucusu da kullanabilirsiniz.
Bir web tarayıcısı açın ve video oynatıcıyı görmek için localhost:8000 adresine gidin.
Tarayıcınız HLS.js kitaplığını desteklemelidir.
Her şey düzgün çalışıyorsa video oynatıcıdaki oynat düğmesini tıkladığınızda kısa bir reklamın ardından "Tears of Steel" adlı kısa film başlar. Bu içerik, seç-izle video (VOD) akışı kullanılarak yayınlanır.
Canlı yayın isteğinde bulunma
Örnek VOD akışını canlı yayınınızla değiştirmek için Google Ad Manager ile otomatik olarak reklam oturumu oluşturan VideoStitcherLiveStreamRequest sınıfını kullanın. İzleme ve hata ayıklama için oluşturulan DAI oturumlarını bulmak üzere Google Ad Manager kullanıcı arayüzünü kullanabilirsiniz.
Mevcut örnekte, VOD akışı veya canlı yayın istemek için işlevler vardır. Google Cloud Video Stitcher API ile çalışması için VideoStitcherLiveStreamRequest nesnesi döndüren yeni bir işlev eklemeniz gerekir.
Aşağıda bununla ilgili bir örnek verilmiştir:
// StreamManager which will be used to request ad-enabled streams.
let streamManager;
...
function initPlayer() {
videoElement = document.getElementById('video');
adUiElement = document.getElementById('adUi');
streamManager = new google.ima.dai.api.StreamManager(
videoElement,
adUiElement
);
streamManager.addEventListener(
[
google.ima.dai.api.StreamEvent.Type.LOADED,
google.ima.dai.api.StreamEvent.Type.ERROR,
google.ima.dai.api.StreamEvent.Type.AD_BREAK_STARTED,
google.ima.dai.api.StreamEvent.Type.AD_BREAK_ENDED
],
onStreamEvent, false);
hls.on(Hls.Events.FRAG_PARSING_METADATA, function(event, data) {
if (streamManager && data) {
// For each ID3 tag in our metadata, we pass in the type - ID3, the
// tag data (a byte array), and the presentation timestamp (PTS).
data.samples.forEach(function(sample) {
streamManager.processMetadata('ID3', sample.data, sample.pts);
});
}
});
videoElement.addEventListener('pause', () => {
playButton.style.display = 'block';
});
playButton.addEventListener('click', initiatePlayback);
}
function initiatePlayback() {
requestVideoStitcherStream();
playButton.style.display = "none";
playButton.removeEventListener('click', initiatePlayback);
playButton.addEventListener('click', resumePlayback);
}
...
function requestVideoStitcherStream() {
const streamRequest = new google.ima.dai.api.VideoStitcherLiveStreamRequest();
streamRequest.liveStreamEventId = 'LIVE_CONFIG_ID';
streamRequest.region = 'LOCATION';
streamRequest.projectNumber = 'PROJECT_NUMBER';
streamRequest.oAuthToken = 'OAUTH_TOKEN';
streamRequest.networkCode = 'NETWORK_CODE';
streamRequest.customAssetKey = 'CUSTOM_ASSET_KEY';
streamManager.requestStream(streamRequest);
}
Yerel test için canlı yayın dosyaları bir Cloud Storage paketinde bulunuyorsa http://localhost:8000 kaynağı için CORS'u etkinleştirmeniz gerekir.
Sayfayı tekrar yükleyin. Ardından, özel canlı yayınlar isteyebilir ve oynatabilirsiniz.
(İsteğe bağlı) Akış oturumu seçenekleri ekleme
VideoStitcherLiveStreamRequest.videoStitcherSessionOptions kullanarak varsayılan Cloud Video Stitcher API yapılandırmasını geçersiz kılmak için oturum seçenekleri ekleyerek akış isteğinizi özelleştirin.
Tanınmayan bir seçenek sağlarsanız Cloud Video Stitcher API, HTTP 400 hatasıyla yanıt verir. Yardım için sorun giderme kılavuzuna göz atın.
Örneğin, en düşük bit hızından en yüksek bit hızına kadar sıralanmış yorumlarla iki akış manifesti isteyen aşağıdaki kod snippet'iyle manifest seçeneklerini geçersiz kılabilirsiniz.
...
// The following session options are examples. Use session options
// that are compatible with your video stream.
streamRequest.videoStitcherSessionOptions = {
"manifestOptions": {
"bitrateOrder": "ascending"
}
};
streamManager.requestStream(streamRequest);
Reklam arası ekleme
Google Cloud Video Stitcher API, her reklam arası için reklam etiketinden alınan reklamları ekler. Reklam araları, manifest dosyasında reklam işaretçileri kullanılarak belirtilir. Reklam işaretçileri, canlı yayın kodlayıcısı tarafından eklenir.
Kendi canlı yayınınızı kullanıyorsanız reklam işaretçisini eklemeniz gerekir. Desteklenen HLS ve DASH reklam işaretleyicileri hakkında daha fazla bilgi için reklam işaretleyicileri belgelerine bakın.
Google Cloud Livestream API'yi kullanarak canlı yayın oluşturduysanız reklam arası kanal etkinliği ekleyin.
Reklam, reklam arası eklendikten hemen sonra oynatılır.
Temizleme
Google Cloud Video Stitcher API'yi kullanarak canlı yayın barındırma ve HTML5 için IMA DAI SDK'yı kullanarak canlı yayın isteğinde bulunma işlemlerini başarıyla tamamladınız. Şimdi, yayın kaynaklarını temizlemeniz gerekiyor.
Gereksiz kaynakları ve öğeleri kaldırmak için canlı yayın temizleme kılavuzunu uygulayın.
Son olarak, Python 3 web sunucusunu başlattığınız terminal penceresinde ctrl+C komutunu kullanarak yerel sunucuyu sonlandırın.