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

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

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

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

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

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

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

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

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

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

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

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

ตำแหน่ง
ภูมิภาค Google Cloud ที่สร้างการกำหนดค่าที่ใช้งานจริง LOCATION
หมายเลขโปรเจ็กต์
หมายเลขโปรเจ็กต์ Google Cloud ที่ใช้ Video Stitcher API PROJECT_NUMBER
โทเค็น OAuth

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

OAUTH_TOKEN

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

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

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

รหัสการกำหนดค่าที่ใช้งานอยู่
รหัสการกำหนดค่าไลฟ์สดที่คุณระบุเมื่อสร้างกิจกรรมไลฟ์สด LIVE_CONFIG_ID
คีย์เนื้อหาที่กำหนดเอง
คีย์ชิ้นงานที่กำหนดเองของ Ad Manager ซึ่งสร้างขึ้นในระหว่างกระบวนการสร้าง การกำหนดค่าสำหรับกิจกรรมไลฟ์สด ด้วย Video Stitcher API CUSTOM_ASSET_KEY

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

แอปตัวอย่าง IMA จะแสดงเฉพาะคำขอสตรีม HLS คุณยังใช้สตรีม DASH ได้เมื่อสร้างคลาส VideoStitcherLiveStreamRequest เมื่อ ตั้งค่าเพลเยอร์ที่รองรับ 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 ลงในโฟลเดอร์ใหม่ ตัวอย่างนี้คือเว็บแอปที่คุณ โฮสต์ในเครื่องเพื่อวัตถุประสงค์ในการทดสอบได้

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

python3 -m http.server 8000

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

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

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

ขอไลฟ์สด

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

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

เช่น

// StreamManager which will be used to request ad-enabled 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() {
  requestVideoStitcherStream();

  playButton.style.display = "none";
  playButton.removeEventListener('click', initiatePlayback);
  playButton.addEventListener('click', resumePlayback);
}
...

function requestVideoStitcherStream() {
  const streamRequest = new google.ima.dai.api.VideoStitcherLiveStreamRequest();
  streamRequest.liveStreamEventId = 'LIVE_CONFIG_ID';
  streamRequest.region = 'LOCATION';
  streamRequest.projectNumber = 'PROJECT_NUMBER';
  streamRequest.oAuthToken = 'OAUTH_TOKEN';
  streamRequest.networkCode = 'NETWORK_CODE';
  streamRequest.customAssetKey = 'CUSTOM_ASSET_KEY';

  streamManager.requestStream(streamRequest);
}

สำหรับการทดสอบในเครื่อง หากไฟล์ไลฟ์สดอยู่ในที่เก็บข้อมูล Cloud Storage คุณจะต้องเปิดใช้ CORS สำหรับต้นทาง http://localhost:8000

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

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

ปรับแต่งคำขอสตรีมโดยเพิ่มตัวเลือกเซสชันเพื่อลบล้างการกำหนดค่า Cloud Video Stitcher API เริ่มต้นโดยใช้ VideoStitcherLiveStreamRequest.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);

แทรกช่วงพักโฆษณา

API เครื่องมือต่อเชื่อมวิดีโอกับโฆษณาของ Google Cloud จะแทรกโฆษณาที่ดึงมาจากแท็กโฆษณาสำหรับ ช่วงพักโฆษณาแต่ละช่วง ระบบจะระบุช่วงพักโฆษณาในไฟล์ Manifest โดยใช้เครื่องหมายโฆษณา ตัวทำเครื่องหมายโฆษณาจะ แทรกโดยโปรแกรมเปลี่ยนไฟล์ไลฟ์สด

โฆษณาจะเล่นทันทีหลังจากแทรกช่วงพักโฆษณา

ล้างข้อมูล

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

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

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