IMA SDK'yı kullanırken içerik video oynatıcınız ve reklam oynatıcısı olmak üzere iki ayrı video oynatıcı bulunur. SDK, reklam oynatıcının içerik video oynatıcısının üzerine yerleştirilmesini otomatik olarak yönetir. Sonuç olarak, etkinlik işleyicilerin doğrudan video oynatıcıya eklenmesi işe yaramaz. Geçici çözümlerden biri, reklam kapsayıcısını göstermek ve gizlemektir. Ancak bu durum SDK işlevselliğini etkileyebilir. Her iki oyuncuyu da bir üst div içine almak ve buna etkinlik işleyicileri eklemek daha iyi bir çözümdür.
Bu kılavuzda bunu nasıl yapacağınız açıklanmaktadır.
Ön koşullar
- IMA HTML5 SDK entegre edilmiş HTML5 video oynatıcı. Yoksa Başlangıç kılavuzumuza göz atın.
HTML'nizi değiştirme
Öncelikle, hem reklam oynatıcıyı hem de içerik video oynatıcısını sarmalayan bir div eklemek için HTML'nizi değiştirmeniz gerekir. Başlangıç kılavuzunda, bu işlem mainContainer ile sizin için zaten yapılmıştır:
... <div id="mainContainer"> <div id="content"> <video id="contentElement"> <source src="https://storage.googleapis.com/gvabox/media/samples/stock.mp4"> </video> </div> <div id="adContainer"></div> </div> ...
JavaScript'inize etkinlik işleyiciler ekleme
Ardından, JavaScript kodunuza etkinlik işleyiciler ekleyin (örneğin, bir kullanıcının videoyu tıkladığını algılamak için). Örneğin, ads.js için:
...
function init() {
videoContent = document.getElementById('contentElement');
mainContainer = document.getElementById('mainContainer');
mainContainer.addEventListener('click', function() { alert('I was clicked!');});
...
}
...
İşte bu kadar. Videoyu tıklayıp pop-up'ın görüntülenmesini, reklamın oynatılıp oynatılmadığını ve reklam tıklamalarının çalışıp çalışmadığını kontrol edebilirsiniz.
Deneyin
Aşağıda çalışan bir uygulama görebilirsiniz.