ช่วงพักโฆษณา

ภาพรวม

SDK ตัวรับเว็บมีการรองรับในตัวสำหรับช่วงพักโฆษณาและโฆษณาที่แสดงร่วม ภายในสตรีมสื่อหนึ่งๆ ได้ มี API สำหรับตั้งตำแหน่งโฆษณา แหล่งที่มาของโฆษณา และลักษณะการทำงานของช่วงพักโฆษณา รวมถึงคลิปช่วงพักโฆษณาที่เกี่ยวข้อง ในคู่มือนี้ Break หมายถึงช่วงเวลาการเล่นที่มีโฆษณาหรือบัมเปอร์อย่างน้อย 1 รายการและ โฆษณาหรือบัมเปอร์แต่ละรายการเรียกว่า BreakClip ช่วงพักเหล่านี้จะเชื่อมโยงกับสื่อที่กำลังโหลดหรือเล่น

ประเภทโฆษณา

Web Receiver SDK รองรับการแทรกโฆษณาฝั่งไคลเอ็นต์ (CSAI) และเซิร์ฟเวอร์ การแทรกโฆษณาที่เย็บต่อกัน (SSAI) โฆษณาที่เย็บด้วยลูกค้าสามารถตั้งค่าด้วยตนเองโดย แอปพลิเคชันหรือที่ดึงมาจากไฟล์เทมเพลต VAST และ VMAP ควรระบุโฆษณาที่ต่อด้วยเซิร์ฟเวอร์ด้วยตนเองก่อนที่จะโหลดเนื้อหาเป็น โฆษณาแบบฝังหรือแบบไดนามิกในระหว่างการเล่นเนื้อหาเป็นขยายแบบฝัง การใช้งานโฆษณาแต่ละประเภทมีดังนี้

เย็บด้วยชิ้นงานด้วยตนเอง

ช่วงพักโฆษณาที่เย็บแบบลูกค้าด้วยตนเองคือช่วงพักโฆษณาประเภทหนึ่งที่นำมาต่อ ร่วมกันโดยแอปพลิเคชัน และระบุด้วยตนเองโดยแอปพลิเคชันโดยใช้ SDK API โฆษณาประเภทนี้ไม่ได้ฝังอยู่ในสตรีมของเนื้อหาหลัก BreakClip ต้องระบุ contentId ซึ่งเป็น URL ที่นำไปยังเนื้อหาโฆษณา contentType ที่อธิบายรูปแบบของเนื้อหาโฆษณา และ title

Break ต้องมี isEmbedded และ expanded ตั้งเป็นค่าเริ่มต้น false position สามารถตั้งค่าเป็นช่วงพักโฆษณาโฆษณาตอนต้น โฆษณาตอนกลาง หรือตอนท้าย (ดูข้อมูลเพิ่มเติมได้ใน ตัวแบ่งตำแหน่ง) เมื่อเตรียมฟังก์ชัน โฆษณาสำหรับการเล่น Web Receiver SDK จะสร้างอินสแตนซ์ของโปรแกรมเล่นอื่นเพื่อโหลด แล้วเล่นเนื้อหาโฆษณา ช่วงพักเหล่านี้ต้องมี stitched timeline และจะต้อง เพิ่มแบบคงที่ (ดูข้อมูลเพิ่มเติมใน การแทรกโฆษณา) ตัวอย่างด้านล่างจะแสดงข้อมูล การใช้โฆษณาที่เย็บด้วยลูกค้าด้วยตนเอง

// Create the BreakClip.
let clipClient = new cast.framework.messages.BreakClip('bc_client');
clipClient.title = 'The Ad Title to be displayed during playback';
clipClient.contentId = 'https://example.com/ad.m3u8';
clipClient.contentType = 'application/vnd.apple.mpegurl';

// Optional: Used when HLS ad container formats differ from the main content's.
clipClient.hlsSegmentFormat = cast.framework.messages.HlsSegmentFormat.FMP4;

// Create the Break using the BreakClip id above.
let breakPostrollClient = new cast.framework.messages.Break(
    'break_postroll_client', ['bc_client'], -1);
breakPostrollClient.isEmbedded = false; // Optional: default is false.
breakPostrollClient.expanded = false; // Optional: default is false.

VAST

Web Receiver SDK รองรับการเพิ่ม VAST มาตรฐาน IAB (การแสดงโฆษณาวิดีโอ) เทมเพลต) หากระบุไว้ เทมเพลต XML จะถูกแยกวิเคราะห์เพื่อสร้าง คลิปช่วงพักโฆษณาที่ต่อด้วยไคลเอ็นต์ที่ตามมาเมื่อเข้าสู่ช่วงพัก

ในการสร้างโฆษณา VAST แอปตัวรับจะต้องสร้าง VastAdsRequest และระบุไว้ใน BreakClip vastAdsRequest ออบเจ็กต์ VastAdsRequest ต้องมี adsResponse ( แทนสตริงของเทมเพลต XML) หรือ adTagUrl (URL ตำแหน่งที่โฮสต์เทมเพลต XML) หากระบุ URL แล้ว SDK จะจัดการการดึงข้อมูลเทมเพลต การสรุป Break มีดังนี้ กฎเกณฑ์สำหรับโฆษณาที่เย็บด้วยลูกค้า สามารถเพิ่มโฆษณาเหล่านี้พร้อมกับอื่นๆ ได้ โฆษณาที่เย็บด้วยลูกค้าด้วยตัวเองในช่วงพักเดียวกันหรือในช่วงพักที่แยกกันสำหรับ เนื้อหาชิ้นเดียวกัน ตัวอย่างด้านล่างแสดงการใช้งาน VAST เบื้องต้น โฆษณา:

