เริ่มต้นใช้งาน IMA SDK ใน HbbTV

IMA DAI SDK รองรับการผสานรวมเข้ากับแอปโปรแกรมเล่นวิดีโอ HbbTV ที่น้อยที่สุด IMA DAI SDK ช่วยให้ความต้องการ Google Ad Manager สำหรับสตรีมโฆษณาบรอดแบนด์ ประกอบกับสตรีมเนื้อหาบรอดแบนด์ คู่มือนี้ครอบคลุมการโหลดไฟล์ Manifest ของโฆษณาตามข้อมูลเหตุการณ์โฆษณาจากสตรีมการออกอากาศ

หากต้องการดูหรือทําตามตัวอย่างการผสานรวมที่เสร็จสมบูรณ์ ให้ดาวน์โหลดแอปตัวอย่างสตรีมแบบสดของ HbbTV ที่มี IMA HTML5 DAI SDK คู่มือนี้และแอปตัวอย่าง GitHub จะอยู่ใน JavaScript สำหรับ ES5 และเพื่อรองรับอุปกรณ์ทีวีรุ่นเก่า

หมายเหตุ: IMA DAI SDK สําหรับ HTML5 รองรับไฟล์ Manifest ของพ็อดโฆษณา และต้องมีพรมแดนที่รองรับการโหลดสตรีมล่วงหน้า คู่มือนี้ใช้ dash.js สำหรับโปรแกรมเล่นวิดีโอ

ดูข้อมูลเกี่ยวกับการผสานรวมกับแพลตฟอร์มอื่นๆ ที่ไม่ใช่ HbbTV ได้ที่ SDK โฆษณาสื่ออินเทอร์แอกทีฟ

ข้อกำหนดเบื้องต้น

ก่อนดำเนินการตามคู่มือนี้ โปรดตรวจสอบว่าคุณมีสิ่งต่อไปนี้

• หากต้องการใช้ IMA DAI คุณต้องมีบัญชี Ad Manager 360 Advanced หากมีบัญชี Ad Manager โปรดติดต่อผู้จัดการฝ่ายดูแลลูกค้าเพื่อขอรายละเอียดเพิ่มเติม ดูข้อมูลเกี่ยวกับการลงชื่อสมัครใช้ Ad Manager ได้ที่ศูนย์ช่วยเหลือของ Ad Manager
• แอป HbbTV ที่โต้ตอบกับออบเจ็กต์การออกอากาศสำหรับการเล่นสื่อ ดูรายละเอียดเพิ่มเติมได้ที่ออบเจ็กต์ AV ของ HbbTV Broadcast
• เวอร์ชัน dash.js ที่รองรับการโหลดล่วงหน้า เราขอแนะนำให้ใช้เวอร์ชัน 4.6.0 ขึ้นไป
• เว็บเซิร์ฟเวอร์สำหรับโฮสต์แอปพลิเคชัน
• สภาพแวดล้อมการทดสอบที่มีสตรีมการออกอากาศ DVB ดูวิธีการโดยละเอียดเกี่ยวกับการตั้งค่าสภาพแวดล้อมการทดสอบได้ที่การเรียกใช้แอปพลิเคชัน HbbTV
  • สตรีมการออกอากาศ: เตรียมสตรีมการออกอากาศที่มีข้อมูลตารางข้อมูลแอปพลิเคชัน (AIT) ที่กําหนดเอง นอกจากนี้ คุณต้องมีวิธีส่งสตรีมการออกอากาศเพื่อให้ทีวีรับสัญญาณได้ คุณสามารถใช้ตัวแปลงสัญญาณ DVB เพื่อส่งสตรีมการออกอากาศหรือใช้วิธีอื่นๆ
  • เว็บเซิร์ฟเวอร์: โฮสต์แอปพลิเคชัน HbbTV บนเว็บเซิร์ฟเวอร์ที่ทีวีเข้าถึงได้
• กิจกรรมสตรีมแบบสดที่มีประเภทเป็นไฟล์ Manifest ที่แสดงพ็อด หากต้องการสร้างกิจกรรม ให้ดูหัวข้อตั้งค่าสตรีมแบบสดสำหรับ DAI

สร้างสตรีมการออกอากาศที่เข้ากันได้

แอป HbbTV ใช้ broadcastContainer.addStreamEventListener() เพื่อฟังเหตุการณ์สตรีม HbbTV ในสตรีมการออกอากาศ หากต้องการโหลดและเล่นโฆษณาอย่างถูกต้อง คุณจะต้องตั้งค่าสตรีมการออกอากาศด้วยประเภทเหตุการณ์ต่อไปนี้เพื่อรวมเพย์โหลดสตริง JSON ที่เชื่อมโยง

