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

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

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

DAI ที่แสดงในพ็อด

คู่มือนี้แสดงวิธีเล่นสตรีมการแสดงพ็อด DAI สำหรับเนื้อหาสดหรือ VOD โดยใช้ IMA DAI SDK สำหรับ HTML5 กับโปรแกรมเล่นวิดีโอที่อาศัย hls.js ในการเล่น หากคุณต้องการดูหรือทำตามไปพร้อมกับตัวอย่างการผสานรวมที่สมบูรณ์ พร้อมรองรับทั้ง HLS.js และการเล่น Safari โปรดดูตัวอย่างการแสดงพ็อด HLS สำหรับการรองรับ DASH.js โปรดดูตัวอย่างการแสดงพ็อด DASH โดยดาวน์โหลดแอปตัวอย่างเหล่านี้ได้จากหน้าการเผยแพร่ HTML5 DAI GitHub

ภาพรวมการแสดงพ็อด DAI

การใช้งานการแสดงพ็อดโดยใช้ IMA DAI SDK มีส่วนประกอบหลัก 2 ส่วน ซึ่งแสดงให้เห็นในคู่มือนี้ ได้แก่

  • PodStreamRequest / PodVodStreamRequest: ออบเจ็กต์ที่กำหนดคำขอสตรีมไปยังเซิร์ฟเวอร์การโฆษณาของ Google คำขอจะระบุรหัสเครือข่าย และ PodStreamRequest กำหนดให้ต้องมีคีย์เนื้อหาที่กำหนดเองและคีย์ API ที่ไม่บังคับด้วย พารามิเตอร์ทั้ง 2 รายการมีพารามิเตอร์ที่ไม่บังคับอื่นๆ

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

สิ่งที่ต้องดำเนินการก่อน

ก่อนที่จะเริ่มต้น คุณต้องมีสิ่งต่อไปนี้

  • ไฟล์ว่าง 3 ไฟล์:

    • dai.html
    • dai.css
    • dai.js

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

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

เนื่องจาก SDK โหลดทรัพยากร Dependency โดยใช้โปรโตคอลเดียวกับหน้าเว็บที่โหลดมา คุณจึงต้องใช้เว็บเซิร์ฟเวอร์เพื่อทดสอบแอป วิธีเริ่มต้นอย่างรวดเร็วของเซิร์ฟเวอร์การพัฒนาซอฟต์แวร์ภายในก็คือการใช้เซิร์ฟเวอร์ในตัวของ Python

  1. ใช้บรรทัดคำสั่งจากไดเรกทอรีที่มีไฟล์ index.html ที่เรียกใช้:

    python -m http.server 8000
    เท่านั้น

  2. ไปที่ http://localhost:8000/ ในเว็บเบราว์เซอร์

    คุณยังใช้สภาพแวดล้อมในการพัฒนาซอฟต์แวร์หรือเว็บเซิร์ฟเวอร์อื่นๆ ที่โฮสต์ไว้ได้ด้วย เช่น เซิร์ฟเวอร์ HTTP Apache

สร้างวิดีโอเพลเยอร์ง่ายๆ

ก่อนอื่น ให้แก้ไข dai.html เพื่อสร้างองค์ประกอบวิดีโอ HTML5 แบบง่ายและ div เพื่อใช้กับองค์ประกอบ UI โฆษณา นอกจากนี้ ให้เพิ่มแท็กที่จำเป็นเพื่อโหลดไฟล์ dai.css และ dai.js ตลอดจนนำเข้าโปรแกรมเล่นวิดีโอ hls.js

จากนั้นแก้ไข dai.css เพื่อระบุขนาดและตำแหน่งขององค์ประกอบหน้า สุดท้าย ใน dai.js ให้กำหนดตัวแปรเพื่อใช้เก็บข้อมูลคำขอสตรีมและฟังก์ชัน initPlayer() ที่จะเรียกใช้เมื่อโหลดหน้าเว็บ