// Create the VastAdsRequest.
let vastTemplate = new cast.framework.messages.VastAdsRequest();
vastTemplate.adTagUrl = 'https://example.com/ads.xml'

// Create the BreakClip.
let clipVast = new cast.framework.messages.BreakClip('bc_vast');
clipVast.vastAdsRequest = vastTemplate;

// Create the Break using the BreakClip id above.
let breakPostrollVast = new cast.framework.messages.Break(
    'break_postroll_vast', ['bc_vast'], -1);
breakPostrollVast.isEmbedded = false; // Optional: default is false.
breakPostrollVast.expanded = false; // Optional: default is false.

เมื่อป้อน Break ที่มี VAST BreakClip เว็บรีซีฟเวอร์ SDK จะดึงข้อมูลแล้วแยกวิเคราะห์เทมเพลตหรือไม่ก็ได้ ขณะแยกวิเคราะห์ SDK จะสร้าง BreakClip ใหม่และเติมค่าด้วยค่าที่ดึงมาจาก เทมเพลต เช่น contentId, contentType, title, duration whenSkippable และ clickThroughUrl id สำหรับคลิปพักที่สร้างขึ้นคือ ตั้งค่าเป็น GENERATED:N โดยที่ N คือจำนวนเต็มที่เพิ่มขึ้น 1 สำหรับค่าใหม่แต่ละรายการ สร้างคลิปช่วงพักโฆษณาของ VAST ตั้งแต่วันที่ 0 จากนั้นโฆษณาที่สร้างขึ้นจะถูกเพิ่มลงใน อาร์เรย์ BreakClip id ของคลิปช่วงพัก VAST แต่ละรายการใน Break ปัจจุบันคือ แล้วแทนที่ด้วย id ของคลิปช่วงพักโฆษณาที่สร้างขึ้นที่เกี่ยวข้อง ตัวอย่าง ด้านล่างแสดงการเปลี่ยนแปลงใน MEDIA_STATUS ข้อความที่เกี่ยวข้องกับโฆษณาก่อนและหลังเข้าสู่ช่วงพักดังกล่าว

Break และ BreakClip ข้อมูลก่อนเข้าสู่ช่วงพักด้วยโฆษณา VAST

"breaks": [
  {
    "id": "break_postroll_vast",
    "breakClipIds": [
      "bc_vast"
    ],
    "position": 0,
    "isWatched": false
  }
],
"breakClips": [
  {
    "id": "bc_vast"
  }
]

Break และ BreakClip ข้อมูลหลังจากเข้าสู่ช่วงพักที่มีโฆษณา VAST

"breaks": [
  {
    "id": "break_postroll_vast",
    "breakClipIds": [
      "GENERATED:0"
    ],
    "position": 0,
    "isWatched": true
  }
],
"breakClips": [
  {
    "id": "bc_vast"
  },
  {
    "id": "GENERATED:0",
    "contentId": "https://example.com/break-clip-1.mpd",
    "contentType": "application/dash+xml",
    "title": "Ad Title Extracted from Template",
    "duration": 10,
    "whenSkippable": 5,
    "clickThroughUrl": "https://example.com/ad-target"
  }
]

VMAP

SDK ตัวรับเว็บรองรับ VMAP ของ IAB (เพลย์ลิสต์โฆษณาหลายรายการสำหรับวิดีโอ) มาตรฐาน เมื่อมีการระบุ VMAP แล้ว SDK ของตัวรับเว็บจะแยกวิเคราะห์ VMAP ตอบกลับและสร้างออบเจ็กต์ Break ที่ต่อเชื่อมกับไคลเอ็นต์สำหรับ <AdBreak> ทั้งหมด รายการในคำตอบ นอกจากนี้ ยังสร้าง BreakClips ที่เหมาะสมด้วย ออบเจ็กต์ vastAdsRequest สำหรับรายการ <AdSource> แต่ละรายการที่ให้ไว้ใน VMAP ถึง เปิดใช้ VMAP เพื่อแทรกโฆษณาลงในเนื้อหา แอปพลิเคชันต้องสร้าง VastAdsRequest และกำหนดให้กับ vmapAdsRequest ของ MediaInformation ในช่วง LoadRequestData โฆษณาเหล่านี้จะต้องแทรกแบบคงที่ (ดูข้อมูลเพิ่มเติมใน การแทรกโฆษณา) ด้วย ด้านล่างคือตัวอย่างข้อมูลที่อธิบาย การสร้างคำขอ VMAP

// Create the VastAdsRequest.
let vastTemplate = new cast.framework.messages.VastAdsRequest();
vastTemplate.adTagUrl = 'https://example.com/vmap.xml'

// Add it to the MediaInformation of the LoadRequest.
loadRequestData.media.vmapAdsRequest = vastTemplate;

ฝังแล้ว

ช่วงพักโฆษณาที่ฝังคือช่วงพักโฆษณาประเภทหนึ่งที่นำมาต่อฝั่งเซิร์ฟเวอร์ ในสตรีมเนื้อหาหลัก ระยะเวลาของ Break จะถูกลบ จากระยะเวลาของเนื้อหาหลักเมื่อคำนวณเวลาสื่อ

