ตั้งค่า IMA SDK สําหรับ DAI

เลือกแพลตฟอร์ม HTML5 Android iOS tvOS Cast Roku

IMA SDK ช่วยให้ผสานรวมโฆษณามัลติมีเดียเข้ากับเว็บไซต์และแอปได้อย่างง่ายดาย IMA SDK สามารถ ขอโฆษณาจากเซิร์ฟเวอร์โฆษณา ที่รองรับ VAST และจัดการการเล่นโฆษณาในแอปได้ เมื่อใช้ IMA DAI SDK แอปจะส่งคำขอสตรีมสำหรับโฆษณาและเนื้อหาวิดีโอ ไม่ว่าจะเป็นเนื้อหา VOD หรือเนื้อหาสด จากนั้น SDK จะแสดงสตรีมวิดีโอที่รวมกัน เพื่อให้คุณไม่ต้องจัดการการสลับระหว่างโฆษณาและวิดีโอเนื้อหาภายในแอป

เลือกโซลูชัน DAI ที่คุณสนใจ

บริการเต็มรูปแบบ การแสดงพอดแคสต์ Cloud Stitching API สด Cloud Stitching API VOD

เล่นสตรีม VOD ที่ลงทะเบียนด้วย Google Cloud Video Stitcher API

คู่มือนี้แสดงวิธีใช้ IMA DAI SDK สำหรับ HTML5 เพื่อขอและเล่นเซสชันสตรีม VOD ของ Google Cloud

คู่มือนี้จะขยายตัวอย่างพื้นฐานจากคู่มือเริ่มต้นใช้งาน สำหรับ IMA DAI

ดูข้อมูลเกี่ยวกับการผสานรวมกับแพลตฟอร์มอื่นๆ หรือการใช้ IMA SDK ฝั่งไคลเอ็นต์ได้ที่ SDK โฆษณาสื่ออินเทอร์แอกทีฟ

หากต้องการดูหรือทำตามตัวอย่างการผสานรวมที่เสร็จสมบูรณ์แล้ว ให้ดาวน์โหลดตัวอย่าง Cloud Video Stitcher สำหรับ HLS หรือ DASH

หมายเหตุ: IMA DAI SDK สำหรับ HTML5 รองรับทั้งสตรีม HLS และ DASH แต่การเล่นแต่ละสตรีมต้องใช้ โปรแกรมเล่นสื่อหรือส่วนขยายที่แตกต่างกัน เช่น HLS.js หรือ DASH.js โดยมีการติดตั้งใช้งานที่แตกต่างกัน

คู่มือนี้อธิบายวิธีกำหนดค่า HLS.js และ IMA DAI SDK เพื่อเล่นสตรีม HLS พร้อมหมายเหตุสำคัญเกี่ยวกับความแตกต่างในการใช้งานสำหรับ DASH

ดูแอปตัวอย่าง DASH.js ของ IMA เพื่อเป็นจุดเริ่มต้นในการใช้สตรีม DAI ของ DASH กับ IMA

ตั้งค่าโปรเจ็กต์ Google Cloud

สร้างโปรเจ็กต์ Google Cloud และกำหนดค่าบัญชีบริการเพื่อเข้าถึงโปรเจ็กต์

ป้อนตัวแปรต่อไปนี้เพื่อใช้ใน IMA SDK

ตำแหน่ง

ภูมิภาค Google Cloud ที่สร้างการกำหนดค่า VOD LOCATION

หมายเลขโปรเจ็กต์

หมายเลขโปรเจ็กต์ Google Cloud ที่ใช้ Video Stitcher API PROJECT_NUMBER

โทเค็น OAuth

โทเค็น OAuth อายุสั้นของบัญชีบริการที่มีบทบาทผู้ใช้ Video Stitcher

OAUTH_TOKEN

อ่านเพิ่มเติมเกี่ยวกับการสร้างโทเค็น OAuth ที่มีอายุสั้น คุณสามารถใช้โทเค็น OAuth ซ้ำในคำขอหลายรายการได้ตราบใดที่โทเค็นยังไม่หมดอายุ