ค่าคงที่คำขอสตรีมมีดังนี้

  • BACKUP_STREAM: URL สำหรับสตรีมสำรองที่เล่นในกรณีที่กระบวนการโฆษณาพบข้อผิดพลาดร้ายแรง

  • STREAM_URL: ใช้สำหรับสตรีมแบบสดเท่านั้น URL ของสตรีมวิดีโอที่ระบุโดยเครื่องมือจัดการไฟล์ Manifest หรือพาร์ทเนอร์บุคคลที่สามที่ใช้การแสดงพ็อด คุณจำเป็นต้องแทรกรหัสสตรีมที่ได้จาก IMA DAI SDK ก่อนที่จะส่งคำขอ ในกรณีนี้ URL ของสตรีมจะมีตัวยึดตำแหน่ง [[STREAMID]] ซึ่งแทนที่ด้วยรหัสสตรีมก่อนส่งคำขอ

  • NETWORK_CODE: รหัสเครือข่ายสำหรับบัญชี Ad Manager 360

  • CUSTOM_ASSET_KEY: ใช้สำหรับสตรีมแบบสดเท่านั้น คีย์เนื้อหาที่กำหนดเองที่ระบุเหตุการณ์การแสดงพ็อดใน Ad Manager 360 ซึ่งอาจสร้างขึ้นโดยเครื่องมือจัดการไฟล์ Manifest หรือพาร์ทเนอร์ที่แสดงพ็อดบุคคลที่สาม

  • API_KEY: ใช้สำหรับสตรีมแบบสดเท่านั้น คีย์ API ที่ไม่บังคับซึ่งต้องใช้เพื่อดึงข้อมูลรหัสสตรีมจาก IMA DAI SDK

dai.html

<html>
<head>
  <script src="https://cdn.jsdelivr.net/npm/hls.js@latest"></script>
  <script src="dai.js"></script>
  <link rel="stylesheet" href="dai.css" type="text/css">
</head>
<body onLoad="initPlayer()">
  <h2>IMA DAI SDK Demo (HLS.JS)</h2>
    <video id="video"></video>
    <div id="ad-ui"></div>
</body>
</html>

dai.css

#video,
#ad-ui {
  width: 640px;
  height: 360px;
  position: absolute;
  top: 35px;
  left: 0;
}

#ad-ui {
  cursor: pointer;
}

dai.js

var BACKUP_STREAM =
    'https://storage.googleapis.com/interactive-media-ads/media/bbb.m3u8'

// Stream Config.
const STREAM_URL = "https://encodersim.sandbox.google.com/masterPlaylist/...&stream_id=[[STREAMID]]";
const NETWORK_CODE = "51636543";
const CUSTOM_ASSET_KEY = "google-sample";
const API_KEY = "";

var hls = new Hls(); // hls.js video player
var videoElement;
var adUiElement;

function initPlayer() {
  videoElement = document.getElementById('video');
  adUiElement = document.getElementById('adUi');
}

โหลด IMA DAI SDK

จากนั้นเพิ่มเฟรมเวิร์ก DAI โดยใช้แท็กสคริปต์ใน dai.html ก่อนแท็กสำหรับ dai.js

dai.html

<html>
<head>
  <script src="https://cdn.jsdelivr.net/npm/hls.js@latest"></script>
  <script type="text/javascript" src="//imasdk.googleapis.com/js/sdkloader/ima3_dai.js"></script>
  <script src="dai.js"></script>
  <link rel="stylesheet" href="dai.css" type="text/css">
</head>
...

เริ่มต้น StreamManager และส่งคำขอสตรีมถ่ายทอดสดหรือ VOD

การแสดงพ็อดสตรีมแบบสด

หากต้องการขอชุดโฆษณา ให้สร้าง ima.dai.api.StreamManager ซึ่งมีหน้าที่ขอและจัดการสตรีม DAI เครื่องมือสร้างจะนำองค์ประกอบวิดีโอและอินสแตนซ์ที่ได้จะนำองค์ประกอบ UI โฆษณาไปใช้ในการจัดการการโต้ตอบกับโฆษณา