BreakClip ต้องมีแอตทริบิวต์ duration ของเนื้อหาโฆษณา และ title Break ต้องมี isEmbedded ตั้งค่าเป็น true และ expanded ตั้งค่าเป็น false position สามารถตั้งค่าเป็นช่วงพักโฆษณาแบบโฆษณาตอนต้นหรือโฆษณาตอนกลาง ช่วงพักโฆษณาตอนท้าย รองรับด้วยค่า position ที่แน่นอนที่เป็นบวก ดูข้อมูลเพิ่มเติมเกี่ยวกับเรื่องนี้ได้ใน ตัวแบ่งตำแหน่ง เมื่อโฆษณาถูกเรียกไปยัง แล้ว SDK ของตัวรับเว็บจะเล่นสตรีมต่อไปเป็นกลุ่มโฆษณา ฝังอยู่ในนั้น โฆษณาประเภทนี้ไม่มีกลไกการโหลดเพิ่มเติม ข้อมูลเมตาของโฆษณาที่เกี่ยวข้องจะแสดงต่อผู้ใช้เมื่อส่วนหัวของตัวควบคุมการเล่นอยู่ภายใน ช่วงเวลาพัก ช่วงพักเหล่านี้ต้องมี embedded timeline และต้องเพิ่ม แบบคงที่ (ดูข้อมูลเพิ่มเติมในส่วนการแทรกโฆษณา) ตัวอย่างด้านล่างแสดงการใช้งานพื้นฐานของโฆษณา embedded

// Create the BreakClip.
let clipEmbedded = new cast.framework.messages.BreakClip('bc_embedded');
clipEmbedded.title = 'The Ad Title to be displayed during playback';
clipEmbedded.duration = 15;

// Create the Break using the BreakClip id above.
let breakPrerollEmbedded = new cast.framework.messages.Break(
    'break_preroll_embedded', ['bc_embedded'], 0);
breakPrerollEmbedded.isEmbedded = true;
breakPrerollEmbedded.expanded = false; // Optional: default is false.

ขยายแบบฝัง

ช่วงพักโฆษณาแบบขยายที่ฝังคือช่วงพักโฆษณาประเภทหนึ่งที่เซิร์ฟเวอร์ต่อเข้าด้วยกัน ไปยังสตรีมเนื้อหาหลัก ระยะเวลาของBreakรวม ในช่วงเนื้อหาหลักเมื่อคำนวณเวลาสื่อ

BreakClip ต้องมีแอตทริบิวต์ duration ของเนื้อหาโฆษณา และ title Break ต้องมี isEmbedded ตั้งค่าเป็น true และ expanded ตั้งค่าเป็น true position สามารถตั้งค่าเป็นช่วงพักโฆษณาแบบโฆษณาตอนต้นหรือโฆษณาตอนกลาง ช่วงพักโฆษณาตอนท้าย รองรับโดยมีค่า position เป็นบวก ดูข้อมูลเพิ่มเติมเกี่ยวกับเรื่องนี้ได้ใน ตัวแบ่งตำแหน่ง เมื่อโฆษณาถูกเรียกไปยัง แล้ว SDK ของตัวรับเว็บจะเล่นสตรีมต่อไปเป็นกลุ่มโฆษณา ฝังอยู่ในนั้น โฆษณาประเภทนี้ไม่มีกลไกการโหลดเพิ่มเติม ข้อมูลเมตาของโฆษณาที่เกี่ยวข้องจะแสดงต่อผู้ใช้เมื่อส่วนหัวของตัวควบคุมการเล่นอยู่ภายใน ช่วงเวลาพัก ช่วงพักเหล่านี้ต้องมี embedded timeline และเพิ่มได้ แบบคงที่หรือแบบไดนามิก (ดูข้อมูลเพิ่มเติมใน การแทรกโฆษณา) ตัวอย่างด้านล่างจะแสดงข้อมูล การติดตั้งโฆษณา embedded expanded

// Create the BreakClip.
let clipEmbeddedExpanded =
    new cast.framework.messages.BreakClip('bc_embedded_expanded');
clipEmbeddedExpanded.title = 'The Ad Title to be displayed during playback';
clipEmbeddedExpanded.duration = 15;

// Create the Break using the BreakClip id above.
let breakPrerollEmbeddedExpanded = new cast.framework.messages.Break(
    'break_preroll_embedded_expanded', ['bc_embedded_expanded'], 0);
breakPrerollEmbeddedExpanded.isEmbedded = true;
breakPrerollEmbeddedExpanded.expanded = true;

ประเภทไทม์ไลน์ของโปรแกรมเล่น

เมื่อสร้างอินสแตนซ์โปรแกรมเล่นเว็บ SDK ของตัวรับสัญญาณจะเลือกประเภทไทม์ไลน์เพื่อ รองรับการเล่นโฆษณาระหว่างการเล่นเนื้อหา แต่ละไทม์ไลน์จะเปิดใช้โฆษณาบางรายการ ประเภทช่วงพักโฆษณาที่จะเพิ่ม ประเภทของไทม์ไลน์จะกำหนดตาม ประเภทโฆษณาปรากฏขึ้นระหว่างเวลาที่ใช้ในการโหลดใน MediaInformation ของ LoadRequestData หากมีช่วงพักโฆษณาที่ฝังอยู่ ระบบจะเลือกไทม์ไลน์ embedded ถ้า มีช่วงพักโฆษณาที่เย็บด้วยไคลเอ็นต์ โดยจะมีการเลือกไทม์ไลน์ stitched ไว้ ในกรณีที่ไม่มีโฆษณาอยู่ SDK จะใช้ embedded เป็นค่าเริ่มต้น ในไทม์ไลน์ เมื่อเลือกเส้นควบคุมเวลาแล้ว คุณจะไม่สามารถเปลี่ยนสำหรับเส้นควบคุมเวลาปัจจุบันได้ รายการสื่อ ตารางด้านล่างแสดงคำอธิบายโดยละเอียดของลำดับเวลาแต่ละแบบ

