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

1. ภาพรวม

โลโก้ Google Cast

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 ได้

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

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

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

เลือก "ตัวรับสัญญาณที่กำหนดเอง" ซึ่งเป็นสิ่งที่เรากำลังสร้าง

รูปภาพของหน้าจอ "ตัวรับสัญญาณที่กำหนดเองใหม่" ที่แสดง 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 นี้ เครื่องมือแคสต์และคำสั่งจะทำหน้าที่เป็น 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 ตัวรับการแคสต์เวอร์ชันล่าสุดแล้ว

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