รหัสเครือข่าย

รหัสเครือข่าย Ad Manager สำหรับการขอโฆษณา NETWORK_CODE

รหัสการกำหนดค่า VOD

รหัสการกำหนดค่า VOD สำหรับสตรีม VOD VOD_CONFIG_ID

อ่านข้อมูลเพิ่มเติมเกี่ยวกับการสร้างรหัสการกำหนดค่า VOD ในคู่มือการสร้างการกำหนดค่า VOD ของการเย็บเนื้อหาบนระบบคลาวด์

กำหนดค่าสภาพแวดล้อมในการพัฒนา

ประเด็นสำคัญ: คลาส VideoStitcherVodStreamRequest IMA DAI รองรับทั้งสตรีม HLS และสตรีม DASH แบบหลายช่วง ระบบจะแทรกช่วงพักโฆษณา เฉพาะระหว่างช่วง DASH

แอปตัวอย่าง IMA จะแสดงเฉพาะคำขอสตรีม HLS คุณยังใช้สตรีม DASH ได้เมื่อสร้างคลาส VideoStitcherVodStreamRequest เมื่อ ตั้งค่าเพลเยอร์ที่รองรับ DASH คุณต้องตั้งค่า Listener สำหรับ เหตุการณ์ความคืบหน้าของวิดีโอเพลเยอร์ที่สามารถให้ข้อมูลเมตาของวิดีโอแก่ StreamManager.processMetadata() ได้ ฟังก์ชันนี้ใช้พารามิเตอร์ 3 รายการ ได้แก่

1. type: สตริงที่ต้องตั้งค่าเป็น 'ID3' สำหรับสตรีม HLS และ 'urn:google:dai:2018' สำหรับสตรีม DASH

2. data: สำหรับข้อความเหตุการณ์ DASH นี่คือสตริงข้อมูลข้อความ

3. timestamp: ตัวเลขที่เป็นเวลาเริ่มต้นของข้อความเหตุการณ์สำหรับสตรีม DASH

ส่งข้อมูลเมตาโดยเร็วที่สุดและบ่อยที่สุดเท่าที่เหตุการณ์ของผู้เล่นจะให้ได้ หากไม่มีข้อมูลเมตาหรือข้อมูลเมตาไม่ถูกต้อง IMA DAI SDK อาจไม่ทริกเกอร์เหตุการณ์โฆษณา ซึ่งจะส่งผลให้มีการรายงานเหตุการณ์โฆษณาอย่างไม่เหมาะสม

ดาวน์โหลดตัวอย่าง IMA DAI สำหรับ HTML5 แล้วแตกไฟล์ hls_js/simple ตัวอย่าง ZIP ลงในโฟลเดอร์ใหม่ ตัวอย่างนี้คือเว็บแอป ที่คุณโฮสต์ในเครื่องเพื่อวัตถุประสงค์ในการทดสอบได้

หากต้องการโฮสต์ตัวอย่างในเครื่อง ให้ไปที่โฟลเดอร์ใหม่ แล้วเรียกใช้คำสั่ง Python ต่อไปนี้เพื่อเริ่มเว็บเซิร์ฟเวอร์

python3 -m http.server 8000

http.server ใช้ได้เฉพาะใน Python 3.x คุณสามารถใช้เว็บเซิร์ฟเวอร์อื่นๆ เช่น Apache HTTP Server หรือ Node JS

เปิดเว็บเบราว์เซอร์แล้วไปที่ localhost:8000 เพื่อดูวิดีโอเพลเยอร์ เบราว์เซอร์ต้องรองรับไลบรารี HLS.js

หากทุกอย่างทำงานอย่างถูกต้อง การคลิกปุ่มเล่นในวิดีโอ เพลเยอร์จะเริ่มเล่นภาพยนตร์สั้น "Tears of Steel" โดยมีช่วงพักโฆษณาทุกๆ 30 วินาที

ขอสตรีม VOD