ประเภทไทม์ไลน์ คำอธิบาย
ไทม์ไลน์ที่ฝัง การนำเสนอเวลาของสื่อที่รองรับโฆษณา ซึ่งจะฝังอยู่ในเนื้อหาหลัก (ช่วงพักโฆษณาแบบฝังและแบบขยายที่ฝัง) เมื่อมีช่วงพักโฆษณาที่ไม่ได้ขยาย ระยะเวลา จะหักออกจากระยะเวลารวมของ เนื้อหา ในทางกลับกัน เมื่อโฆษณาแบบขยาย มีช่วงพัก เวลานั้นถือว่าเป็นเวลา ของเนื้อหาหลักบางส่วน
รอยต่อของไทม์ไลน์ การนำเสนอเวลาของสื่อที่รองรับโฆษณา ที่มาจากไฟล์สื่อภายนอก (เย็บด้วยไคลเอนต์ด้วยตนเอง, VAST และ VMAP ช่วงพักโฆษณา) เมื่อเพิ่มแล้ว ระยะเวลาของช่วงพักโฆษณาคือ ไม่ได้เป็นส่วนหนึ่งของระยะเวลาของเนื้อหาหลัก

รูปที่ 1 ถึง 3 ด้านล่างแสดงเนื้อหาบางส่วนที่มีโฆษณาหลายประเภท ตามลำดับเวลาที่เกี่ยวข้อง เนื้อหาได้รับการกำหนดค่าด้วยช่วงพักโฆษณาตอนต้น ซึ่งมีคลิปช่วงพัก 2 รายการ ได้แก่ ช่วงพักโฆษณาตอนกลางและโฆษณาตอนท้ายที่มี หนึ่งเดียวก็พอ เวลาที่ตั้งไว้ตั้งแต่เริ่มเล่นเนื้อหา เวลาสื่อของเนื้อหาหลัก และเวลาของช่วงพักในตอนนี้ กำลังเล่นคลิปตัวแบ่งใต้ภาพแต่ละภาพ

วันที่ ไทม์ไลน์ของโฆษณาที่เย็บโดยลูกค้า
รูปที่ 1: ลำดับเวลาแสดงเนื้อหาบางส่วนและช่วงพักโฆษณาที่เย็บด้วยลูกค้า 3 ช่วง


วันที่ ไทม์ไลน์ของโฆษณาแบบฝังที่เชื่อมจากเซิร์ฟเวอร์
รูปที่ 2: ลำดับเวลาแสดงเนื้อหาบางส่วนและช่วงพักโฆษณาแบบฝังแบบเซิร์ฟเวอร์ต่อ 3 ช่วง


วันที่ ไทม์ไลน์ของโฆษณาแบบขยายแบบฝังที่เชื่อมโดยเซิร์ฟเวอร์
รูปที่ 3: ลำดับเวลาแสดงเนื้อหาบางส่วนและช่วงพักโฆษณาที่ฝังอยู่บนเซิร์ฟเวอร์ซึ่งขยายอยู่ 3 รายการ

หยุดพัก

SDK ของตัวรับเว็บช่วยให้นักพัฒนาแอประบุตําแหน่งของช่วงพักโฆษณาได้ โดยการตั้งค่า position ของ Break ค่านี้สอดคล้องกับเวลาสื่อของเนื้อหาหลัก และใช้เพื่อสร้างช่วงพักโฆษณา pre-roll, mid-roll และ post-roll ได้ ซึ่งมีการกำหนดไว้ดังนี้

แบ่งตำแหน่ง คำอธิบาย
โฆษณาตอนต้น ช่วงพักโฆษณาที่เล่นก่อนเนื้อหาหลัก นี่คือ แสดงโดยการตั้งค่า breakPosition เป็น 0
โฆษณาตอนกลาง ช่วงพักโฆษณาที่เล่นระหว่างเนื้อหา ซึ่งมีสัญลักษณ์เป็น การตั้งค่า breakPosition ให้เป็นช่วงเวลาที่ช่วงพัก มากกว่าจุดเริ่มต้นของเนื้อหาหลัก และ เวลาสิ้นสุดของช่วงพักน้อยกว่าตอนจบของเนื้อหาหลัก
โฆษณาตอนท้าย ช่วงพักโฆษณาที่เล่นหลังจากเนื้อหาหลัก นี่คือ แสดงโดยการตั้งค่า breakPosition เป็น -1 สำหรับ ไทม์ไลน์ที่เย็บเข้าด้วยกัน สำหรับแบบฝัง ไทม์ไลน์ breakPosition ควรตั้งค่าระยะเวลาของเนื้อหาหลักลบด้วย ระยะเวลาพัก ไม่รองรับเนื้อหาสด

เมทริกซ์ความสามารถในการทำงานร่วมกัน