จากนั้นกำหนดฟังก์ชันเพื่อขอให้พ็อดที่แสดงสตรีมแบบสด ฟังก์ชันนี้จะสร้าง PodStreamRequest ก่อน กำหนดค่าด้วยพารามิเตอร์ StreamRequest ที่ระบุไว้ในขั้นตอนที่ 2 แล้วเรียก streamManager.requestStream() ด้วยออบเจ็กต์คำขอนั้น

dai.js

function initPlayer() {
  videoElement = document.getElementById('video');
  adUiElement = document.getElementById('adUi');
  streamManager = new google.ima.dai.api.StreamManager(videoElement, adUiElement)

  requestLivePodStream(NETWORK_CODE, CUSTOM_ASSET_KEY, API_KEY);
}

function requestLivePodStream(networkCode, customAssetKey, apiKey) {
  // clear HLS.js instance, if in use
  if (hls) {
    hls.destroy();
  }

  // Generate a Pod Serving live Stream Request
  const streamRequest = new google.ima.dai.api.PodStreamRequest();
  streamRequest.networkCode = networkCode;
  streamRequest.customAssetKey = customAssetKey;
  streamRequest.apiKey = apiKey;
  streamRequest.format = 'hls';
  streamManager.requestStream(streamRequest);
}

การแสดงพ็อด VOD

หากต้องการขอชุดโฆษณา ให้สร้าง ima.dai.api.StreamManager ซึ่งมีหน้าที่ขอและจัดการสตรีม DAI เครื่องมือสร้างจะนำองค์ประกอบวิดีโอและอินสแตนซ์ที่ได้จะนำองค์ประกอบ UI โฆษณาไปใช้ในการจัดการการโต้ตอบกับโฆษณา

จากนั้นกำหนดฟังก์ชันเพื่อขอพ็อดที่แสดงสตรีม VOD ฟังก์ชันนี้จะสร้าง PodVodStreamRequest ก่อน กำหนดค่าด้วยพารามิเตอร์ StreamRequest ที่ระบุไว้ในขั้นตอนที่ 2 แล้วเรียก streamManager.requestStream() ด้วยออบเจ็กต์คำขอนั้น

dai.js

function initPlayer() {
  videoElement = document.getElementById('video');
  adUiElement = document.getElementById('adUi');
  streamManager = new google.ima.dai.api.StreamManager(videoElement, adUiElement)

  requestVodPodStream(NETWORK_CODE);
}

function requestVodPodStream(networkCode) {
  // clear HLS.js instance, if in use
  if (hls) {
    hls.destroy();
  }

  // Generate a Pod Serving VOD Stream Request
  const streamRequest = new google.ima.dai.api.PodVodStreamRequest();
  streamRequest.networkCode = networkCode;
  streamRequest.format = 'hls';
  streamManager.requestStream(streamRequest);
}

จัดการเหตุการณ์สตรีม

การแสดงพ็อดสตรีมแบบสด

ถัดไป ให้ใช้ Listener เหตุการณ์สำหรับเหตุการณ์วิดีโอที่สำคัญ ตัวอย่างนี้จัดการเหตุการณ์ STREAM_INITIALIZED, ERROR, AD_BREAK_STARTED และ AD_BREAK_ENDED โดยเรียกใช้ฟังก์ชัน onStreamEvent() ฟังก์ชันนี้จะจัดการการโหลดสตรีมและข้อผิดพลาด รวมถึงการปิดใช้ตัวควบคุมวิดีโอเพลเยอร์ขณะที่โฆษณากำลังเล่น ซึ่ง SDK จำเป็นต้องใช้ เมื่อโหลดสตรีมแล้ว โปรแกรมเล่นวิดีโอจะโหลดและเล่น URL ที่ระบุโดยใช้ฟังก์ชัน loadStream()

