เริ่มต้นใช้งาน IMA DAI SDK

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

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

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

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

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

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

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

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

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

ตำแหน่ง

ภูมิภาค Google Cloud ที่สร้างขึ้นเพื่อกำหนดค่า VOD ของคุณมีดังนี้ LOCATION

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

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

โทเค็น OAuth

โทเค็น OAuth ที่มีอายุสั้นของบัญชีบริการที่มีบทบาทผู้ใช้โปรแกรมต่อเชื่อมวิดีโอ

OAUTH_TOKEN

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

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

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

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

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

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

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

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

ตัวอย่างแอป IMA จะสาธิตเฉพาะคําขอสตรีม HLS คุณยังคงใช้ DASH stream ได้เมื่อสร้างคลาส 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 และแตกไฟล์ ZIP ตัวอย่าง 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" โดยมีช่วงพักโฆษณาทุก 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": {
    "includeRenditions": [
      {"bitrateBps": 3000, "codecs": "hvc1.1.4.L126.B0, mp4a.40.2"},
      {"bitrateBps": 2000, "codecs": "avc1.64001f, mp4a.40.2"},
    ],
    "bitrateOrder": "ascending"
  }
};

streamManager.requestStream(streamRequest);

ล้างข้อมูล

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

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

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