เพื่อเป็นจุดอ้างอิงอย่างรวดเร็ว ตาราง 1 จะแสดงภาพรวมของประเภทโฆษณาและ ความเข้ากันได้กับฟีเจอร์ที่เกี่ยวข้องกับโฆษณา

ตาราง 1: เมทริกซ์ความสามารถในการทำงานร่วมกันของโฆษณา
การรองรับฟีเจอร์ โฆษณาที่ลูกค้าเย็บด้วยตนเอง VAST VMAP โฆษณาที่ฝัง โฆษณาแบบขยายที่ฝัง
ใช้ได้กับ VAST เย็บด้วยชิ้นงานด้วยตนเอง ไม่มี ขยายแบบฝัง ฝังแล้ว
ไทม์ไลน์ แบบเย็บตะเข็บ แบบเย็บตะเข็บ แบบเย็บตะเข็บ ฝังแล้ว ฝังแล้ว
การแทรกโฆษณา คงที่ คงที่ คงที่ คงที่ คงที่, ไดนามิก
การนำโฆษณาออก
โฆษณาตอนต้น
โฆษณาตอนกลาง
โฆษณาตอนท้าย
การข้ามโฆษณา
ตัวแบ่งการกรอวิดีโอ
ตัวตัดการโหลดคลิป

กิจกรรม

เมื่อเกิดเหตุการณ์ช่วงพักคีย์ แคสต์ SDK จะส่งเหตุการณ์ประเภท BreaksEvent แอปตัวรับสัญญาณสามารถสมัครรับข้อมูลได้โดยใช้ PlayerManager addEventListener API

คุณใช้เหตุการณ์เหล่านี้สำหรับข้อมูลวิเคราะห์และการติดตามการเล่นโฆษณาได้ เมื่อ VMAP (เพลย์ลิสต์โฆษณาหลายรายการสำหรับวิดีโอ) และโฆษณา VAST (เทมเพลตการแสดงโฆษณาวิดีโอ) เหตุการณ์การติดตามมาตรฐานที่ระบุไว้ในคำตอบจะ ส่งโดย SDK

ประเภทเหตุการณ์แสดงอยู่ในตาราง 2 พร้อมด้วยคำอธิบายโดยละเอียดเกี่ยวกับ เมื่อมีการเริ่มทำงาน

วันที่ วงจรเหตุการณ์ช่วงพัก
รูปที่ 4: วงจรเหตุการณ์ช่วงพัก
ตารางที่ 2: เหตุการณ์ช่วงพักโฆษณาและคำอธิบาย
เหตุการณ์ช่วงพัก คำอธิบาย
BREAK_STARTED เริ่มทำงานเมื่อเวลาสื่อปัจจุบันของเนื้อหาหลักเท่ากับ position ของช่วงพักที่ไม่ได้ดู
BREAK_CLIP_LOADING เริ่มทำงานเมื่อคลิปช่วงพักของไทม์ไลน์ที่ต่อกันเริ่มโหลดเท่านั้น
BREAK_CLIP_STARTED เริ่มทำงานเมื่อคลิปพักเริ่มเล่น
BREAK_CLIP_ENDED เริ่มทำงานเมื่อคลิปพักสิ้นสุดลง วันที่ endedReason จะปรากฏขึ้นสำหรับกรณีต่อไปนี้
  • คลิปการแบ่งไทม์ไลน์ที่เย็บเข้าด้วยกันเล่นจนจบ
  • คลิปช่วงพักที่ต่อกันของไทม์ไลน์เปลี่ยนไปเป็นคลิปช่วงพักอื่น
  • ระบบจะข้ามคลิปช่วงพัก
  • คลิปช่วงพักล่าสุดที่เล่นจนจบในช่วงพักแบบฝังตอนท้าย
  • เกิดข้อผิดพลาด
BREAK_ENDED เริ่มทำงานเมื่อคลิปช่วงพักล่าสุดในช่วงพักสิ้นสุด

การแทรกโฆษณา

Cast SDK ช่วยให้แอปพลิเคชันแทรกและนำโฆษณาออกในช่วงเวลาต่างๆ ได้ ของเซสชันการแคสต์ การแทรกโฆษณา 2 ประเภทคือแบบคงที่และไดนามิก การแทรกโฆษณาแบบคงที่กำหนดให้ต้องระบุโฆษณาในฟิลด์ LoadRequestData ก่อนการสร้างผู้เล่น การแทรกโฆษณาแบบไดนามิกใช้ประโยชน์จาก BreakManager addBreak API สำหรับแทรกช่วงพักในเนื้อหาที่โหลดแล้ว การแทรกแต่ละประเภท ใช้ได้กับโฆษณาบางประเภท ความเข้ากันได้ ภาพรวมมีอยู่ในเมทริกซ์ความสามารถในการทำงานร่วมกัน

การแทรกโฆษณาแบบคงที่

การแทรกโฆษณาแบบคงที่มีลักษณะเด่นคือการเพิ่มข้อมูลเมตาโฆษณาที่เกี่ยวข้องก่อน ไปจนถึงการสร้างผู้เล่น ข้อมูลนี้มีอยู่ใน MediaInformation ของ LoadRequestData เช่น สามารถตั้งค่าในบัญชีของผู้ส่งที่เชื่อมต่อ คำขอโหลดต้นฉบับหรือสามารถแทรกโดยแอปพลิเคชันตัวรับเว็บโดย สกัดกั้นคำขอ LOAD เมื่อคืนเงิน LoadRequestData ไปยัง SDK ตัวรับเว็บสำหรับการประมวลผล ระบบจะสร้างโปรแกรมเล่นขึ้น ดูเพิ่มเติมใน กำลังโหลดสื่อ ตัวอย่าง ด้านล่างคือโฆษณาที่เย็บด้วยลูกค้าด้วยตนเองที่เพิ่มเข้ามาในคำขอ LOAD Interceptor