dai.js

var isAdBreak;

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.STREAM_INITIALIZED,
    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);
...
function onStreamEvent(e) {
  switch (e.type) {
    case google.ima.dai.api.StreamEvent.Type.STREAM_INITIALIZED:
      console.log('Stream initialized');
      loadStream(e.getStreamData().streamId);
      break;
    case google.ima.dai.api.StreamEvent.Type.ERROR:
      console.log('Error loading stream, playing backup stream.' + e);
      loadStream('');
      break;
    case google.ima.dai.api.StreamEvent.Type.AD_BREAK_STARTED:
      console.log('Ad Break Started');
      isAdBreak = true;
      videoElement.controls = false;
      adUiElement.style.display = 'block';
      break;
    case google.ima.dai.api.StreamEvent.Type.AD_BREAK_ENDED:
      console.log('Ad Break Ended');
      isAdBreak = false;
      videoElement.controls = true;
      adUiElement.style.display = 'none';
      break;
    default:
      break;
  }
}

function loadStream(streamID) {
  var url;
  if(streamID) {
    url = STREAM_URL.replace('[[STREAMID]]', streamID);
  } else {
    console.log('Stream Initialization Failed');
    url = BACKUP_STREAM;
  }
  console.log('Loading:' + url);
  hls.loadSource(url);
  hls.attachMedia(videoElement);
}

การแสดงพ็อด VOD

ถัดไป ให้ใช้ Listener เหตุการณ์สำหรับเหตุการณ์วิดีโอที่สำคัญ ตัวอย่างนี้จัดการเหตุการณ์ STREAM_INITIALIZED, LOADED, ERROR, AD_BREAK_STARTED และ AD_BREAK_ENDED โดยเรียกใช้ฟังก์ชัน onStreamEvent() ฟังก์ชันนี้จัดการการโหลดสตรีมและข้อผิดพลาด ตลอดจนการปิดใช้ตัวควบคุมวิดีโอเพลเยอร์ขณะที่โฆษณากำลังเล่น ซึ่ง SDK จำเป็นต้องใช้

นอกจากนี้ สตรีมที่แสดงพ็อด VOD จำเป็นต้องมีการเรียกใช้ StreamManager.loadStreamMetadata() เพื่อตอบสนองต่อเหตุการณ์ STREAM_INITIALIZED โดยคุณจะต้องขอ URL ของสตรีมจากพาร์ทเนอร์เทคโนโลยีวิดีโอ (VTP) ของคุณด้วย เมื่อการเรียกใช้ loadStreamMetadata() สำเร็จแล้ว ระบบจะทริกเกอร์เหตุการณ์ LOADED ซึ่งคุณควรเรียกใช้ฟังก์ชัน loadStream() ด้วย URL ของสตรีมเพื่อโหลดและเล่นสตรีม

var isAdBreak;

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.STREAM_INITIALIZED,
    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);
...
function onStreamEvent(e) {
  switch (e.type) {
    case google.ima.dai.api.StreamEvent.Type.STREAM_INITIALIZED:
      const streamId = e.getStreamData().streamId;
      // 'vtpInterface' is a place holder for your own video technology
      //  partner (VTP) API calls.
      vtpInterface.requestStreamURL({
        'streamId': streamId,
      })
      .then( (vtpStreamUrl) => {
        streamUrl = vtpStreamUrl;
        streamManager.loadStreamMetadata();
      }, (error) => {
        // Handle the error.
      });
      break;
    case google.ima.dai.api.StreamEvent.Type.LOADED:
      loadStream(streamUrl);
      break;
    case google.ima.dai.api.StreamEvent.Type.ERROR:
      console.log('Error loading stream, playing backup stream.' + e);
      loadStream();
      break;
    case google.ima.dai.api.StreamEvent.Type.AD_BREAK_STARTED:
      console.log('Ad Break Started');
      isAdBreak = true;
      videoElement.controls = false;
      adUiElement.style.display = 'block';
      break;
    case google.ima.dai.api.StreamEvent.Type.AD_BREAK_ENDED:
      console.log('Ad Break Ended');
      isAdBreak = false;
      videoElement.controls = true;
      adUiElement.style.display = 'none';
      break;
    default:
      break;
  }
}

