เพิ่มการรองรับ API ช่วงพักโฆษณาไปยังเว็บรีซีฟเวอร์

1. ภาพรวม

โลโก้ Google Cast

Codelab นี้จะแสดงวิธีสร้างแอป Web Receiver ที่กำหนดเองซึ่งใช้ Cast Ad Breaks API

Google Cast คืออะไร

Google Cast ช่วยให้ผู้ใช้แคสต์เนื้อหาจากอุปกรณ์เคลื่อนที่ไปยังทีวีได้ ผู้ใช้จะใช้อุปกรณ์เคลื่อนที่เป็นรีโมตคอนโทรลในการเล่นสื่อบนทีวีได้

Google Cast SDK ช่วยให้คุณขยายแอปเพื่อควบคุมทีวีหรือระบบเสียงได้ Cast SDK ช่วยให้คุณสามารถเพิ่มคอมโพเนนต์ UI ที่จำเป็นตามรายการตรวจสอบการออกแบบของ Google Cast ได้

รายการตรวจสอบของการออกแบบ Google Cast มีไว้เพื่อทำให้การใช้งาน Cast เป็นมาตรฐานเพื่อให้ประสบการณ์ของผู้ใช้เข้าใจง่ายในทุกแพลตฟอร์มที่รองรับ

เราจะสร้างอะไร

เมื่อสร้าง Codelab นี้เสร็จแล้ว คุณจะสร้างตัวรับการแคสต์ที่ใช้ประโยชน์จาก 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

คุณต้องลงทะเบียนแอปพลิเคชันเพื่อให้เรียกใช้ตัวรับสัญญาณที่กำหนดเองในอุปกรณ์ Chromecast ได้เนื่องจากมี Codelab นี้เป็นในตัว หลังจากลงทะเบียนแอปพลิเคชันแล้ว ระบบจะสร้างรหัสแอปพลิเคชันขึ้นมาซึ่งจะต้องมีการกำหนดค่าแอปพลิเคชันผู้ส่งเพื่อเปิดใช้แอปพลิเคชัน Web Receiver

รูปภาพ Play Console SDK ของ Google Cast พร้อมข้อความ "เพิ่มแอปพลิเคชันใหม่" ไฮไลต์ปุ่มแล้ว

คลิก "เพิ่มแอปพลิเคชันใหม่"

รูปภาพของ "แอปพลิเคชันตัวรับใหม่" หน้าจอที่มี "ตัวรับที่กำหนดเอง" ไฮไลต์ตัวเลือกแล้ว

เลือก "ตัวรับแบบกำหนดเอง" นี่คือสิ่งที่เรากำลังสร้าง

รูปภาพของ "ตัวรับแบบกำหนดเองใหม่" หน้าจอแสดง URL ที่มีคนพิมพ์ลงใน "URL แอปพลิเคชันของผู้รับ" ฟิลด์

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

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

รูปภาพแผงควบคุมสำหรับนักพัฒนาซอฟต์แวร์ Google Cast SDK พร้อมข้อความ "เพิ่มอุปกรณ์ใหม่" ไฮไลต์ปุ่มแล้ว

คลิก "เพิ่มอุปกรณ์ใหม่"

รูปภาพ "เพิ่มอุปกรณ์รับการแคสต์" กล่องโต้ตอบ

ป้อนหมายเลขซีเรียลที่พิมพ์อยู่ด้านหลังอุปกรณ์ Cast แล้วตั้งชื่อที่สื่อความหมาย คุณยังสามารถค้นหาหมายเลขซีเรียลได้โดยการแคสต์หน้าจอใน Chrome เมื่อเข้าถึงแผงควบคุมสำหรับนักพัฒนาซอฟต์แวร์ Google Cast SDK

ตัวรับสัญญาณและอุปกรณ์ใช้เวลา 5-15 นาทีเพื่อเตรียมพร้อมสำหรับการทดสอบ หลังจากรอ 5-15 นาที คุณต้องรีบูตอุปกรณ์แคสต์

5. เตรียมโครงการเริ่มต้น

ก่อนเริ่ม Codelab นี้ คุณควรอ่านคู่มือนักพัฒนาโฆษณาที่ให้ภาพรวมของ API ช่วงพักโฆษณา

ต้องเพิ่มการรองรับ Google Cast ลงในแอปเริ่มต้นที่คุณดาวน์โหลด คำศัพท์ของ Google Cast บางส่วนที่ใช้ใน Codelab มีดังนี้

  • แอปผู้ส่งทำงานบนอุปกรณ์เคลื่อนที่หรือแล็ปท็อป
  • แอปตัวรับทำงานบนอุปกรณ์ Google Cast

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

  1. เลือกไดเรกทอรี ไอคอนโฟลเดอร์app-start จากการดาวน์โหลดโค้ดตัวอย่าง
  2. เปิด js/receiver.js และindex.html

โปรดทราบว่าขณะทำงานใน Codelab นี้ โซลูชันเว็บโฮสติ้งที่คุณเลือกควรได้รับการอัปเดตด้วยการเปลี่ยนแปลง โปรดตรวจสอบว่าคุณนำการเปลี่ยนแปลงไปยังเว็บไซต์ที่โฮสต์เมื่อทำการตรวจสอบและทดสอบอย่างต่อเนื่อง