• AD_BREAK_EVENT_ANNOUNCE - {"type":"adBreakAnnounce", "pod_id":1,"duration":90, "offset":10}
• AD_BREAK_EVENT_START - {"type":"adBreakStart"}
• AD_BREAK_EVENT_END - {"type":"adBreakEnd"}

สําหรับเหตุการณ์เหล่านี้ ให้ใส่เพย์โหลดสตริง JSON ที่มี streamEvent.type เหตุการณ์ AD_BREAK_EVENT_ANNOUNCE ต้องรวม streamEvent.duration และ streamEvent.offset เพื่อรองรับการโหลดโฆษณาล่วงหน้า ดูข้อมูลเพิ่มเติมได้ที่ฟังเหตุการณ์สตรีม HbbTV หากต้องการตั้งค่าสตรีมการออกอากาศ โปรดดูตัวอย่างสตรีมการขนส่ง MPEG แบบมัลติเพล็กซ์ หากต้องการใช้สตรีมตัวอย่าง คุณต้องอัปเดต URL ของตารางข้อมูลแอปพลิเคชันสำหรับการตั้งค่าสตรีมของคุณเอง

สร้างพ็อดที่แสดงเหตุการณ์สตรีมแบบสด

หากต้องการแสดงโฆษณาในแอป HbbTV คุณต้องมีเหตุการณ์สตรีมแบบสดที่แสดงพ็อด ดูข้อมูลเกี่ยวกับการตั้งค่าเหตุการณ์ได้ที่หัวข้อตั้งค่าสตรีมมิงแบบสดสำหรับ DAI แอปต้องมีตัวแปรต่อไปนี้จึงจะเข้าถึงสตรีมที่คุณตั้งค่าไว้ได้

• NETWORK_CODE: รหัสเครือข่าย Ad Manager สําหรับขอโฆษณา
• CUSTOM_ASSET_KEY: คีย์เนื้อหาที่กำหนดเองของ Ad Manager ที่สร้างขึ้นในระหว่างขั้นตอนการตั้งค่าสตรีมแบบสดสำหรับ DAI

สร้างโครงสร้างไฟล์แอปพลิเคชัน

คู่มือนี้ใช้โครงสร้างไฟล์ที่คล้ายกับแอปตัวอย่าง HbbTV ของ IMA หากต้องการทําตามคู่มือนี้ โปรดสร้างไฟล์ต่อไปนี้

• index.html: ดัชนี HTML สําหรับแอป
• Style.css: การจัดรูปแบบ CSS สําหรับแอป
• application.js: จุดแรกเข้า JS หลัก จัดการสถานะการเล่นและช่วงพักโฆษณา
• video_player.js: จัดการโปรแกรมเล่น dash.js ที่ใช้เล่นโฆษณา
• ads_manager.js: จัดการการตั้งค่า IMA, คำขอสตรีม และการจัดการเหตุการณ์

ads_manager.js ตั้งค่า IMA DAI SDK คอมโพเนนต์ต่อไปนี้ใช้ IMA DAI SDK

• PodStreamRequest: ออบเจ็กต์ที่กําหนดคําขอสตรีมไปยังเซิร์ฟเวอร์โฆษณาของ Google
• StreamManager: ออบเจ็กต์ที่จัดการสตรีมการแทรกโฆษณาแบบไดนามิกและการโต้ตอบกับแบ็กเอนด์ DAI นอกจากนี้ เครื่องมือจัดการสตรีมยังจัดการการติดตามคําสั่ง ping และส่งต่อเหตุการณ์สตรีมและโฆษณาไปยังผู้เผยแพร่โฆษณาด้วย

ดูวิธีการโดยละเอียดในการตั้งค่าสภาพแวดล้อมการทดสอบได้ที่คู่มือการเรียกใช้แอปพลิเคชัน HbbTV

โหลด IMA DAI SDK และ DASH.js

หากต้องการเริ่มเล่นสตรีมโฆษณาแบบออกอากาศ ให้โหลด IMA DAI SDK และ dash.js ลงในแอป เพิ่ม dash.js และเฟรมเวิร์ก IMA โดยใช้แท็กสคริปต์ใน index.html ก่อนแท็ก application.js

<script src="https://cdn.jsdelivr.net/npm/dashjs@latest/dist/dash.all.min.js"></script>
<script src="//imasdk.googleapis.com/js/sdkloader/ima3_dai.js"></script>
index.html

ถัดไป ให้สร้างคลาส Wrapper ของวิดีโอเพลเยอร์เพื่อเริ่มต้นและควบคุม Dash.js player