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

1. ภาพรวม

โลโก้ Google Cast

Codelab นี้อธิบายวิธีสร้างแอปตัวรับสัญญาณเว็บที่กำหนดเองซึ่งใช้ Cast Ad Breaks API

Google Cast คืออะไร

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

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

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

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

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

สิ่งที่คุณจะได้เรียนรู้

  • วิธีรวมช่วงพัก VMAP และ VAST ในเนื้อหาสำหรับ Cast
  • วิธีข้ามคลิปพัก
  • วิธีปรับแต่งลักษณะการทำงานเริ่มต้นของช่วงพักเมื่อกรอ

สิ่งที่คุณต้องมี

  • เบราว์เซอร์ Google Chrome เวอร์ชันล่าสุด
  • บริการโฮสติ้ง HTTPS เช่น Firebase Hosting หรือ ngrok
  • อุปกรณ์ Google Cast เช่น Chromecast หรือ Android TV ที่กำหนดค่าให้เข้าถึงอินเทอร์เน็ตได้
  • ทีวีหรือจอภาพที่มีอินพุต HDMI หรือ Google Home Hub

ประสบการณ์

โปรดตรวจสอบว่าคุณมีประสบการณ์ต่อไปนี้ก่อนดำเนินการต่อใน Codelab นี้

  • ความรู้ทั่วไปเกี่ยวกับการพัฒนาเว็บ
  • การสร้างแอปพลิเคชัน Cast Web Receiver

คุณจะใช้บทแนะนำนี้อย่างไร

อ่านอย่างเดียว อ่านและทำแบบฝึกหัด

คุณจะให้คะแนนประสบการณ์ในการสร้างเว็บแอปเท่าใด

ผู้ฝึกหัด ขั้นกลาง ผู้ชำนาญ

2. รับโค้ดตัวอย่าง

ดาวน์โหลดโค้ดตัวอย่างทั้งหมดลงในคอมพิวเตอร์...

และแตกไฟล์ ZIP ที่ดาวน์โหลด

3. ติดตั้งใช้งานตัวรับสัญญาณในพื้นที่

หากต้องการใช้ตัวรับเว็บกับอุปกรณ์ Cast คุณต้องโฮสต์ตัวรับเว็บในที่ที่อุปกรณ์ Cast เข้าถึงได้ หากคุณมีเซิร์ฟเวอร์ที่รองรับ HTTPS อยู่แล้ว ให้ข้ามวิธีการต่อไปนี้และจด URL ไว้ เนื่องจากคุณจะต้องใช้ในส่วนถัดไป

หากไม่มีเซิร์ฟเวอร์ให้ใช้งาน คุณสามารถใช้ Firebase Hosting หรือ ngrok

เรียกใช้เซิร์ฟเวอร์

เมื่อตั้งค่าบริการที่ต้องการแล้ว ให้ไปที่ app-start แล้วเริ่มเซิร์ฟเวอร์

จดบันทึก URL ของตัวรับที่โฮสต์ คุณจะต้องใช้ในส่วนถัดไป

4. ลงทะเบียนแอปพลิเคชันใน Cast Developer Console

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

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

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

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

เลือก "Custom Receiver" ซึ่งเป็นสิ่งที่เรากำลังสร้าง

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

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

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

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

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

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

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

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

5. เตรียมโปรเจ็กต์เริ่มต้น

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

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

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

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

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

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

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

ดังที่กล่าวไปแล้ว Codelab ใช้แอปพลิเคชันตัวส่งเพื่อเริ่มเซสชัน Cast และแอปพลิเคชันตัวรับซึ่งจะได้รับการแก้ไขเพื่อใช้ Ad Break API

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

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

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

index.html

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

receiver.js

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

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

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

สร้างออบเจ็กต์ VastAdsRequest ในjs/receiver.jsไฟล์ ค้นหาฟังก์ชันตัวสกัดกั้นคำขอโหลด แล้วแทนที่ด้วยโค้ดต่อไปนี้ โดยมี URL แท็ก VMAP ตัวอย่างจาก DoubleClick และระบุค่าสหสัมพันธ์แบบสุ่มเพื่อให้แน่ใจว่าคำขอที่ตามมาไปยัง 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 และค่าตัวเชื่อมโยงแบบสุ่ม ระบบจะกำหนดช่วงพักเหล่านี้ให้กับช่วงพัก 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 เพื่อตั้งค่า Interceptor สำหรับการโหลดเบรก คัดลอกบรรทัดต่อไปนี้ลงในไฟล์ js/receiver.js หลังจากบรรทัดที่มีตัวแปร context และ playerManager เพื่อรับการอ้างอิงไปยังอินสแตนซ์

const breakManager = playerManager.getBreakManager();

แอปพลิเคชันควรตั้งค่า Interceptor ที่มีกฎเพื่อไม่สนใจช่วงพักโฆษณาที่เกิดขึ้นก่อน 30 วินาที โดยคำนึงถึงช่วงพักโฆษณาตอนท้าย (เนื่องจากค่า position เป็น -1) Interceptor นี้ทำงานเหมือนกับ LOAD Interceptor ใน PlayerManager ยกเว้นว่า Interceptor นี้ใช้เฉพาะกับการโหลดคลิปช่วงพัก ตั้งค่านี้หลังจากตัวสกัดกั้นคำขอ 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 รายการ ฟังก์ชัน 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 วินาที แล้วคลิกปุ่ม TO จดบันทึกที่พิมพ์ใน Break Seek Interceptor ตอนนี้ลักษณะการทำงานเริ่มต้นควรจะถูกลบล้างเพื่อเล่นช่วงพักให้ใกล้เคียงกับเวลา seekFrom มากขึ้น

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

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

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