การออกแบบแอป

ตามที่กล่าวไว้ Codelab ใช้แอปพลิเคชันผู้ส่งเพื่อเริ่มเซสชันการแคสต์ และแอปพลิเคชันตัวรับที่จะแก้ไขให้ใช้ API ช่วงพักโฆษณา

ใน Codelab นี้ เครื่องมือแคสต์และคำสั่งจะทำหน้าที่เป็นผู้ส่งเว็บเพื่อเปิดแอปตัวรับ เริ่มด้วยการเปิดเครื่องมือในเบราว์เซอร์ Chrome ป้อนรหัสแอปของผู้รับที่คุณได้รับใน Cast SDK Developer Console แล้วคลิกตั้งค่าเพื่อกำหนดค่าแอปของผู้ส่งสำหรับการทดสอบ

หมายเหตุ: หากคุณพบว่าไอคอนแคสต์ไม่ปรากฏขึ้น ให้ตรวจดูว่ามีการลงทะเบียนตัวรับเว็บและอุปกรณ์แคสต์อย่างถูกต้องใน Cast Developer Console หากคุณยังไม่ได้ดำเนินการ ให้ปิดอุปกรณ์แคสต์ที่เพิ่งลงทะเบียนไว้

แอปตัวรับคือโฟกัสหลักของ Codelab นี้และประกอบด้วยมุมมองหลัก 1 รายการที่กำหนดไว้ใน index.html และไฟล์ JavaScript 1 ไฟล์ชื่อ js/receiver.js ซึ่งมีคำอธิบายเพิ่มเติมด้านล่าง

index.html

ไฟล์ HTML นี้มี UI ของแอปตัวรับสัญญาณที่ได้จากองค์ประกอบ cast-media-player และยังโหลดไลบรารี CAF SDK และไลบรารีของ Cast Debug Logger ด้วย

receiver.js

สคริปต์นี้จัดการตรรกะทั้งหมดสำหรับแอปตัวรับสัญญาณของเรา โดยตอนนี้มีตัวรับ CAF พื้นฐานสำหรับเริ่มต้นบริบทการแคสต์และโหลดเนื้อหาวิดีโอเมื่อเริ่มต้น นอกจากนี้ เรายังเพิ่มความสามารถบางอย่างในเครื่องบันทึกการแก้ไขข้อบกพร่องเพื่อให้บันทึกกลับไปยังเครื่องมือแคสต์และคำสั่งได้

6. เพิ่ม VMAP ลงในเนื้อหา

Cast Web Receiver SDK รองรับโฆษณาที่ระบุผ่านเพลย์ลิสต์โฆษณาหลายรายการสำหรับวิดีโอดิจิทัล หรือที่เรียกว่า VMAP โครงสร้าง XML จะระบุช่วงพักโฆษณาของสื่อและข้อมูลเมตาของคลิปช่วงพักโฆษณาที่เกี่ยวข้อง SDK จะระบุพร็อพเพอร์ตี้ vmapAdsRequest ในออบเจ็กต์ MediaInformation เพื่อแทรกโฆษณาเหล่านี้

สร้างออบเจ็กต์ VastAdsRequest ในไฟล์ js/receiver.js ค้นหาฟังก์ชัน 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 ในเนื้อหา

ดังที่กล่าวไปก่อนหน้านี้ เรามีการรองรับโฆษณาหลายประเภทใน Web Receiver SDK ส่วนนี้จะไฮไลต์ 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 มี setBreakSeekInterceptor API ให้ใน BreakManager เพื่อปรับแต่งช่วงพักโฆษณาที่จะเล่นขณะกรอวิดีโอ เมื่อแอปพลิเคชันให้ตรรกะที่กำหนดเองผ่าน API นั้น SDK จะเรียกใช้แอปพลิเคชันทุกครั้งที่มีการค้นหาเกิดขึ้นในช่วงพักอย่างน้อย 1 ครั้ง ฟังก์ชัน Callback จะส่งผ่านออบเจ็กต์ที่มีตัวแบ่งทั้งหมดระหว่างตำแหน่ง 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 วินาทีเพื่อผ่านช่วงพักทั้งหมดที่ตัวตรวจจับการโหลดคลิปข้าม เมื่อไปถึงแล้ว ให้ส่งคำสั่งค้นหาโดยไปที่แท็บการควบคุมสื่อ ป้อนข้อมูลในช่อง Seek Into Media ด้วย 300 วินาที แล้วคลิกปุ่มถึง จดบันทึกบันทึกที่พิมพ์ในตัวดักจับการค้นหาเบรก ตอนนี้ระบบจะลบล้างลักษณะการทำงานเริ่มต้นเพื่อเล่นช่วงพักใกล้กับเวลา seekFrom มากขึ้น

10. ขอแสดงความยินดี

ตอนนี้คุณทราบวิธีเพิ่มโฆษณาลงในแอปพลิเคชันตัวรับสัญญาณโดยใช้ Cast Receiver SDK ล่าสุดแล้ว

สำหรับรายละเอียดเพิ่มเติม โปรดดูคู่มือช่วงพักโฆษณาของนักพัฒนาซอฟต์แวร์