const context = cast.framework.CastReceiverContext.getInstance();
const playerManager = context.getPlayerManager();

playerManager.setMessageInterceptor(
    cast.framework.messages.MessageType.LOAD, loadRequestData => {

  // Create the BreakClip.
  let clipClient = new cast.framework.messages.BreakClip('bc_client');
  clipClient.title = 'The Ad Title to be displayed during playback';
  clipClient.contentId = 'https://example.com/ad.mp4';
  clipClient.contentType = 'video/mp4';

  // Create the Break using the BreakClip id above.
  let breakPostrollClient = new cast.framework.messages.Break(
      'break_postroll_client', ['bc_client'], -1);

  // Set the ad information in the load request data.
  let media = loadRequestData.media;
  media.breakClips = [clipClient];
  media.breaks = [breakPostrollClient];

  return loadRequestData;
});

การแทรกโฆษณาแบบไดนามิก

การแทรกโฆษณาแบบไดนามิกมีลักษณะพิเศษคือการตั้งค่าช่วงพักโฆษณาระหว่างที่ใช้เนื้อหา การเล่น ซึ่งทำได้โดยการรับอินสแตนซ์ของ BreakManager และการเรียกใช้ เวลา addBreak API ซึ่งต้องใช้พารามิเตอร์ 2 ตัวเป็นอย่างน้อย ได้แก่ ขยายแบบฝัง Break และ อาร์เรย์ของ BreakClip พร็อพเพอร์ตี้ที่ 3 (ไม่บังคับ) จะรวมอยู่ด้วยเพื่อบังคับให้ส่งการเปลี่ยนแปลงไปยัง ผู้ส่งที่เชื่อมต่อผ่านการประกาศ MediaStatus เมื่อตั้งค่าเป็น true วันและเวลา การเพิ่มช่วงพักและการตัดคลิป รหัสที่เกี่ยวข้องจะต้องไม่ซ้ำกัน โฆษณาเหล่านี้ สามารถเพิ่มได้เฉพาะเมื่อสร้างโปรแกรมเล่นแล้วเท่านั้น Web Receiver SDK เริ่มทํางาน เวลา PLAYER_LOADING เหตุการณ์เมื่อสร้างโปรแกรมเล่น ดูตัวอย่างด้านล่างซึ่งแสดงการใช้งานใน เครื่องจัดการเหตุการณ์ที่ตอบสนองต่อการเปลี่ยนแปลงในข้อมูลเมตา ID3 ของสตรีมและ สร้างวัตถุ Break และ BreakClip เพื่อแทรกในไทม์ไลน์

const context = cast.framework.CastReceiverContext.getInstance();
const playerManager = context.getPlayerManager();
const breakManager = playerManager.getBreakManager();

playerManager.addEventListener(cast.framework.events.EventType.ID3, (event) => {

  // Create the BreakClip.
  let clipEmbeddedExpanded = parseBreakClipFromData(event.segmentData);
  let breakEmbeddedExpanded = parseExpandedBreakFromData(event.segmentData);

  // Add the break and break clip.
  breakManager.addBreak(breakEmbeddedExpanded, [clipEmbeddedExpanded]);
});

การนำโฆษณาแบบไดนามิกออก

หากต้องการนำช่วงพักโฆษณาแบบไดนามิกออก แอปพลิเคชันควรเรียกใช้ removeBreakById ระหว่างการเล่น ฟังก์ชันนี้จะนำตัวระบุสตริงของช่วงพักโฆษณามาใช้ นำออกจากไทม์ไลน์แล้ว breakId ที่ระบุต้องชี้ไปยัง การฝัง ขยายช่วงพักโฆษณา หากตรวจพบช่วงพักโฆษณาประเภทอื่น ช่วงพักโฆษณานั้น จะยังคงอยู่ในไทม์ไลน์ ดูตัวอย่างด้านล่างซึ่งจะนำการพักออก

const context = cast.framework.CastReceiverContext.getInstance();
const playerManager = context.getPlayerManager();
const breakManager = playerManager.getBreakManager();

breakManager.removeBreakById('break_midroll_embedded_expanded');

ลักษณะการทำงานของช่วงพัก

SDK กำหนดลักษณะการทำงานเริ่มต้นเมื่อผู้เล่นเข้าสู่และออกจากช่วงพัก และมอบวิธีปรับแต่งเพิ่มเติม โดยใช้ API บางส่วนที่มีให้ ใน BreakManager

ลักษณะการทำงานของช่วงพักโฆษณาเริ่มต้น

เมื่อมีการป้อน Break ผ่านการเล่นตามปกติหรือโดยการค้นหา Break SDK จะประเมินว่าผู้ใช้เคยเห็นแล้วหรือยังโดยตรวจสอบ เวลา isWatched เมื่อสร้างแล้ว ค่าเริ่มต้นของช่วงพักโฆษณาสำหรับพร็อพเพอร์ตี้นี้คือ false ถ้า พร็อพเพอร์ตี้คือ true ระบบจะไม่เล่นช่วงพักเมื่อป้อนเข้ามาและเนื้อหาหลัก เนื้อหาจะเล่นต่อไป หากพร็อพเพอร์ตี้คือ false ช่วงพักโฆษณาจะ เล่นเมื่อป้อน