function loadStream(url) {
  if(url) {
    console.log('Loading:' + url);
    hls.loadSource(url);
  } else {
    console.log('Stream Initialization Failed');
    hls.loadSource(BACKUP_STREAM);
  }
  hls.attachMedia(videoElement);
}

จัดการข้อมูลเมตาของสตรีม

ในขั้นตอนนี้ คุณจะได้ใช้ Listener เหตุการณ์สำหรับข้อมูลเมตาเพื่อแจ้ง SDK เมื่อเกิดเหตุการณ์โฆษณา การฟังเหตุการณ์ข้อมูลเมตาในสตรีมอาจแตกต่างกันไปโดยขึ้นอยู่กับรูปแบบของสตรีม (HLS หรือ DASH), ประเภทสตรีม (สตรีมสดหรือ VOD), ประเภทโปรแกรมเล่นของคุณ และประเภทแบ็กเอนด์ DAI ที่ใช้ ดูข้อมูลเพิ่มเติมในคู่มือข้อมูลเมตา แบบกำหนดเวลาของเรา

รูปแบบสตรีม HLS (สตรีมสดและ VOD, โปรแกรมเล่น HLS.js)

หากคุณใช้โปรแกรมเล่น HLS.js ให้ฟังเหตุการณ์ FRAG_PARSING_METADATA ของ HLS.js เพื่อรับข้อมูลเมตา ID3 และส่งไปยัง SDK ด้วย StreamManager.processMetadata()

หากต้องการเล่นวิดีโอโดยอัตโนมัติหลังจากโหลดทุกอย่างและพร้อมแล้ว ให้ฟังเหตุการณ์ MANIFEST_PARSED HLS.js เพื่อทริกเกอร์การเล่น

function loadStream(streamID) {
  hls.loadSource(url);
  hls.attachMedia(videoElement);
  
  // Timed metadata is passed HLS stream events to the streamManager.
  hls.on(Hls.Events.FRAG_PARSING_METADATA, parseID3Events);
  hls.on(Hls.Events.MANIFEST_PARSED, startPlayback);
}

function parseID3Events(event, data) {
  if (streamManager && data) {
    // For each ID3 tag in the metadata, pass in the type - ID3, the
    // tag data (a byte array), and the presentation timestamp (PTS).
    data.samples.forEach((sample) => {
      streamManager.processMetadata('ID3', sample.data, sample.pts);
    });
  }
}

function startPlayback() {
  console.log('Video Play');
  videoElement.play();
}

DASH.js (รูปแบบสตรีม DASH, ประเภทสตรีมสดและ VOD)

หากใช้โปรแกรมเล่น DASH.js คุณต้องใช้สตริงที่แตกต่างกันเพื่อฟังข้อมูลเมตา ID3 สำหรับสตรีมแบบสดหรือ VOD ดังนี้

  • สตรีมแบบสด: 'https://developer.apple.com/streaming/emsg-id3'
  • สตรีม VOD: 'urn:google:dai:2018'

ส่งข้อมูลเมตา ID3 ไปยัง SDK ด้วย StreamManager.processMetadata()

หากต้องการแสดงการควบคุมวิดีโอโดยอัตโนมัติหลังจากโหลดทุกอย่างและพร้อมแล้ว ให้ฟังเหตุการณ์ MANIFEST_LOADED ของ DASH.js

const googleLiveSchema = 'https://developer.apple.com/streaming/emsg-id3';
const googleVodSchema = 'urn:google:dai:2018';
dashPlayer.on(googleLiveSchema, processMetadata);
dashPlayer.on(googleVodSchema, processMetadata);
dashPlayer.on(dashjs.MediaPlayer.events.MANIFEST_LOADED, loadlistener);

