IMA SDK'sı kullanırken içerik video oynatıcınız ve reklam oynatıcınız olmak üzere iki ayrı video oynatıcı vardır. SDK, reklam oynatıcının içerik video oynatıcının üzerine bindirilmesini otomatik olarak yönetir. Sonuç olarak, doğrudan video oynatıcıya etkinlik dinleyicileri eklemek işe yaramaz. Bu sorunun geçici çözümlerinden biri, reklam kapsayıcısını göstermek ve gizlemektir ancak bu, SDK işlevlerini etkileyebilir. Daha iyi bir çözüm, her iki oyuncuyu da bir üst öğeye div sarmalamak ve etkinlik işleyicileri buna eklemektir.
Bu kılavuzda bunun nasıl yapılacağı gösterilmektedir.
Ön koşullar
- IMA HTML5 SDK'sı entegre edilmiş HTML5 video oynatıcı. Hesabınız yoksa IMA SDK'yı ayarlama başlıklı makaleyi inceleyin.
HTML'nizi değiştirme
Öncelikle HTML'nizi, hem reklam oynatıcıyı hem de içerik video oynatıcıyı saran bir div eklemek için değiştirmeniz gerekir. *IMA SDK'sını kurma* bölümünde, mainContainer ile bu işlem 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şleyicileri ekleme
Ardından, JavaScript kodunuza etkinlik dinleyicileri ekleyin (ör. kullanıcının videoyu tıkladığını algılamak için). Örneğin, ads.js dosyasında:
...
function init() {
videoContent = document.getElementById('contentElement');
mainContainer = document.getElementById('mainContainer');
mainContainer.addEventListener('click', function() { alert('I was clicked!');});
...
}
...İşte bu kadar. Videoyu tıkladığınızda, reklam oynatılıyor olup olmadığına bakılmaksızın pop-up gösterilir ve reklam tıklamaları çalışmaya devam eder.
Deneyin
Aşağıda çalışan bir uygulama örneğini görebilirsiniz.