1. ภาพรวม
Codelab นี้สรุปวิธีสร้างแอปเว็บรีซีฟเวอร์ที่กำหนดเองซึ่งใช้ API ช่วงพักโฆษณาของแคสต์
Google Cast คืออะไร
Google Cast ช่วยให้ผู้ใช้แคสต์เนื้อหาจากอุปกรณ์เคลื่อนที่ไปยังทีวีได้ จากนั้นผู้ใช้จะใช้อุปกรณ์เคลื่อนที่เป็นรีโมตคอนโทรลในการเล่นสื่อบนทีวีได้
Google Cast SDK ช่วยให้คุณขยายแอปเพื่อควบคุมทีวีหรือระบบเสียงได้ Cast SDK ช่วยให้คุณเพิ่มคอมโพเนนต์ UI ที่จำเป็นได้ตามรายการตรวจสอบการออกแบบ Google Cast
รายการตรวจสอบการออกแบบของ Google Cast มีไว้เพื่อทำให้การใช้งาน Cast เป็นมาตรฐานเดียวกัน เพื่อให้ผู้ใช้ได้รับประสบการณ์ที่ใช้งานง่ายในทุกแพลตฟอร์มที่รองรับ
เรากำลังจะสร้างอะไร
เมื่อทำ Codelab นี้เสร็จแล้ว คุณจะต้องสร้างเครื่องรับ Cast ที่ใช้ประโยชน์จาก Break API
สิ่งที่คุณจะได้เรียนรู้
- วิธีรวมช่วงพัก VMAP และ VAST ในเนื้อหาสำหรับการแคสต์
- วิธีข้ามคลิปพัก
- วิธีปรับแต่งลักษณะช่วงพักโฆษณาเริ่มต้นขณะกรอ
สิ่งที่ต้องมี
- เบราว์เซอร์ Google Chrome เวอร์ชันล่าสุด
- บริการโฮสติ้ง HTTPS เช่น โฮสติ้งของ Firebase หรือ ngrok
- อุปกรณ์ Google Cast เช่น Chromecast หรือ Android TV ที่กำหนดค่าด้วยการเข้าถึงอินเทอร์เน็ต
- ทีวีหรือจอภาพที่มีอินพุต HDMI หรือ Google Home Hub
ประสบการณ์การใช้งาน
โปรดตรวจสอบว่าคุณมีการใช้งานดังต่อไปนี้ก่อนดำเนินการผ่าน Codelab นี้
- ความรู้ทั่วไปเกี่ยวกับการพัฒนาเว็บ
- การสร้างแอปพลิเคชัน Cast Web Receiver
คุณจะใช้บทแนะนำนี้อย่างไร
คุณจะให้คะแนนประสบการณ์การสร้างเว็บแอปอย่างไร
2. รับโค้ดตัวอย่าง
ดาวน์โหลดโค้ดตัวอย่างทั้งหมดลงในคอมพิวเตอร์...
และคลายการบีบอัดไฟล์ ZIP ที่ดาวน์โหลด
3. ทำให้รีซีฟเวอร์ใช้งานได้ภายในเครื่อง
หากต้องการใช้เว็บรีซีฟเวอร์กับอุปกรณ์แคสต์ คุณจะต้องโฮสต์เครื่องรับสัญญาณไว้ในที่ที่อุปกรณ์แคสต์เข้าถึงได้ หากคุณมีเซิร์ฟเวอร์ที่รองรับ https อยู่แล้ว ให้ข้ามวิธีการต่อไปนี้และจด URL ไว้ เนื่องจากคุณจะต้องใช้ในส่วนถัดไป
หากไม่มีเซิร์ฟเวอร์ที่พร้อมให้บริการ ให้ใช้โฮสติ้งของ Firebase หรือ ngrok
เรียกใช้เซิร์ฟเวอร์
เมื่อตั้งค่าบริการที่เลือกแล้ว ให้ไปที่ app-start
แล้วเริ่มต้นเซิร์ฟเวอร์
ให้จด URL ของผู้รับที่โฮสต์ไว้ คุณจะได้นำไปใช้ในส่วนถัดไป
4. ลงทะเบียนแอปพลิเคชันใน Cast Developer Console
คุณต้องลงทะเบียนแอปพลิเคชันเพื่อให้สามารถใช้เครื่องรับที่กำหนดเองภายใน Codelab นี้ในอุปกรณ์ Chromecast หลังจากที่คุณลงทะเบียนแอปพลิเคชันแล้ว ระบบจะสร้างรหัสแอปพลิเคชันและต้องกำหนดค่าแอปพลิเคชันผู้ส่งเพื่อให้เปิดแอปพลิเคชัน Web Receiver ได้
คลิก "เพิ่มแอปพลิเคชันใหม่"
เลือก "ตัวรับสัญญาณที่กำหนดเอง" ซึ่งเป็นสิ่งที่เรากำลังสร้าง
ป้อนรายละเอียดของผู้รับใหม่ ตรวจสอบว่าได้ใช้ URL ที่ชี้ไปยังตำแหน่งที่คุณวางแผนจะโฮสต์แอปพลิเคชัน Web Receiver จดรหัสแอปพลิเคชันที่คอนโซลสร้างไว้เมื่อลงทะเบียนแอปพลิเคชันแล้ว แอปพลิเคชันของผู้ส่งจะได้รับการกำหนดค่าให้ใช้ตัวระบุดังกล่าวในส่วนต่อไป
นอกจากนี้ คุณต้องลงทะเบียนอุปกรณ์ Google Cast เพื่อให้อุปกรณ์เข้าถึงแอปพลิเคชันตัวรับสัญญาณก่อนที่จะเผยแพร่ได้ เมื่อคุณเผยแพร่แอปพลิเคชันตัวรับสัญญาณแล้ว แอปพลิเคชันดังกล่าวจะพร้อมใช้งานสำหรับอุปกรณ์ Google Cast ทุกเครื่อง เพื่อวัตถุประสงค์ของ Codelab นี้ ขอแนะนำให้ทำงานร่วมกับแอปพลิเคชันรีซีฟเวอร์ที่ยังไม่ได้เผยแพร่
คลิก "เพิ่มอุปกรณ์ใหม่"
ป้อนหมายเลขซีเรียลที่พิมพ์อยู่ด้านหลังของอุปกรณ์ Cast และตั้งชื่อที่สื่อความหมาย คุณยังสามารถค้นหาหมายเลขซีเรียลได้โดยการแคสต์หน้าจอใน Chrome เมื่อเข้าถึงแผงควบคุมสำหรับนักพัฒนาซอฟต์แวร์ Google Cast SDK
ตัวรับสัญญาณและอุปกรณ์จะใช้เวลา 5-15 นาทีเพื่อพร้อมสำหรับการทดสอบ หลังจากรอ 5-15 นาที คุณต้องรีบูตอุปกรณ์แคสต์
5. เตรียมการเริ่มโปรเจ็กต์
ก่อนที่จะเริ่ม Codelab ควรอ่านคู่มือนักพัฒนาซอฟต์แวร์โฆษณาซึ่งแสดงภาพรวมของ API ช่วงพักโฆษณา
จำเป็นต้องเพิ่มการรองรับ Google Cast ในแอปเริ่มต้นที่คุณดาวน์โหลด ต่อไปนี้คือคำศัพท์ของ Google Cast บางส่วนที่ใช้ใน Codelab
- แอปของผู้ส่งทำงานบนอุปกรณ์เคลื่อนที่หรือแล็ปท็อป
- แอปตัวรับจะทำงานในอุปกรณ์ Google Cast
ตอนนี้คุณพร้อมที่จะสร้างโครงการเริ่มต้นเพิ่มเติมโดยใช้โปรแกรมแก้ไขข้อความที่คุณชื่นชอบแล้ว:
- เลือกไดเรกทอรี
app-start
จากการดาวน์โหลดโค้ดตัวอย่าง - เปิด
js/receiver.js
และ index.html
โปรดทราบว่า ขณะที่คุณดำเนินการใน Codelab โซลูชันเว็บโฮสติ้งที่คุณเลือกควรได้รับการอัปเดตตามการเปลี่ยนแปลงที่เกิดขึ้น ตรวจดูว่าคุณพุชการเปลี่ยนแปลงนั้นไปยังเว็บไซต์ที่โฮสต์เมื่อตรวจสอบและทดสอบต่อ
การออกแบบแอป
ตามที่กล่าวไปแล้ว Codelab จะใช้แอปพลิเคชันผู้ส่งเพื่อเริ่มเซสชันการแคสต์ และแอปพลิเคชันตัวรับที่จะมีการแก้ไขให้ใช้ API ช่วงพักโฆษณา
ใน Codelab นี้ เครื่องมือแคสต์และคำสั่งจะทำหน้าที่เป็น Web Sender เพื่อเปิดแอปตัวรับสัญญาณ โดยเริ่มต้นได้ด้วยการเปิดเครื่องมือนี้ในเบราว์เซอร์ Chrome ป้อนรหัสแอปของผู้รับที่คุณได้รับใน Developer Console ของ Cast SDK แล้วคลิกตั้งค่าเพื่อกำหนดค่าแอปของผู้ส่งสำหรับการทดสอบ
หมายเหตุ: หากคุณพบว่าไอคอนแคสต์ไม่ปรากฏขึ้น ให้ตรวจสอบว่าเว็บรีซีฟเวอร์และอุปกรณ์แคสต์นั้นลงทะเบียนอย่างถูกต้องในคอนโซลของนักพัฒนาซอฟต์แวร์ Cast หากยังไม่ได้เปิด ให้ปิดอุปกรณ์แคสต์ทั้งหมดที่เพิ่งลงทะเบียนแล้วเปิดใหม่
แอปตัวรับคือเนื้อหาสำคัญของ Codelab นี้และประกอบด้วยมุมมองหลัก 1 แบบที่กำหนดไว้ใน index.html
และไฟล์ JavaScript ชื่อ js/receiver.js
อย่างละ 1 ไฟล์ คำอธิบายเพิ่มเติมเหล่านี้ด้านล่าง
index.html
ไฟล์ HTML นี้มี UI ของแอปตัวรับสัญญาณจากองค์ประกอบ cast-media-player
นอกจากนี้ยังโหลดไลบรารี CAF SDK และตัวบันทึกการแก้ไขข้อบกพร่องของ Cast ด้วย
receiver.js
สคริปต์นี้จัดการตรรกะทั้งหมดสำหรับแอปตัวรับสัญญาณ โดยตอนนี้สคริปต์จะมีตัวรับ CAF พื้นฐานสำหรับเริ่มต้นบริบทการแคสต์และโหลดเนื้อหาวิดีโอเมื่อเริ่มต้น นอกจากนี้ยังมีการเพิ่มความสามารถบางอย่างของตัวบันทึกการแก้ไขข้อบกพร่องเพื่อย้อนกลับไปยังเครื่องมือแคสต์และคำสั่ง
6. เพิ่ม VMAP ในเนื้อหา
SDK เว็บตัวรับสัญญาณของ Cast ให้การสนับสนุนสำหรับโฆษณาที่ระบุผ่านเพลย์ลิสต์โฆษณาหลายรายการสำหรับวิดีโอดิจิทัล หรือที่รู้จักกันในชื่อ VMAP โครงสร้าง XML จะระบุช่วงพักโฆษณาของสื่อและข้อมูลเมตาคลิปหยุดพักที่เกี่ยวข้อง หากต้องการแทรกโฆษณาเหล่านี้ SDK จะให้พร็อพเพอร์ตี้ vmapAdsRequest
ในออบเจ็กต์ MediaInformation
ในไฟล์ js/receiver.js
ให้สร้างออบเจ็กต์ VastAdsRequest
ค้นหาฟังก์ชัน LOAD request Interceptor และแทนที่ด้วยโค้ดต่อไปนี้ด้านล่าง โดยประกอบด้วยตัวอย่าง URL แท็ก VMAP จาก DoubleClick และระบุค่า correlator แบบสุ่ม เพื่อให้แน่ใจว่าคำขอหลังจากนั้นไปยัง URL เดียวกันจะสร้างเทมเพลต XML ที่มีช่วงพักโฆษณาซึ่งยังไม่เคยดู
playerManager.setMessageInterceptor(
cast.framework.messages.MessageType.LOAD, (loadRequestData) => {
castDebugLogger.info('MyAPP.LOG', 'Intercepting LOAD request');
// Create the VMAP Ads request data and append it to the MediaInformation.
const vmapUrl =
'https://pubads.g.doubleclick.net/gampad/ads?sz=640x480&iu=/124319096/external/ad_rule_samples&ciu_szs=300x250&ad_rule=1&impl=s&gdfp_req=1&env=vp&output=vmap&unviewed_position_start=1&cust_params=deployment%3Ddevsite%26sample_ar%3Dpremidpost&cmsid=496&vid=short_onecue&correlator=' +
Math.floor(Math.random() * Math.pow(10, 10));
let vmapRequest = new cast.framework.messages.VastAdsRequest();
vmapRequest.adTagUrl = vmapUrl;
loadRequestData.media.vmapAdsRequest = vmapRequest;
castDebugLogger.warn(
'MyAPP.LOG', 'Playable URL: ' + loadRequestData.media.contentId);
return loadRequestData;
});
บันทึกการเปลี่ยนแปลงลงใน js/receiver.js
และอัปโหลดไฟล์ไปยังเว็บเซิร์ฟเวอร์ของคุณ เริ่มเซสชันการแคสต์ด้วยเครื่องมือแคสต์และคำสั่งโดยคลิกไอคอนแคสต์ โฆษณา VMAP ควรเล่นตามด้วยเนื้อหาหลัก
7. เพิ่ม VAST ลงในเนื้อหา
ดังที่กล่าวไปแล้วก่อนหน้านี้ SDK ของ Web Receiver รองรับโฆษณาหลายประเภท ส่วนนี้จะไฮไลต์ API ที่พร้อมสำหรับการผสานรวมโฆษณาเทมเพลตการแสดงโฆษณาวิดีโอดิจิทัลหรือที่เรียกว่า VAST หากคุณติดตั้งโค้ด VMAP จากส่วนก่อนหน้าแล้ว ให้แสดงความคิดเห็น
คัดลอกข้อมูลต่อไปนี้ลงในไฟล์ js/receiver.js
หลังตัวตรวจจับคำขอโหลด ซึ่งประกอบด้วยคลิปช่วงพักโฆษณา VAST 6 คลิปจาก DoubleClick และค่า correlator แบบสุ่ม คลิปนี้ได้รับการกำหนดเป็นช่วงพัก 5 ช่วง position
ของช่วงพักแต่ละช่วงจะตั้งเวลาเป็นหน่วยวินาทีที่เกี่ยวข้องกับเนื้อหาหลัก รวมถึงโฆษณาตอนต้น (position
ตั้งค่าเป็น 0
) และช่วงพักชมโฆษณาตอนท้าย (กำหนด position
เป็น -1
)
const addVASTBreaksToMedia = (mediaInformation) => {
mediaInformation.breakClips = [
{
id: 'bc1',
title: 'bc1 (Pre-roll)',
vastAdsRequest: {
adTagUrl: generateVastUrl('preroll')
}
},
{
id: 'bc2',
title: 'bc2 (Mid-roll)',
vastAdsRequest: {
adTagUrl: generateVastUrl('midroll')
}
},
{
id: 'bc3',
title: 'bc3 (Mid-roll)',
vastAdsRequest: {
adTagUrl: generateVastUrl('midroll')
}
},
{
id: 'bc4',
title: 'bc4 (Mid-roll)',
vastAdsRequest: {
adTagUrl: generateVastUrl('midroll')
}
},
{
id: 'bc5',
title: 'bc5 (Mid-roll)',
vastAdsRequest: {
adTagUrl: generateVastUrl('midroll')
}
},
{
id: 'bc6',
title: 'bc6 (Post-roll)',
vastAdsRequest: {
adTagUrl: generateVastUrl('postroll')
}
}
];
mediaInformation.breaks = [
{id: 'b1', breakClipIds: ['bc1'], position: 0},
{id: 'b2', breakClipIds: ['bc2'], position: 15},
{id: 'b3', breakClipIds: ['bc3', 'bc4'], position: 60},
{id: 'b4', breakClipIds: ['bc5'], position: 100},
{id: 'b5', breakClipIds: ['bc6'], position: -1}
];
};
หมายเหตุ: พร็อพเพอร์ตี้ breakClipIds
ของช่วงพักคืออาร์เรย์ ซึ่งหมายความว่าคุณจะกำหนดคลิปช่วงพักหลายรายการให้กับช่วงพักแต่ละช่วงได้
ใน js/receiver.js file
ให้ค้นหาตัวตรวจจับข้อความ LOAD แล้วแทนที่ด้วยโค้ดต่อไปนี้ โปรดทราบว่าจะมีการแสดงความคิดเห็นในงาน VMAP เพื่อแสดงโฆษณาประเภท VAST
playerManager.setMessageInterceptor(
cast.framework.messages.MessageType.LOAD, (loadRequestData) => {
castDebugLogger.info('MyAPP.LOG', 'Intercepting LOAD request');
// Create the VMAP Ads request data and append it to the MediaInformation.
// const vmapUrl =
// 'https://pubads.g.doubleclick.net/gampad/ads?sz=640x480&iu=/124319096/external/ad_rule_samples&ciu_szs=300x250&ad_rule=1&impl=s&gdfp_req=1&env=vp&output=vmap&unviewed_position_start=1&cust_params=deployment%3Ddevsite%26sample_ar%3Dpremidpost&cmsid=496&vid=short_onecue&correlator=' +
// Math.floor(Math.random() * Math.pow(10, 10));
// let vmapRequest = new cast.framework.messages.VastAdsRequest();
// vmapRequest.adTagUrl = vmapUrl;
// loadRequestData.media.vmapAdsRequest = vmapRequest;
// Append VAST ad breaks to the MediaInformation.
addVASTBreaksToMedia(loadRequestData.media);
castDebugLogger.warn(
'MyAPP.LOG', 'Playable URL: ' + loadRequestData.media.contentId);
return loadRequestData;
});
บันทึกการเปลี่ยนแปลงลงใน js/receiver.js
และอัปโหลดไฟล์ไปยังเว็บเซิร์ฟเวอร์ของคุณ เริ่มเซสชันการแคสต์ด้วยเครื่องมือแคสต์และคำสั่งโดยคลิกไอคอนแคสต์ โฆษณา VAST ควรเล่นตามด้วยเนื้อหาหลัก
8. การข้ามช่วงพักโฆษณา
CAF มีคลาสชื่อ BreakManager
ซึ่งช่วยในการใช้กฎธุรกิจที่กำหนดเองสำหรับลักษณะการทำงานของโฆษณา หนึ่งในฟีเจอร์เหล่านี้ช่วยให้แอปพลิเคชันข้ามช่วงพักและแยกคลิปตามเงื่อนไขบางอย่างได้แบบเป็นโปรแกรม ตัวอย่างนี้แสดงวิธีข้ามช่วงพักโฆษณาที่ตำแหน่งอยู่ภายใน 30 วินาทีแรกของเนื้อหา แต่ไม่ใช่ช่วงพักโฆษณาตอนท้าย เมื่อใช้โฆษณา VAST ที่กำหนดค่าในส่วนก่อนหน้า ระบบจะกำหนดช่วงพักไว้ 5 ช่วง ได้แก่ ช่วงพักโฆษณาตอนต้น 1 ช่วง ช่วงพักโฆษณาตอนกลาง 3 ครั้ง (ที่ 15, 60 และ 100 วินาที) และสุดท้ายคือช่วงพักชมโฆษณาตอนท้าย 1 ครั้ง หลังจากทำตามขั้นตอนแล้ว ระบบจะข้ามเฉพาะโฆษณาตอนต้นและโฆษณาตอนกลางที่ตำแหน่ง 15 วินาที
ในการดำเนินการดังกล่าว แอปพลิเคชันควรเรียกใช้ API ที่พร้อมใช้งานผ่าน BreakManager
เพื่อตั้งค่าตัวตรวจจับสำหรับการโหลดช่วงพัก คัดลอกบรรทัดต่อไปนี้ลงในไฟล์ js/receiver.js
หลังบรรทัดที่มีตัวแปร context
และ playerManager
เพื่อรับการอ้างอิงไปยังอินสแตนซ์
const breakManager = playerManager.getBreakManager();
แอปพลิเคชันควรตั้งค่าตัวตรวจจับด้วยกฎให้เพิกเฉยต่อช่วงพักโฆษณาที่เกิดขึ้นก่อน 30 วินาที ในขณะเดียวกันก็คำนึงถึงช่วงพักหลังโฆษณาด้วย (เนื่องจากค่า position
คือ -1
) ตัวตรวจจับนี้ทำงานเหมือนตัวตรวจจับ LOAD ใน PlayerManager
ยกเว้นการทำงานนี้จะใช้กับการโหลดคลิปพักเท่านั้น ตั้งค่านี้หลังจากตัวตรวจจับคำขอ LOAD และก่อนการประกาศฟังก์ชัน addVASTBreaksToMedia
คัดลอกข้อมูลต่อไปนี้ลงในไฟล์ js/receiver.js
breakManager.setBreakClipLoadInterceptor((breakClip, breakContext) => {
/**
* The code will skip playback of break clips if the break position is within
* the first 30 seconds.
*/
let breakObj = breakContext.break;
if (breakObj.position >= 0 && breakObj.position < 30) {
castDebugLogger.debug(
'MyAPP.LOG',
'Break Clip Load Interceptor skipping break with ID: ' + breakObj.id);
return null;
} else {
return breakClip;
}
});
หมายเหตุ: การส่งคืน null
ที่นี่จะข้าม BreakClip
ที่ประมวลผลอยู่ หาก Break
ไม่ได้กำหนดคลิปช่วงพักไว้ ระบบจะข้ามช่วงพักนั้น
บันทึกการเปลี่ยนแปลงลงใน js/receiver.js
และอัปโหลดไฟล์ไปยังเว็บเซิร์ฟเวอร์ของคุณ เริ่มเซสชันการแคสต์ด้วยเครื่องมือแคสต์และคำสั่งโดยคลิกไอคอนแคสต์ โฆษณา VAST ควรได้รับการประมวลผล โปรดทราบว่าจะไม่มีการเล่นโฆษณาโฆษณาตอนต้นและตอนกลางแรก (ซึ่ง position
ยาว 15 วินาที)
9. ปรับแต่งลักษณะการทำงานของการค้นหาช่วงพัก
เมื่อค้นหาช่วงพักโฆษณาที่ผ่านไปแล้ว การติดตั้งใช้งานเริ่มต้นจะได้รับ Break
รายการทั้งหมดที่มีตำแหน่งอยู่ระหว่างค่าของการดำเนินการค้นหา seekFrom
และ seekTo
จากรายการช่วงพักนี้ SDK จะเล่น Break
ซึ่งมี position
ใกล้เคียงกับค่า seekTo
มากที่สุด และมีการตั้งค่าพร็อพเพอร์ตี้ isWatched
เป็น false
จากนั้นระบบจะตั้งค่าพร็อพเพอร์ตี้ isWatched
ของช่วงพักเป็น true
และโปรแกรมเล่นจะเริ่มเล่นคลิปพัก เมื่อดูช่วงพัก เนื้อหาหลักจะกลับมาเล่นอีกครั้งจากตำแหน่ง seekTo
หากไม่มีช่วงพักดังกล่าว จะไม่มีการเล่นช่วงพักและเนื้อหาหลักจะเล่นต่อที่ตำแหน่ง seekTo
หากต้องการปรับแต่งช่วงพักที่จะเล่นขณะกรอวิดีโอ Cast SDK จะมี API ของ setBreakSeekInterceptor
ใน BreakManager
เมื่อแอปพลิเคชันให้ตรรกะที่กำหนดเองผ่าน API นั้น SDK จะเรียกลอจิกทุกครั้งที่มีการค้นหาเมื่อมีช่วงพักอย่างน้อย 1 ครั้ง ฟังก์ชันเรียกกลับจะส่งออบเจ็กต์ที่มีตัวแบ่งทั้งหมดระหว่างตำแหน่ง seekFrom
และตำแหน่ง seekTo
จากนั้นแอปพลิเคชันจะต้องแก้ไขและแสดงผล BreakSeekData
ตัวอย่างด้านล่างนี้จะลบล้างลักษณะการใช้งานเริ่มต้นโดยนำช่วงพักทั้งหมดที่ค้นหามา และเล่นเฉพาะรายการแรกที่ปรากฏในไทม์ไลน์
คัดลอกข้อมูลต่อไปนี้ลงในไฟล์ js/receiver.js
ภายใต้คําจํากัดความของ setBreakClipLoadInterceptor
breakManager.setBreakSeekInterceptor((breakSeekData) => {
/**
* The code will play an unwatched break between the seekFrom and seekTo
* position. Note: If the position of a break is less than 30 then it will be
* skipped due to the setBreakClipLoadInterceptor code.
*/
castDebugLogger.debug(
'MyAPP.LOG',
'Break Seek Interceptor processing break ids ' +
JSON.stringify(breakSeekData.breaks.map(adBreak => adBreak.id)));
// Remove all other breaks except for the first one.
breakSeekData.breaks.splice(1,breakSeekData.breaks.length);
return breakSeekData;
});
หมายเหตุ: หากฟังก์ชันไม่แสดงค่าหรือหากแสดงผล null
จะไม่มีการเล่นช่วงพัก
บันทึกการเปลี่ยนแปลงลงใน js/receiver.js
และอัปโหลดไฟล์ไปยังเว็บเซิร์ฟเวอร์ของคุณ เริ่มเซสชันการแคสต์ด้วยเครื่องมือแคสต์และคำสั่งโดยคลิกไอคอนแคสต์ โฆษณา VAST ควรได้รับการประมวลผล โปรดทราบว่าจะไม่มีการเล่นโฆษณาโฆษณาตอนต้นและตอนกลางแรก (ซึ่ง position
ยาว 15 วินาที)
รอให้เวลาเล่นถึง 30 วินาทีเพื่อให้ผ่านช่วงพักทั้งหมดที่ตัวตรวจจับการโหลดคลิปพักจะข้าม เมื่อเข้าถึงแล้ว ให้ส่งคำสั่งค้นหาโดยไปที่แท็บตัวควบคุมสื่อ ใส่อินพุตค้นหาสื่อด้วยระยะเวลา 300
วินาที แล้วคลิกปุ่มถึง สังเกตบันทึกที่พิมพ์ใน Break Seek Interceptor ระบบจะลบล้างลักษณะการทำงานเริ่มต้นเพื่อเล่นช่วงพักให้ใกล้เคียงกับเวลา seekFrom
10. ขอแสดงความยินดี
ตอนนี้คุณทราบวิธีเพิ่มโฆษณาลงในแอปพลิเคชันตัวรับสัญญาณโดยใช้ SDK ตัวรับการแคสต์เวอร์ชันล่าสุดแล้ว
โปรดดูรายละเอียดเพิ่มเติมในคู่มือช่วงพักโฆษณาสำหรับนักพัฒนาซอฟต์แวร์