หากต้องการแทนที่สตรีมตัวอย่างด้วยสตรีม VOD ที่มีการแทรกโฆษณา ให้ใช้คลาส VideoStitcherVodStreamRequest เพื่อสร้างเซสชันโฆษณาด้วย Google Ad Manager โดยอัตโนมัติ คุณใช้ UI ของ Google Ad Manager เพื่อค้นหาเซสชัน DAI ที่สร้างขึ้นสำหรับการตรวจสอบและแก้ไขข้อบกพร่องได้

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

เช่น

// StreamManager which will be used to request DAI streams.
let streamManager;
...

function initPlayer() {
  videoElement = document.getElementById('video');
  adUiElement = document.getElementById('adUi');
  streamManager = new google.ima.dai.api.StreamManager(
    videoElement,
    adUiElement
  );
  streamManager.addEventListener(
    [
      google.ima.dai.api.StreamEvent.Type.LOADED,
      google.ima.dai.api.StreamEvent.Type.ERROR,
      google.ima.dai.api.StreamEvent.Type.AD_BREAK_STARTED,
      google.ima.dai.api.StreamEvent.Type.AD_BREAK_ENDED
    ],
    onStreamEvent, false);

  hls.on(Hls.Events.FRAG_PARSING_METADATA, function(event, data) {
    if (streamManager && data) {
      // For each ID3 tag in our metadata, we pass in the type - ID3, the
      // tag data (a byte array), and the presentation timestamp (PTS).
      data.samples.forEach(function(sample) {
        streamManager.processMetadata('ID3', sample.data, sample.pts);
      });
    }
  });

  videoElement.addEventListener('pause', () => {
    playButton.style.display = "block";
  });

  playButton.addEventListener('click', initiatePlayback);
}

function initiatePlayback() {
  requestVodVideoStitcherStream();

  playButton.style.display = "none";
  playButton.removeEventListener('click', initiatePlayback);
  playButton.addEventListener('click', resumePlayback);
}
...
function requestVodVideoStitcherStream() {
  const streamRequest = new google.ima.dai.api.VideoStitcherVodStreamRequest();
  streamRequest.vodConfigId = 'VOD_CONFIG_ID';
  streamRequest.region = 'LOCATION';
  streamRequest.projectNumber = 'PROJECT_NUMBER';
  streamRequest.oAuthToken = 'OAUTH_TOKEN';
  streamRequest.networkCode = 'NETWORK_CODE';

  streamManager.requestStream(streamRequest);
}

โหลดหน้าเว็บซ้ำ จากนั้นคุณจะขอและเล่นสตรีม VOD ที่กำหนดเองได้

(ไม่บังคับ) เพิ่มตัวเลือกเซสชันการสตรีม

ปรับแต่งคำขอสตรีมโดยเพิ่มตัวเลือกเซสชันเพื่อลบล้างการกำหนดค่า Cloud Video Stitcher API เริ่มต้นโดยใช้ VideoStitcherVodStreamRequest.videoStitcherSessionOptions หากคุณระบุตัวเลือกที่ไม่รู้จัก Cloud Video Stitcher API จะตอบกลับด้วยข้อผิดพลาด HTTP 400 โปรดดูคู่มือการแก้ปัญหาเพื่อรับความช่วยเหลือ

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

...

// The following session options are examples. Use session options
// that are compatible with your video stream.
streamRequest.videoStitcherSessionOptions = {
  "manifestOptions": {
    "bitrateOrder": "ascending"
  }
};

streamManager.requestStream(streamRequest);

ล้างข้อมูล

ตอนนี้คุณโฮสต์สตรีม VOD ได้สำเร็จแล้ว โดยใช้ Google Cloud Video Stitcher API และขอสตรีมโดยใช้ IMA DAI SDK สำหรับ HTML5 สิ่งสำคัญคือต้องล้างข้อมูลทรัพยากรการแสดงโฆษณา

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

สุดท้าย ในหน้าต่างเทอร์มินัลที่คุณเริ่มเว็บเซิร์ฟเวอร์ Python 3 ให้ใช้คำสั่ง ctrl+C เพื่อปิดเซิร์ฟเวอร์ในเครื่อง