เมื่อมองหาช่วงพักที่ผ่านมา การใช้งานเริ่มต้นจะได้รับ Break ทั้งหมด รายการที่ position อยู่ระหว่างการดำเนินการค้นหา seekFrom และ seekTo จากรายชื่อการพักนี้ SDK จะเล่น Break ที่มี position มีค่า seekTo มากที่สุดและมีการตั้งค่าพร็อพเพอร์ตี้ isWatched เป็น false ระบบจะตั้งค่าพร็อพเพอร์ตี้ isWatched ของช่วงพักนั้นเป็น true และ โปรแกรมเล่นจะเริ่มเล่นคลิปช่วงพัก เมื่อดูช่วงพักแล้ว เนื้อหาหลักจะเล่นต่อจากตำแหน่ง seekTo หากไม่มี มีช่วงพัก จะไม่มีการเล่นช่วงพักและเนื้อหาหลักจะเล่นต่อ กำลังเล่นที่ตำแหน่ง seekTo

ระหว่างการเล่นช่วงพัก SDK จะประกาศการอัปเดตที่เกี่ยวข้องกับการเชื่อมต่ออินเทอร์เน็ต แอปพลิเคชันของผู้ส่งใน MediaStatus แอปพลิเคชันเหล่านี้จะใช้การออกอากาศเพื่ออัปเดต UI สำหรับโฆษณาโดยการอ่าน เวลา breakStatus คุณสมบัตินี้จะกำหนดในระหว่างการเล่นช่วงพักเท่านั้น

แอปพลิเคชันตัวรับยังค้นหาข้อมูลเกี่ยวกับฟิลด์ ตำแหน่งของส่วนหัวของตัวควบคุมการเล่นตามเวลาปัจจุบันของ BreakClip แสดงโดยการโทรไปที่ PlayerManager getBreakClipCurrentTimeSec ในทํานองเดียวกัน แอปพลิเคชันสามารถค้นหาระยะเวลาของ BreakClip ปัจจุบันได้โดย การโทร getBreakClipDurationSec

ลักษณะการทำงานของช่วงพักโฆษณาที่กำหนดเอง

ลักษณะการทำงานเริ่มต้น สำหรับช่วงพักและคลิปพักจะสามารถแก้ไขได้โดยใช้ setBreakClipLoadInterceptor และ setBreakSeekInterceptor ใน BreakManager

ตัวหยุดการค้นหาชั่วคราว

เครื่องมือดักจับการค้นหาช่วงพักช่วยให้แอปควบคุมพฤติกรรมการกรอวิดีโอได้ ในช่วงพักโฆษณา ฟังก์ชันจะทริกเกอร์เมื่อมีการขอการดำเนินการค้นหา ที่กรอไปข้างหน้าหรือกรอกลับในช่วงหยุดพักอย่างน้อย 1 ครั้ง เมื่อเรียกใช้ ฟิลด์ BreakSeekData จะส่งผ่านเป็นพารามิเตอร์ไปยังฟังก์ชัน Callback ออบเจ็กต์ BreakSeekData มีอาร์เรย์ของ Break ออบเจ็กต์ที่ตั้งค่าพร็อพเพอร์ตี้ position เป็นตัวเลขระหว่างค่าปัจจุบัน เวลาส่วนหัวของตัวควบคุมการเล่นกำหนดไว้เป็น seekFrom และเวลาปลายทางการกรอวิดีโอ seekTo

ตัวตัดขวางนี้จะอนุญาตให้ออบเจ็กต์ Break ในช่วงพักที่เกี่ยวข้องสามารถ แก้ไขแล้ว เมื่อติดตั้ง เครื่องมือดักจับการค้นหาช่วงพักโฆษณาต้องระบุโฆษณา ช่วงพักเพื่อเล่นโดยการส่งคืนออบเจ็กต์ BreakSeekData ที่มีการแก้ไข (ไม่บังคับ) โปรแกรมเล่นวิดีโอจะเล่นต่อช่วงพักทั้งหมดที่รวมอยู่ในค่าการส่งคืน หากค่า ของ null หรือไม่มีการส่งคืนตัวดักจับการค้นหาเบรก ช่วงพักคือ ข้ามไป

ดูตัวอย่างด้านล่างสำหรับการติดตั้งใช้งานอย่างง่ายของ Interceptor ซึ่ง แทนที่การทำงานเริ่มต้นเพื่อดูช่วงพักโฆษณาทั้งหมดที่มีการกรอด้วย ยกเว้นช่วงพักที่ดูแล้ว

const context = cast.framework.CastReceiverContext.getInstance();
const playerManager = context.getPlayerManager();
const breakManager = playerManager.getBreakManager();

breakManager.setBreakSeekInterceptor((breakSeekData) => {

  // Filter the breaks array by removing watched breaks.
  const unwatchedBreaks =
      breakSeekData.breaks.filter(adBreak => !adBreak.isWatched);
  breakSeekData.breaks = unwatchedBreaks;

  return breakSeekData;
});

ตัวหยุดการโหลดคลิป

เมื่อใช้ตัวตัดโหลดคลิปพัก คุณจะแก้ไขออบเจ็กต์ BreakClip ได้ ก่อนที่วิดีโอจะเริ่มเล่น

