เมื่อใช้ IMA SDK จะมีโปรแกรมเล่นวิดีโอ 2 โปรแกรมแยกกัน ได้แก่ โปรแกรมเล่นวิดีโอเนื้อหาและโปรแกรมโฆษณา SDK จะจัดการการวางซ้อนโปรแกรมเล่น
โฆษณาบนโปรแกรมเล่นวิดีโอเนื้อหาโดยอัตโนมัติ ด้วยเหตุนี้ การเพิ่ม Listener เหตุการณ์ลงใน
โปรแกรมเล่นวิดีโอโดยตรงจึงไม่ได้ผล วิธีแก้ปัญหาเบื้องต้นอย่างหนึ่งคือการแสดงและซ่อนคอนเทนเนอร์โฆษณา แต่ก็อาจรบกวนฟังก์ชันการทำงานของ SDK ได้ วิธีแก้ปัญหาที่ดีกว่าคือการรวมโปรแกรมเล่นทั้งสองไว้ใน div
ระดับบนสุดและแนบ Listener เหตุการณ์
คู่มือนี้จะแสดงวิธีดำเนินการ
ข้อกำหนดเบื้องต้น
- โปรแกรมเล่นวิดีโอ HTML5 ที่ผสานรวม IMA HTML5 SDK หากยังไม่มี โปรดดูคู่มือเริ่มต้นใช้งาน
แก้ไข HTML
ก่อนอื่นคุณต้องเปลี่ยน HTML เพื่อเพิ่ม div
ที่รวมทั้งโปรแกรมเล่นโฆษณาและโปรแกรมเล่นวิดีโอเนื้อหา ในคู่มือเริ่มต้นใช้งาน คุณไม่ต้องดำเนินการใดๆ กับ mainContainer
ดังนี้
... <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> ...
เพิ่ม Listener เหตุการณ์ลงใน JavaScript
ถัดไป ให้เพิ่ม Listener เหตุการณ์ลงในโค้ด JavaScript เช่น เพื่อตรวจหาการที่ผู้ใช้คลิกวิดีโอ ตัวอย่างเช่น ใน ads.js
:
...
function init() {
videoContent = document.getElementById('contentElement');
mainContainer = document.getElementById('mainContainer');
mainContainer.addEventListener('click', function() { alert('I was clicked!');});
...
}
...
เท่านี้ก็เรียบร้อย คุณสามารถคลิกที่วิดีโอและดูป๊อปอัปปรากฏขึ้นได้ ไม่ว่าโฆษณาจะกำลังเล่นอยู่หรือไม่และยังคงมีการคลิกผ่านโฆษณาอยู่
ลองเลย
ดูการใช้งานที่ใช้งานได้ด้านล่าง