ภาพรวม
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 รายการ ได้แก่ ช่วงพักโฆษณาตอนกลางและโฆษณาตอนท้ายที่มี หนึ่งเดียวก็พอ เวลาที่ตั้งไว้ตั้งแต่เริ่มเล่นเนื้อหา เวลาสื่อของเนื้อหาหลัก และเวลาของช่วงพักในตอนนี้ กำลังเล่นคลิปตัวแบ่งใต้ภาพแต่ละภาพ
หยุดพัก
SDK ของตัวรับเว็บช่วยให้นักพัฒนาแอประบุตําแหน่งของช่วงพักโฆษณาได้
โดยการตั้งค่า
position
ของ Break
ค่านี้สอดคล้องกับเวลาสื่อของเนื้อหาหลัก
และใช้เพื่อสร้างช่วงพักโฆษณา pre-roll
, mid-roll
และ post-roll
ได้
ซึ่งมีการกำหนดไว้ดังนี้
แบ่งตำแหน่ง | คำอธิบาย |
---|---|
โฆษณาตอนต้น | ช่วงพักโฆษณาที่เล่นก่อนเนื้อหาหลัก นี่คือ
แสดงโดยการตั้งค่า breakPosition เป็น 0 |
โฆษณาตอนกลาง | ช่วงพักโฆษณาที่เล่นระหว่างเนื้อหา ซึ่งมีสัญลักษณ์เป็น
การตั้งค่า breakPosition ให้เป็นช่วงเวลาที่ช่วงพัก
มากกว่าจุดเริ่มต้นของเนื้อหาหลัก และ
เวลาสิ้นสุดของช่วงพักน้อยกว่าตอนจบของเนื้อหาหลัก
|
โฆษณาตอนท้าย | ช่วงพักโฆษณาที่เล่นหลังจากเนื้อหาหลัก นี่คือ
แสดงโดยการตั้งค่า breakPosition เป็น -1 สำหรับ
ไทม์ไลน์ที่เย็บเข้าด้วยกัน สำหรับแบบฝัง
ไทม์ไลน์ breakPosition
ควรตั้งค่าระยะเวลาของเนื้อหาหลักลบด้วย
ระยะเวลาพัก ไม่รองรับเนื้อหาสด |
เมทริกซ์ความสามารถในการทำงานร่วมกัน
เพื่อเป็นจุดอ้างอิงอย่างรวดเร็ว ตาราง 1 จะแสดงภาพรวมของประเภทโฆษณาและ ความเข้ากันได้กับฟีเจอร์ที่เกี่ยวข้องกับโฆษณา
การรองรับฟีเจอร์ | โฆษณาที่ลูกค้าเย็บด้วยตนเอง | VAST | VMAP | โฆษณาที่ฝัง | โฆษณาแบบขยายที่ฝัง |
---|---|---|---|---|---|
ใช้ได้กับ | VAST | เย็บด้วยชิ้นงานด้วยตนเอง | ไม่มี | ขยายแบบฝัง | ฝังแล้ว |
ไทม์ไลน์ | แบบเย็บตะเข็บ | แบบเย็บตะเข็บ | แบบเย็บตะเข็บ | ฝังแล้ว | ฝังแล้ว |
การแทรกโฆษณา | คงที่ | คงที่ | คงที่ | คงที่ | คงที่, ไดนามิก |
การนำโฆษณาออก | |||||
โฆษณาตอนต้น | |||||
โฆษณาตอนกลาง | |||||
โฆษณาตอนท้าย | |||||
การข้ามโฆษณา | |||||
ตัวแบ่งการกรอวิดีโอ | |||||
ตัวตัดการโหลดคลิป |
กิจกรรม
เมื่อเกิดเหตุการณ์ช่วงพักคีย์ แคสต์ SDK จะส่งเหตุการณ์ประเภท
BreaksEvent
แอปตัวรับสัญญาณสามารถสมัครรับข้อมูลได้โดยใช้ PlayerManager
addEventListener
API
คุณใช้เหตุการณ์เหล่านี้สำหรับข้อมูลวิเคราะห์และการติดตามการเล่นโฆษณาได้ เมื่อ VMAP (เพลย์ลิสต์โฆษณาหลายรายการสำหรับวิดีโอ) และโฆษณา VAST (เทมเพลตการแสดงโฆษณาวิดีโอ) เหตุการณ์การติดตามมาตรฐานที่ระบุไว้ในคำตอบจะ ส่งโดย SDK
ประเภทเหตุการณ์แสดงอยู่ในตาราง 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;
});