หน้านี้ได้รับการแปลโดย Cloud Translation API

เริ่มต้นใช้งาน 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

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

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

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

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

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

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

ข้อกำหนดเบื้องต้น

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

ไฟล์ว่าง 3 ไฟล์:
- dai.html
- dai.css
- dai.js
Python ที่ติดตั้งบนคอมพิวเตอร์ หรือเว็บเซิร์ฟเวอร์หรือสภาพแวดล้อมการพัฒนาแบบโฮสต์อื่นๆ เพื่อใช้ในการทดสอบ

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

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

ใช้บรรทัดคำสั่งจากไดเรกทอรีที่มีการเรียกใช้ไฟล์ index.html ดังนี้
```
python -m http.server 8000
```
หมายเหตุ: http.server ใช้งานได้ใน Python 3.x เท่านั้น
ในเว็บเบราว์เซอร์ ให้ไปที่ http://localhost:8000/

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

สร้างโปรแกรมเล่นวิดีโอง่ายๆ

ก่อนอื่นให้แก้ไข 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

จากนั้นกำหนดฟังก์ชันเพื่อขอพ็อดที่แสดงสตรีม 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 ให้ฟังเหตุการณ์ HLS.js FRAG_PARSING_METADATA เพื่อรับข้อมูลเมตา 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 สำหรับการเล่นสตรีมแบบสด ให้ใช้สตริง '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 สำหรับการเล่นสตรีม 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