มีการเรียกใช้ตัวตัดโหลดคลิปพักเฉพาะสำหรับ ตัวแบ่งไทม์ไลน์ที่เย็บเข้าด้วยกัน และตั้งค่าได้โดยใช้ setBreakClipLoadInterceptor ก่อนป้อน Break ระบบจะเรียกใช้ตัวสกัดกั้นนี้ 1 ครั้งสำหรับ 1 คน BreakClip ที่กำหนดไว้ในช่วงพักนั้น SDK ส่งเวอร์ชัน BreakClip เป็นพารามิเตอร์ของฟังก์ชัน Callback จากนั้นแอปพลิเคชันจะแก้ไข BreakClip เครื่องนี้และส่งคืนเพื่อให้ SDK ดึงข้อมูลและแสดงช่วงพักได้ คลิปที่มีการกำหนดค่าที่อัปเดตแล้ว หาก null หรือไม่แสดงผลเลย ระบบจะพัก ข้ามคลิป

โปรดดูตัวอย่างด้านล่างซึ่งแก้ไข contentUrl ของคลิปช่วงพักด้วย เรียกใช้ฟังก์ชันยูทิลิตี getUrlFromClipId โดยที่ id ของ BreakClip จะแมปกับ URL หรือไม่

const context = cast.framework.CastReceiverContext.getInstance();
const playerManager = context.getPlayerManager();
const breakManager = playerManager.getBreakManager();

breakManager.setBreakClipLoadInterceptor(
    (breakClip, breakClipLoadInterceptorContext) => {

  // Obtains the URL of a break clip id from a function call.
  breakClip.contentUrl = getUrlFromClipId(breakClip.id);

  return breakClip;
});

การข้ามโฆษณา

Web Receiver SDK มี API สำหรับข้ามช่วงพักโฆษณาและคลิปช่วงพักโฆษณาแต่ละรายการ ภายในช่วงพักโฆษณา SDK ยังอนุญาตให้ผู้ใช้เลือกข้ามคลิปช่วงพักด้วย การโต้ตอบกับแอปพลิเคชันหรืออุปกรณ์ Smart Display ของผู้ส่ง

คลิปช่วงพักโฆษณาแบบข้ามได้ของผู้ใช้

การตั้งค่าคลิปช่วงพักเป็นแบบข้ามได้ช่วยให้ผู้ใช้โต้ตอบกับผู้ส่งที่เชื่อมต่อไว้ได้ และอุปกรณ์ Smart Display เพื่อเลือกที่จะข้ามส่วนที่เหลือของ กำลังเล่นคลิปพัก การตั้งค่า whenSkippable เป็นจำนวนวินาทีที่ไม่เป็นลบจะเปิดใช้ฟีเจอร์นี้สำหรับ BreakClip ออบเจ็กต์ โปรแกรมเล่นจะพิจารณาว่าคลิปหยุดพักเป็นแบบข้ามได้เมื่อ เล่นคลิปเบรกเป็นเวลาเป็นจำนวนวินาทีนั้นแล้ว การตั้งค่านี้เป็น 0 ทำให้ผู้ใช้สามารถข้ามช่วงพักได้ทันที

// Create the BreakClip.
let clip = new cast.framework.messages.BreakClip('bc');
clip.title = 'The Ad Title to be displayed during playback';
clip.whenSkippable = 10; // Users can skip the clip after 10 seconds of playback.

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

การข้ามโฆษณาแบบเป็นโปรแกรม

นอกจากนี้ ผู้ใช้ยังข้ามโฆษณาโดยอัตโนมัติได้อีกด้วย

หากต้องการข้ามช่วงพักทั้งหมดจากการเล่น แอปพลิเคชันควรตั้งค่า isWatched ของ Break เป็น true ซึ่งคุณสามารถทำได้ทุกเมื่อระหว่างการโหลด เล่นต่อเนื่องหรือเนื้อหา พร็อพเพอร์ตี้ isWatched ได้รับการประเมินโดย ผู้เล่นเมื่อตรงกับ position ของช่วงพักตามเวลาปัจจุบันของเนื้อหาหลัก ที่ จุดนั้น ผู้เล่นจะตัดสินใจว่าควรเข้าสู่ช่วงพักหรือไม่ ดูตัวอย่างด้านล่างซึ่งแสดงช่วงพักทั้งหมดและแก้ไข เมื่อโปรแกรมเล่นกำลังโหลด

const context = cast.framework.CastReceiverContext.getInstance();
const playerManager = context.getPlayerManager();
const breakManager = playerManager.getBreakManager();

playerManager.addEventListener(cast.framework.events.EventType.PLAYER_LOADING,
    (event) => {

  // Obtain the breaks and iterate through each item to skip all ad breaks.
  let breaks = breakManager.getBreaks();
  breaks.forEach((brk) => {
    brk.isWatched = true;
  });
});

หากต้องการข้ามคลิปช่วงพักที่เจาะจงแบบเป็นโปรแกรม พารามิเตอร์ ควรใช้ตัวตัดโหลดคลิปพัก โดย แสดงผล null หรือไม่แสดงผลค่าในฟังก์ชัน Callback, คลิปใน ระบบจะข้ามช่วงพักโฆษณานั้น

const context = cast.framework.CastReceiverContext.getInstance();
const playerManager = context.getPlayerManager();
const breakManager = playerManager.getBreakManager();

breakManager.setBreakClipLoadInterceptor(
      (breakClip, breakClipLoadInterceptorContext) => {
  return null;
});