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

1. ภาพรวม

โค้ดแล็บนี้อธิบายวิธีสร้างแอปตัวรับเว็บที่กำหนดเองซึ่งใช้ 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 ในเนื้อหาสำหรับแคสต์
• วิธีข้ามคลิปช่วงพัก
• วิธีปรับแต่งลักษณะการทำงานเริ่มต้นของช่วงพักเมื่อกรอ

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

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

ประสบการณ์การใช้งาน

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

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

> หากมีปัญหาเกี่ยวกับเครือข่าย > หากคุณอยู่ในสถานที่ที่เครือข่าย Wi-Fi ไม่น่าเชื่อถือ อุปกรณ์ Chromecast สามารถเดินสายได้โดยใช้อะแดปเตอร์อีเทอร์เน็ตสำหรับ

Chromecast หรือ Chromecast พร้อม Google TV

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

อ่านอย่างเดียว อ่านและทำแบบฝึกหัดให้เสร็จ

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

มือใหม่ ระดับกลาง เชี่ยวชาญ

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

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

ดาวน์โหลดซอร์สโค้ด

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

> ที่เก็บ Codelab สำหรับการแคสต์วิดีโอมี 2 โปรเจ็กต์ตัวอย่าง ได้แก่ > * app-start ซึ่งเป็นโค้ดเริ่มต้นที่คุณจะสร้างขึ้นใน Codelab นี้ * app-done - โค้ดที่สมบูรณ์ของแอปวิดีโอตัวอย่างที่เสร็จสมบูรณ์

3. ติดตั้งใช้งานเครื่องรับในพื้นที่

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

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

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

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

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

4. ลงทะเบียนแอปพลิเคชันในแผงควบคุมสำหรับนักพัฒนาแอป Cast

> หากไม่มีบัญชีนักพัฒนาแอป Cast > ลงชื่อสมัครใช้บัญชีใน แผงควบคุมสำหรับนักพัฒนาซอฟต์แวร์ Google Cast SDK และชำระค่าธรรมเนียมการลงทะเบียน

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

หมายเหตุ: หากพบว่าไอคอนแคสต์ไม่ปรากฏ ให้ตรวจสอบว่าได้ลงทะเบียนเว็บรีซีฟเวอร์และอุปกรณ์แคสต์อย่างถูกต้องใน 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 พื้นฐานเพื่อเริ่มต้นบริบทแคสต์และโหลดชิ้นงานวิดีโอเมื่อเริ่มต้น นอกจากนี้ เรายังได้เพิ่มความสามารถในการบันทึกข้อบกพร่องบางอย่างเพื่อให้บันทึกกลับไปที่เครื่องมือแคสต์และคำสั่ง

> แคสต์เอกสารประกอบไหม > เรามีเอกสารประกอบที่ครอบคลุมสำหรับผู้รับ ผู้ส่งใน iOS, Android และ Chrome

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

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

สร้างออบเจ็กต์ VastAdsRequest ในไฟล์ js/receiver.js ค้นหาฟังก์ชัน LOAD request interceptor แล้วแทนที่ด้วยโค้ดต่อไปนี้ ไฟล์นี้มี 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 และค่า 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 วินาที แล้วคลิกปุ่ม TO จดบันทึกที่พิมพ์ใน Break Seek Interceptor ตอนนี้ระบบจะลบล้างลักษณะการทำงานเริ่มต้นเพื่อเล่นช่วงพักใกล้กับเวลา seekFrom มากขึ้น

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

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

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

> อยากแคสต์เพิ่มเติมไหม > ดูโค้ดแล็บของ Cast อื่นๆ และแอปตัวอย่างใน GitHub