function processMetadata(metadataEvent) {
  const messageData = metadataEvent.event.messageData;
  const timestamp = metadataEvent.event.calculatedPresentationTime;

  // Use StreamManager.processMetadata() if your video player provides raw
  // ID3 tags, as with dash.js.
  streamManager.processMetadata('ID3', messageData, timestamp);
}

function loadlistener() {
  showControls();

  // This listener must be removed, otherwise it triggers as addional
  // manifests are loaded. The manifest is loaded once for the content,
  // but additional manifests are loaded for upcoming ad breaks.
  dashPlayer.off(dashjs.MediaPlayer.events.MANIFEST_LOADED, loadlistener);
}

Shaka Player ที่มีสตรีมแบบสด (รูปแบบสตรีม DASH)

หากคุณใช้ Shaka Player ในการเล่นสตรีมแบบสด ให้ใช้สตริง 'emsg' เพื่อฟังเหตุการณ์ของข้อมูลเมตา จากนั้นจึงใช้ข้อมูลข้อความเหตุการณ์ในการโทรไปยัง StreamManager.onTimedMetadata()

shakaPlayer.addEventListener('emsg', (event) => onEmsgEvent(event));

function onEmsgEvent(metadataEvent) {
  // Use StreamManager.onTimedMetadata() if your video player provides
  // processed metadata, as with Shaka player livestreams.
  streamManager.onTimedMetadata({'TXXX': metadataEvent.detail.messageData});
}

Shaka Player ที่มีสตรีม VOD (รูปแบบสตรีม DASH)

หากคุณใช้ Shaka Player สำหรับการเล่นสตรีม VOD ให้ใช้สตริง 'timelineregionenter' เพื่อฟังเหตุการณ์ข้อมูลเมตา จากนั้นใช้ข้อมูลข้อความเหตุการณ์ในการเรียกไปยัง StreamManager.processMetadata() กับสตริง 'urn:google:dai:2018'

shakaPlayer.addEventListener('timelineregionenter', (event) => onTimelineEvent(event));

function onTimelineEvent(metadataEvent) {
  const detail = metadataEvent.detail;
  if ( detail.eventElement.attributes &&
       detail.eventElement.attributes['messageData'] &&
       detail.eventElement.attributes['messageData'].value ) {
        const mediaId = detail.eventElement.attributes['messageData'].value;
        const pts = detail.startTime;
        // Use StreamManager.processMetadata() if your video player provides raw
        // ID3 tags, as with Shaka player VOD streams.
        streamManager.processMetadata('urn:google:dai:2018', mediaId, pts);
       }
}

จัดการเหตุการณ์ของผู้เล่น

เพิ่ม Listener เหตุการณ์ลงในเหตุการณ์ pause และ start ขององค์ประกอบวิดีโอเพื่อให้ผู้ใช้กลับมาเล่นต่อเมื่อ SDK หยุดชั่วคราวในช่วงพักโฆษณา

function loadStream(streamUrl) {
  ...
  
  videoElement.addEventListener('pause', onStreamPause);
  videoElement.addEventListener('play', onStreamPlay);
}

function onStreamPause() {
  console.log('paused');
  if (isAdBreak) {
    videoElement.controls = true;
    adUiElement.style.display = 'none';
  }
}

function onStreamPlay() {
  console.log('played');
  if (isAdBreak) {
    videoElement.controls = false;
    adUiElement.style.display = 'block';
  }
}

เท่านี้ก็เรียบร้อย คุณกำลังขอและแสดงโฆษณาในสตรีมที่แสดงพ็อดด้วย IMA DAI SDK สำหรับ HTML5 หากต้องการดูข้อมูลเพิ่มเติมเกี่ยวกับฟีเจอร์ขั้นสูงของ SDK โปรดดูคำแนะนำอื่นๆ หรือตัวอย่างใน GitHub