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

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

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

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

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

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

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

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

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

  • 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 ก่อนแท็ก application.js โดยใช้แท็กสคริปต์ใน index.html

<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

ถัดไป
ตั้งค่าคลาสโปรแกรมเล่น