เริ่มต้นใช้งาน 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 ขั้นสูง หากมีบัญชี Ad Manager โปรดติดต่อผู้จัดการฝ่ายดูแลลูกค้าเพื่อขอรายละเอียดเพิ่มเติม ดูข้อมูลเกี่ยวกับการลงชื่อสมัครใช้ Ad Manager ได้ที่ ศูนย์ช่วยเหลือของ Ad Manager
  • แอป HbbTV ที่โต้ตอบกับออบเจ็กต์การออกอากาศเพื่อเล่นสื่อ ดูรายละเอียดเพิ่มเติมได้ที่ ออบเจ็กต์ AV การออกอากาศของ HbbTV
  • 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

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

คู่มือนี้ใช้โครงสร้างไฟล์ที่คล้ายกับ แอปตัวอย่าง 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 โดยใช้แท็กสคริปต์ใน index.html ก่อนแท็ก application.js

<script src="https://cdnjs.cloudflare.com/ajax/libs/crypto-js/4.2.0/crypto-js.min.js"></script>
<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>

จากนั้นสร้างคลาส Wrapper โปรแกรมเล่นวิดีโอเพื่อเริ่มต้นและควบคุมโปรแกรมเล่น dash.js

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