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ı VOD yayınlarını oynatma
Bu kılavuzda, Google Cloud VOD yayın oturumu isteğinde bulunmak ve oynatmak için HTML5 için IMA DAI SDK'sının nasıl kullanılacağı gösterilmektedir.
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.
IMA SDK'da kullanılacak aşağıdaki değişkenleri girin:- Konum
- VOD 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
Kısa süreli OAuth jetonları 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
- VOD yapılandırma kimliği
VOD akışı için VOD yapılandırma kimliği:
VOD_CONFIG_IDVOD yapılandırma kimliği oluşturma hakkında daha fazla bilgi için Cloud birleştirme VOD yapılandırması oluşturma kılavuzunu inceleyin.
Geliştirme ortamı yapılandırma
IMA örnek uygulamaları yalnızca HLS akış isteklerini gösterir. VideoStitcherVodStreamRequest 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/simple örnek zip dosyasını 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 "Tears of Steel" adlı kısa film, her 30 saniyede bir reklam aralarıyla başlar.
VOD akışı isteme
Örnek akışı, reklam eklenmiş VOD akışınızla değiştirmek için
VideoStitcherVodStreamRequest
sınıfını kullanarak Google Ad Manager ile otomatik olarak bir reklam oturumu oluşturun. İ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 VideoStitcherVodStreamRequest 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 DAI 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() {
requestVodVideoStitcherStream();
playButton.style.display = "none";
playButton.removeEventListener('click', initiatePlayback);
playButton.addEventListener('click', resumePlayback);
}
...
function requestVodVideoStitcherStream() {
const streamRequest = new google.ima.dai.api.VideoStitcherVodStreamRequest();
streamRequest.vodConfigId = 'VOD_CONFIG_ID';
streamRequest.region = 'LOCATION';
streamRequest.projectNumber = 'PROJECT_NUMBER';
streamRequest.oAuthToken = 'OAUTH_TOKEN';
streamRequest.networkCode = 'NETWORK_CODE';
streamManager.requestStream(streamRequest);
}
Sayfayı tekrar yükleyin. Ardından, özel VOD akışını isteyip oynatabilirsiniz.
(İsteğe bağlı) Akış oturumu seçenekleri ekleme
VideoStitcherVodStreamRequest.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);
Temizleme
Google Cloud Video Stitcher API'yi kullanarak bir VOD yayını barındırdınız ve HTML5 için IMA DAI SDK'yı kullanarak bu yayını istediniz. Şimdi, yayın kaynaklarını temizlemeniz gerekiyor.
Gereksiz kaynakları ve öğeleri kaldırmak için VOD temizleme kılavuzunu inceleyin.
Son olarak, Python 3 web sunucusunu başlattığınız terminal penceresinde ctrl+C komutunu kullanarak yerel sunucuyu sonlandırın.