با IMA DAI SDK شروع کنید

IMA SDK ادغام تبلیغات چندرسانه ای را در وب سایت ها و برنامه های شما آسان می کند. IMA SDK می‌تواند از هر سرور تبلیغاتی سازگار با VAST آگهی درخواست کند و پخش آگهی را در برنامه‌های شما مدیریت کند. با IMA DAI SDK، برنامه‌ها درخواست پخش جریانی برای آگهی و ویدیوی محتوا را ارائه می‌کنند - اعم از VOD یا محتوای زنده. سپس SDK یک جریان ویدیوی ترکیبی را برمی‌گرداند، به طوری که نیازی به مدیریت جابجایی بین آگهی و ویدیوی محتوا در برنامه خود ندارید.

راه حل DAI مورد علاقه خود را انتخاب کنید

سرویس پاد DAI

این راهنما نحوه پخش جریان DAI Pod Serving را برای محتوای زنده یا VOD، با استفاده از IMA DAI SDK برای HTML5 با پخش‌کننده ویدیویی که برای پخش به hls.js متکی است، نشان می‌دهد. برای مشاهده یا دنبال کردن یک ادغام نمونه کامل، با پشتیبانی از HLS.js و Safari Playback، به مثال HLS Pod Serving مراجعه کنید. برای پشتیبانی از DASH.js، به مثال DASH Pod Serving مراجعه کنید. می توانید این نمونه برنامه ها را از صفحه انتشار HTML5 DAI GitHub دانلود کنید.

نمای کلی سرویس DAI Pod

اجرای Pod Serving با استفاده از IMA DAI SDK شامل دو جزء اصلی است که در این راهنما نشان داده شده است:

  • PodStreamRequest / PodVodStreamRequest : یک شی که یک درخواست جریان را به سرورهای تبلیغاتی Google تعریف می کند. درخواست ها یک کد شبکه را مشخص می کنند و PodStreamRequest همچنین به یک کلید دارایی سفارشی و یک کلید API اختیاری نیاز دارد. هر دو شامل سایر پارامترهای اختیاری هستند.

  • StreamManager : شی‌ای که ارتباط بین جریان ویدئو و IMA DAI SDK را کنترل می‌کند، مانند شلیک پینگ‌های ردیابی و ارسال رویدادهای جریان به ناشر.

پیش نیازها

قبل از شروع به موارد زیر نیاز دارید:

  • سه فایل خالی:

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

  • پایتون بر روی رایانه شما، یا یک وب سرور یا سایر محیط های توسعه میزبانی شده برای استفاده برای آزمایش نصب شده است

یک محیط توسعه را پیکربندی کنید

از آنجایی که SDK وابستگی ها را با استفاده از همان پروتکل صفحه ای که از آن بارگیری شده بارگیری می کند، باید از یک وب سرور برای آزمایش برنامه خود استفاده کنید. یک راه سریع برای راه اندازی سرور توسعه محلی استفاده از سرور داخلی پایتون است.

  1. با استفاده از یک خط فرمان، از دایرکتوری که حاوی فایل index.html شما است، اجرا کنید:

    python -m http.server 8000

  2. در یک مرورگر وب، به http://localhost:8000/ بروید

    همچنین می توانید از هر محیط توسعه میزبان یا وب سرور دیگری مانند سرور HTTP Apache استفاده کنید.

یک پخش کننده ویدیو ایجاد کنید

ابتدا، dai.html را تغییر دهید تا یک عنصر ویدیوی HTML5 و یک div برای استفاده برای عناصر رابط کاربری تبلیغات ایجاد کنید. همچنین برچسب های لازم را برای بارگیری فایل های dai.css و dai.js و همچنین برای وارد کردن پخش کننده ویدیوی hls.js اضافه کنید.

سپس، dai.css را تغییر دهید تا اندازه و موقعیت عناصر صفحه را مشخص کنید. در نهایت، در dai.js ، متغیرهایی را برای نگهداری اطلاعات درخواست جریان و یک تابع initPlayer() برای اجرا در هنگام بارگیری صفحه تعریف کنید.

ثابت های درخواست جریان به شرح زیر است:

  • BACKUP_STREAM : نشانی اینترنتی برای پخش جریان پشتیبان در صورتی که فرآیند تبلیغات با خطای مهلکی مواجه شود.

  • STREAM_URL : فقط برای پخش زنده استفاده می شود . نشانی وب جریان ویدیویی که توسط دستکاری کننده مانیفست یا شریک شخص ثالث شما با استفاده از سرویس Pod ارائه شده است. قبل از درخواست، باید شناسه جریان ارائه شده توسط IMA DAI SDK را درج کنید. در این مورد، URL جریان شامل یک مکان نگهدار، [[STREAMID]] است که قبل از درخواست، با شناسه جریان جایگزین می‌شود.

  • NETWORK_CODE : کد شبکه برای حساب Ad Manager 360 شما.

  • CUSTOM_ASSET_KEY : فقط برای پخش زنده استفاده می شود . کلید دارایی سفارشی که رویداد سرویس Pod شما را در Ad Manager 360 شناسایی می‌کند. این می‌تواند توسط دستکاری‌کننده مانیفست شما یا شریک شخص ثالث Pod Serving ایجاد شود.

  • 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 کنید

پخش زنده پاد سرویس VOD Pod

به منظور درخواست مجموعه ای از تبلیغات، یک ima.dai.api.StreamManager ایجاد کنید که مسئول درخواست و مدیریت جریان های DAI است. سازنده یک عنصر ویدیویی را می گیرد و نمونه به دست آمده یک عنصر رابط کاربری تبلیغاتی را برای مدیریت تعاملات تبلیغاتی می گیرد.

سپس، تابعی را برای درخواست پخش زنده Pod Serving تعریف کنید. این تابع ابتدا یک 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);
}

به منظور درخواست مجموعه ای از تبلیغات، یک ima.dai.api.StreamManager ایجاد کنید که مسئول درخواست و مدیریت جریان های DAI است. سازنده یک عنصر ویدیویی را می گیرد و نمونه به دست آمده یک عنصر رابط کاربری تبلیغاتی را برای مدیریت تعاملات تبلیغاتی می گیرد.

سپس، تابعی را برای درخواست جریان VOD Pod Serving تعریف کنید. این تابع ابتدا یک 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);
}

رویدادهای جریانی را مدیریت کنید

پخش زنده پاد سرویس VOD Pod

در مرحله بعد، شنوندگان رویداد را برای رویدادهای ویدیویی اصلی پیاده سازی کنید. این مثال با فراخوانی یک تابع onStreamEvent() ، رویدادهای STREAM_INITIALIZED ، ERROR ، AD_BREAK_STARTED و AD_BREAK_ENDED را مدیریت می‌کند. این تابع بارگیری جریان و خطاها را کنترل می‌کند، همچنین کنترل‌های پخش‌کننده را در حین پخش آگهی غیرفعال می‌کند، که توسط 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);
}

در مرحله بعد، شنوندگان رویداد را برای رویدادهای ویدیویی اصلی پیاده سازی کنید. این مثال رویدادهای STREAM_INITIALIZED ، LOADED ، ERROR ، AD_BREAK_STARTED و AD_BREAK_ENDED را با فراخوانی یک تابع onStreamEvent() مدیریت می‌کند. این تابع بارگیری جریان و خطاها را کنترل می‌کند، همچنین کنترل‌های پخش‌کننده را در حین پخش آگهی غیرفعال می‌کند، که توسط SDK مورد نیاز است.

علاوه بر این، جریان‌های VOD Pod Serving نیاز به فراخوانی StreamManager.loadStreamMetadata() در پاسخ به رویداد STREAM_INITIALIZED دارند. همچنین باید از شریک فناوری ویدیویی خود (VTP) یک URL استریم درخواست کنید. هنگامی که فراخوانی 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);
}

مدیریت فراداده جریان

در این مرحله شنوندگان رویداد را برای ابرداده پیاده‌سازی می‌کنید تا در صورت وقوع رویدادهای تبلیغاتی به SDK اطلاع داده شود. گوش دادن به رویدادهای فراداده در جریان می‌تواند متفاوت باشد، بسته به قالب جریان (HLS یا DASH)، نوع جریان (جریان زنده یا VOD)، نوع پخش‌کننده شما، و نوع پشتیبان DAI مورد استفاده. برای اطلاعات بیشتر به راهنمای فراداده زمان‌بندی شده ما مراجعه کنید.

فرمت جریان HLS (جریان های زنده و VOD، پخش کننده HLS.js)

اگر از پخش کننده HLS.js استفاده می کنید، به رویداد HLS.js FRAG_PARSING_METADATA گوش دهید تا متادیتا ID3 را دریافت کنید و با StreamManager.processMetadata() آن را به SDK منتقل کنید.

برای پخش خودکار ویدیو پس از بارگیری و آماده شدن همه چیز، به رویداد HLS.js MANIFEST_PARSED گوش دهید تا بازپخش فعال شود. 

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 را با StreamManager.processMetadata() به SDK منتقل کنید.

برای نمایش خودکار کنترل‌های ویدیو پس از بارگیری و آماده شدن همه چیز، به رویداد DASH.js MANIFEST_LOADED گوش دهید. 

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);
       }
}

رویدادهای بازیکن را مدیریت کنید

شنوندگان رویداد را به 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 را پاکسازی کنید

هنگامی که با موفقیت درخواست و نمایش تبلیغات در جریان سرویس Pod با IMA DAI SDK را به پایان رساندید، پیشنهاد می کنیم پس از اتمام جلسه سرویس پاد، همه منابع را پاکسازی کنید. با StreamManager.destroy() تماس بگیرید تا پخش جریانی را متوقف کنید، همه ردیابی تبلیغات را متوقف کنید و همه دارایی های جریان بارگیری شده را آزاد کنید.

برای آشنایی با ویژگی‌های پیشرفته‌تر SDK، به سایر راهنماها یا نمونه‌های موجود در GitHub مراجعه کنید.

،

IMA SDK ادغام تبلیغات چندرسانه ای را در وب سایت ها و برنامه های شما آسان می کند. IMA SDK می‌تواند از هر سرور تبلیغاتی سازگار با VAST آگهی درخواست کند و پخش آگهی را در برنامه‌های شما مدیریت کند. با IMA DAI SDK، برنامه‌ها درخواست پخش جریانی برای آگهی و ویدیوی محتوا را ارائه می‌کنند - اعم از VOD یا محتوای زنده. سپس SDK یک جریان ویدیوی ترکیبی را برمی‌گرداند، به طوری که نیازی به مدیریت جابجایی بین آگهی و ویدیوی محتوا در برنامه خود ندارید.

راه حل DAI مورد علاقه خود را انتخاب کنید

غلاف خدمت به دای

این راهنما نحوه پخش یک جریان سرویس Dai Pod را برای محتوای زنده یا VOD نشان می دهد ، با استفاده از IMA Dai SDK برای HTML5 با یک پخش کننده ویدیویی که برای پخش به HLS.JS متکی است. برای مشاهده یا دنبال کردن یک ادغام نمونه تکمیل شده ، با پشتیبانی از HLS.JS و Safari Playback ، به عنوان مثال HLS Pod ارائه دهید. برای پشتیبانی dash.js ، به عنوان مثال خدمت Dash Pod مراجعه کنید. می توانید این برنامه های نمونه را از صفحه انتشار HTML5 DAI GitHub بارگیری کنید.

بررسی اجمالی Dai Pod

اجرای POD با استفاده از IMA DAI SDK شامل دو مؤلفه اصلی است که در این راهنما نشان داده شده است:

  • PodStreamRequest / PodVodStreamRequest : شیئی که درخواست جریان را به سرورهای تبلیغاتی گوگل تعریف می کند. درخواست ها یک کد شبکه را مشخص می کنند ، و PodStreamRequest همچنین به یک کلید دارایی سفارشی و یک کلید API اختیاری نیاز دارد. هر دو شامل پارامترهای اختیاری دیگر هستند.

  • StreamManager : شیئی که ارتباط بین جریان ویدیو و IMA Dai SDK را انجام می دهد ، مانند شلیک پیگیری های پیگیری و ارسال رویدادهای جریان به ناشر.

پیش نیازها

قبل از شروع ، به موارد زیر نیاز دارید:

  • سه پرونده خالی:

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

  • پایتون روی رایانه شما نصب شده است ، یا یک سرور وب یا محیط توسعه میزبان دیگر برای استفاده برای آزمایش

یک محیط توسعه را پیکربندی کنید

از آنجا که SDK وابستگی های مشابهی را با استفاده از همان پروتکل به عنوان صفحه ای که از آن بارگیری می شود ، بارگیری می کند ، برای آزمایش برنامه خود باید از سرور وب استفاده کنید. یک راه سریع برای شروع یک سرور توسعه محلی استفاده از سرور داخلی پایتون است.

  1. با استفاده از یک خط فرمان ، از دایرکتوری که حاوی index.html شما است اجرا کنید:

    python -m http.server 8000

  2. در یک مرورگر وب ، به http://localhost:8000/ بروید

    همچنین می توانید از هر محیط توسعه میزبان یا سرور وب ، مانند سرور Apache HTTP استفاده کنید.

یک پخش کننده ویدیویی ایجاد کنید

ابتدا Dai.html را اصلاح کنید تا یک عنصر ویدیویی HTML5 و یک DIV ایجاد کنید تا برای عناصر AD UI استفاده کنید. همچنین برچسب های لازم را برای بارگیری پرونده های Dai.css و dai.js و همچنین وارد کردن پخش کننده ویدیویی hls.js اضافه کنید.

سپس ، dai.css را اصلاح کنید تا اندازه و موقعیت عناصر صفحه مشخص شود. سرانجام ، در dai.js ، متغیرهایی را برای نگه داشتن اطلاعات درخواست جریان و یک عملکرد initPlayer() تعریف کنید تا هنگام بارگیری صفحه اجرا شود.

ثابت درخواست جریان به شرح زیر است:

  • BACKUP_STREAM : URL برای یک جریان پشتیبان برای بازی در صورتی که فرآیند تبلیغات با خطای مهلک روبرو می شود.

  • STREAM_URL : فقط برای Livestreams استفاده می شود . URL جریان ویدئویی که توسط Manipulator مانیفست یا شریک شخص ثالث شما با استفاده از POD Serving ارائه می شود. قبل از درخواست ، باید شناسه جریان ارائه شده توسط IMA Dai SDK را درج کنید. در این حالت ، URL جریان شامل یک مکان نگهدارنده ، [[STREAMID]] است که قبل از درخواست ، با شناسه جریان جایگزین می شود.

  • NETWORK_CODE : کد شبکه حساب AD Manager 360 شما.

  • CUSTOM_ASSET_KEY : فقط برای Livestreams استفاده می شود . کلید دارایی سفارشی که رویداد POD را در AD Manager 360 مشخص می کند. این می تواند توسط Manipulator مانیفست یا شریک زندگی شخص ثالث شما ایجاد شود.

  • API_KEY : فقط برای Livestreams استفاده می شود . یک کلید 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.js ، چارچوب DAI را با استفاده از یک برچسب اسکریپت در dai.html اضافه کنید.

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 ایجاد کنید

Livestream Pod سرو خدمت VOD POD

برای درخواست مجموعه ای از تبلیغات ، ایجاد یک ima.dai.api.StreamManager ، که مسئولیت درخواست و مدیریت جریان های DAI را بر عهده دارد. سازنده یک عنصر ویدیویی را می گیرد و نمونه حاصل از آن یک عنصر AD UI را برای کنترل تعامل AD می گیرد.

سپس یک تابع را برای درخواست POD در خدمت Livestream تعریف کنید. این تابع ابتدا یک 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);
}

برای درخواست مجموعه ای از تبلیغات ، ایجاد یک ima.dai.api.StreamManager ، که مسئولیت درخواست و مدیریت جریان های DAI را بر عهده دارد. سازنده یک عنصر ویدیویی را می گیرد و نمونه حاصل از آن یک عنصر AD UI را برای کنترل تعامل AD می گیرد.

سپس یک تابع را برای درخواست POD ارائه دهنده 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);
}

رویدادهای جریان را اداره کنید

Livestream Pod سرو خدمت VOD POD

در مرحله بعد ، شنوندگان رویداد را برای رویدادهای اصلی ویدیویی پیاده سازی کنید. این مثال با فراخوانی یک تابع onStreamEvent() ، خطای STREAM_INITIALIZED ، ERROR ، AD_BREAK_STARTED و AD_BREAK_ENDED را کنترل می کند. این عملکرد بارگذاری و خطاها را انجام می دهد ، و همچنین کنترل بازیکنان را در حالی که یک تبلیغ در حال پخش است ، غیرفعال می کند ، که توسط SDK مورد نیاز است. هنگامی که جریان بارگیری می شود ، پخش کننده ویدیو با استفاده از یک تابع loadStream() URL ارائه شده را بارگیری و پخش می کند.

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);
}

در مرحله بعد ، شنوندگان رویداد را برای رویدادهای اصلی ویدیویی پیاده سازی کنید. این مثال با فراخوانی یک تابع onStreamEvent() ، رویدادهای AD_BREAK_STARTED و AD_BREAK_ENDED STREAM_INITIALIZED انجام LOADED ERROR . این عملکرد بارگذاری و خطاها را انجام می دهد ، و همچنین کنترل بازیکنان را در حالی که یک تبلیغ در حال پخش است ، غیرفعال می کند ، که توسط SDK مورد نیاز است.

علاوه بر این ، جریان های خدمت VOD POD نیاز به تماس با StreamManager.loadStreamMetadata() در پاسخ به رویداد to to STREAM_INITIALIZED دارند. همچنین باید یک URL جریان را از شریک فناوری ویدیویی خود (VTP) درخواست کنید. هنگامی که تماس loadStreamMetadata() موفق می شود ، یک رویداد LOADED ایجاد می کند ، جایی که باید با URL جریان خود یک عملکرد loadStream() را برای بارگذاری و پخش جریان فراخوانی کنید. 

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);
}

اداره فوق داده جریان

در این مرحله شنوندگان رویداد را برای ابرداده برای اطلاع از SDK هنگام وقوع رویدادهای تبلیغاتی پیاده سازی می کنید. بسته به قالب جریان (HLS یا DASH) ، نوع جریان (جریان زنده یا VOD) ، نوع پخش کننده شما و نوع پشتیبان DAI ، گوش دادن به رویدادهای ابرداده در جریان می تواند متفاوت باشد. برای اطلاعات بیشتر به راهنمای ابرداده به موقع ما مراجعه کنید.

فرمت جریان HLS (جریان زنده و VOD ، پخش کننده hls.js)

اگر از یک پخش کننده HLS.JS استفاده می کنید ، به رویداد hls.js FRAG_PARSING_METADATA گوش دهید تا ابرداده ID3 را بدست آورید و آن را به SDK با StreamManager.processMetadata() منتقل کنید.

برای پخش خودکار فیلم پس از بارگیری و آماده شدن همه چیز ، به رویداد HLS.JS MANIFEST_PARSED گوش دهید تا پخش را تحریک کند. 

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 Streams ، نوع جریان زنده و VOD)

اگر از یک پخش کننده dash.js استفاده می کنید ، باید از رشته های مختلف برای گوش دادن به ابرداده ID3 برای جریان های زنده یا VOD استفاده کنید:

  • Livestreams: 'https://developer.apple.com/streaming/emsg-id3'
  • جریان VOD: 'urn:google:dai:2018'

با استفاده از StreamManager.processMetadata() ابرداده ID3 را به SDK منتقل کنید.

برای نشان دادن خودکار کنترل های ویدیویی پس از بارگیری و آماده شدن همه چیز ، به رویداد Dash.js MANIFEST_LOADED گوش دهید. 

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 با Livestreams (قالب Dash Streams)

اگر از Shaka Player برای پخش Livestream استفاده می کنید ، از رشته '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});
}

Player Shaka با جریان VOD (فرمت Dash Streams)

اگر از 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);
       }
}

رسیدگی به رویدادهای بازیکن

شنوندگان رویداد را به 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 را تمیز کنید

هنگامی که شما با موفقیت درخواست و نمایش تبلیغات را در یک جریان خدمت POD با IMA Dai SDK به پایان رسانده اید ، پیشنهاد می کنیم پس از اتمام جلسه خدمت POD ، منابع خود را تمیز کنید. برای متوقف کردن پخش جریان ، متوقف کردن ردیابی تبلیغات ، با StreamManager.destroy() تماس بگیرید و تمام دارایی های جریان بارگذاری شده را آزاد کنید.

برای کسب اطلاعات در مورد ویژگی های پیشرفته SDK ، راهنماهای دیگر یا نمونه های موجود در GitHub را ببینید.

،

IMA SDK ها ادغام تبلیغات چندرسانه ای را در وب سایت ها و برنامه های خود آسان می کنند. IMA SDK ها می توانند از هر سرور تبلیغاتی سازگار با وسیع درخواست تبلیغات کنند و پخش تبلیغات را در برنامه های شما مدیریت کنند. با IMA DAI SDKS ، برنامه ها درخواست جریان برای تبلیغات و محتوا را ارائه می دهند - چه VOD یا محتوای زنده. SDK سپس یک جریان ویدیویی ترکیبی را برمی گرداند ، به طوری که لازم نیست در برنامه خود مدیریت تعویض بین AD و Video محتوا را مدیریت کنید.

راه حل DAI را که به آن علاقه دارید انتخاب کنید

غلاف خدمت به دای

این راهنما نحوه پخش یک جریان سرویس Dai Pod را برای محتوای زنده یا VOD نشان می دهد ، با استفاده از IMA Dai SDK برای HTML5 با یک پخش کننده ویدیویی که برای پخش به HLS.JS متکی است. برای مشاهده یا دنبال کردن یک ادغام نمونه تکمیل شده ، با پشتیبانی از HLS.JS و Safari Playback ، به عنوان مثال HLS Pod ارائه دهید. برای پشتیبانی dash.js ، به عنوان مثال خدمت Dash Pod مراجعه کنید. می توانید این برنامه های نمونه را از صفحه انتشار HTML5 DAI GitHub بارگیری کنید.

بررسی اجمالی Dai Pod

اجرای POD با استفاده از IMA DAI SDK شامل دو مؤلفه اصلی است که در این راهنما نشان داده شده است:

  • PodStreamRequest / PodVodStreamRequest : شیئی که درخواست جریان را به سرورهای تبلیغاتی گوگل تعریف می کند. درخواست ها یک کد شبکه را مشخص می کنند ، و PodStreamRequest همچنین به یک کلید دارایی سفارشی و یک کلید API اختیاری نیاز دارد. هر دو شامل پارامترهای اختیاری دیگر هستند.

  • StreamManager : شیئی که ارتباط بین جریان ویدیو و IMA Dai SDK را انجام می دهد ، مانند شلیک پیگیری های پیگیری و ارسال رویدادهای جریان به ناشر.

پیش نیازها

قبل از شروع ، به موارد زیر نیاز دارید:

  • سه پرونده خالی:

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

  • پایتون روی رایانه شما نصب شده است ، یا یک سرور وب یا محیط توسعه میزبان دیگر برای استفاده برای آزمایش

یک محیط توسعه را پیکربندی کنید

از آنجا که SDK وابستگی های مشابهی را با استفاده از همان پروتکل به عنوان صفحه ای که از آن بارگیری می شود ، بارگیری می کند ، برای آزمایش برنامه خود باید از سرور وب استفاده کنید. یک راه سریع برای شروع یک سرور توسعه محلی استفاده از سرور داخلی پایتون است.

  1. با استفاده از یک خط فرمان ، از دایرکتوری که حاوی index.html شما است اجرا کنید:

    python -m http.server 8000

  2. در یک مرورگر وب ، به http://localhost:8000/ بروید

    همچنین می توانید از هر محیط توسعه میزبان یا سرور وب ، مانند سرور Apache HTTP استفاده کنید.

یک پخش کننده ویدیویی ایجاد کنید

ابتدا Dai.html را اصلاح کنید تا یک عنصر ویدیویی HTML5 و یک DIV ایجاد کنید تا برای عناصر AD UI استفاده کنید. همچنین برچسب های لازم را برای بارگیری پرونده های Dai.css و dai.js و همچنین وارد کردن پخش کننده ویدیویی hls.js اضافه کنید.

سپس ، dai.css را اصلاح کنید تا اندازه و موقعیت عناصر صفحه مشخص شود. سرانجام ، در dai.js ، متغیرهایی را برای نگه داشتن اطلاعات درخواست جریان و یک عملکرد initPlayer() تعریف کنید تا هنگام بارگیری صفحه اجرا شود.

ثابت درخواست جریان به شرح زیر است:

  • BACKUP_STREAM : URL برای یک جریان پشتیبان برای بازی در صورتی که فرآیند تبلیغات با خطای مهلک روبرو می شود.

  • STREAM_URL : فقط برای Livestreams استفاده می شود . URL جریان ویدئویی که توسط Manipulator مانیفست یا شریک شخص ثالث شما با استفاده از POD Serving ارائه می شود. قبل از درخواست ، باید شناسه جریان ارائه شده توسط IMA Dai SDK را درج کنید. در این حالت ، URL جریان شامل یک مکان نگهدارنده ، [[STREAMID]] است که قبل از درخواست ، با شناسه جریان جایگزین می شود.

  • NETWORK_CODE : کد شبکه حساب AD Manager 360 شما.

  • CUSTOM_ASSET_KEY : فقط برای Livestreams استفاده می شود . کلید دارایی سفارشی که رویداد POD را در AD Manager 360 مشخص می کند. این می تواند توسط Manipulator مانیفست یا شریک زندگی شخص ثالث شما ایجاد شود.

  • API_KEY : فقط برای Livestreams استفاده می شود . یک کلید 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.js ، چارچوب DAI را با استفاده از یک برچسب اسکریپت در dai.html اضافه کنید.

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 ایجاد کنید

Livestream Pod سرو VOD Pod Serving

برای درخواست مجموعه ای از تبلیغات ، ایجاد یک ima.dai.api.StreamManager ، که مسئولیت درخواست و مدیریت جریان های DAI را بر عهده دارد. سازنده یک عنصر ویدیویی را می گیرد و نمونه حاصل از آن یک عنصر AD UI را برای کنترل تعامل AD می گیرد.

سپس یک تابع را برای درخواست POD در خدمت Livestream تعریف کنید. This function first creates a PodStreamRequest , configures it with the streamRequest parameters provided in step 2, and then calls streamManager.requestStream() with that request object.

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);
}

In order to request a set of ads, create an ima.dai.api.StreamManager , which is responsible for requesting and managing DAI streams. The constructor takes a video element and the resulting instance takes an ad UI element to handle ad interactions.

Then, define a function to request the Pod Serving VOD stream. This function first creates a PodVodStreamRequest , configures it with the streamRequest parameters provided in step 2, and then calls streamManager.requestStream() with that request object.

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);
}

Handle stream events

Livestream Pod Serving VOD Pod Serving

Next, implement event listeners for major video events. This example handles the STREAM_INITIALIZED , ERROR , AD_BREAK_STARTED and AD_BREAK_ENDED events by calling an onStreamEvent() function. This function handles stream loading and errors, as well as disabling the player controls while an ad is playing, which is required by the SDK. When the stream is loaded, the video player loads and plays the provided URL using a loadStream() function.

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);
}

Next, implement event listeners for major video events. This example handles the STREAM_INITIALIZED , LOADED , ERROR , AD_BREAK_STARTED and AD_BREAK_ENDED events by calling an onStreamEvent() function. This function handles stream loading and errors, as well as disabling the player controls while an ad is playing, which is required by the SDK.

In addition, VOD Pod Serving streams require calling StreamManager.loadStreamMetadata() in response to the to the STREAM_INITIALIZED event. You also need to request a stream URL from your, video technology partner (VTP). Once the loadStreamMetadata() call succeeds it triggers a LOADED event, where you should call a loadStream() function with your stream URL to load and play the stream. 

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);
}

Handle stream metadata

In this step you implement event listeners for metadata to notify the SDK when ad events occur. Listening for in-stream metadata events can vary, depending on the stream format (HLS or DASH), the stream type (Live or VOD stream), your player type, and the type of DAI backend being used. See our Timed Metadata guide for more information.

HLS stream format (Live and VOD streams, HLS.js player)

If you are using an HLS.js player, listen to the HLS.js FRAG_PARSING_METADATA event to get ID3 metadata and pass it to the SDK with StreamManager.processMetadata() .

To automatically play the video after everything is loaded and ready, listen to the HLS.js MANIFEST_PARSED event to trigger playback. 

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 streams format, Live and VOD stream type)

If you are using a DASH.js player, you have to use different strings to listen for ID3 metadata for Live or VOD streams:

  • Livestreams: 'https://developer.apple.com/streaming/emsg-id3'
  • VOD streams: 'urn:google:dai:2018'

Pass the ID3 metadata to the SDK with StreamManager.processMetadata() .

To automatically show the video controls after everything is loaded and ready, listen to the DASH.js MANIFEST_LOADED event. 

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 with livestreams (DASH streams format)

If you are using Shaka player for livestream playback, use the string 'emsg' to listen for metadata events. Then, use the event message data in your call to 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 with VOD streams (DASH streams format)

If you are using Shaka player for VOD stream playback, use the string 'timelineregionenter' to listen for metadata events. Then, use the event message data in your call to StreamManager.processMetadata() with the string '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);
       }
}

Handle player events

Add event listeners to the video element's pause and start events to allow the user to resume playback when the SDK pauses during ad breaks. 

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';
  }
}

Clean up IMA DAI assets

When you have successfully finished requesting and displaying ads in a Pod Serving stream with IMA DAI SDK, we suggest you clean up any resources after the Pod Serving session is complete. Call StreamManager.destroy() to stop stream playback, stop all ad tracking, and release all of the loaded stream assets.

To learn about more advanced SDK features, see the other guides or the samples on GitHub .

،

IMA SDKs make it easy to integrate multimedia ads into your websites and apps. IMA SDKs can request ads from any VAST-compliant ad server and manage ad playback in your apps. With IMA DAI SDKs, apps make a stream request for ad and content video—either VOD or live content. The SDK then returns a combined video stream, so that you don't have to manage switching between ad and content video within your app.

Select the DAI solution you're interested in

Pod Serving DAI

This guide demonstrates how to play a DAI Pod Serving stream for live or VOD content, using the IMA DAI SDK for HTML5 with a video player that relies on hls.js for playback. To view or follow a completed sample integration, with support for both HLS.js and Safari Playback, see the HLS Pod Serving example . For DASH.js support, see the DASH Pod Serving example . You can download these sample apps from the HTML5 DAI GitHub release page .

DAI Pod Serving overview

Implementing Pod Serving using the IMA DAI SDK involves two main components, which are demonstrated in this guide:

  • PodStreamRequest / PodVodStreamRequest : An object that defines a stream request to Google's advertising servers. Requests specify a Network Code , and the PodStreamRequest also requires a Custom Asset Key , and an optional API key . Both include other optional parameters.

  • StreamManager : An object that handles communication between the video stream and the IMA DAI SDK, such as firing tracking pings and forwarding stream events to the publisher.

پیش نیازها

Before you begin, you need the following:

  • Three empty files:

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

  • Python installed on your computer, or a web server or other hosted development environment to use for testing

Configure a development environment

Since the SDK loads dependencies using the same protocol as the page from which it's loaded, you need to use a web server to test your app. A quick way to start a local development server is to use Python's built-in server.

  1. Using a command line, from the directory that contains your index.html file run:

    python -m http.server 8000

  2. In a web browser, go to http://localhost:8000/

    You can also use any other hosted development environment or web server, such as the Apache HTTP Server .

Create a video player

First, modify dai.html to create a HTML5 video element and a div to use for Ad UI elements. Also add the necessary tags to load the dai.css and dai.js files, as well as to import the hls.js video player.

Then, modify dai.css to specify the size and position of the page elements. Finally, in dai.js , define variables to hold the stream request information and an initPlayer() function to run when the page loads.

The stream request constants are as follows:

  • BACKUP_STREAM : A URL for a backup stream to play in case the ads process encounters a fatal error.

  • STREAM_URL : Only used for livestreams . The video stream URL provided by your manifest manipulator or third-party partner using Pod Serving. It should require you to insert the stream ID provided by the IMA DAI SDK, before you make a request. In this case, the stream URL includes a placeholder, [[STREAMID]] , which is replaced with the stream ID before making a request.

  • NETWORK_CODE : The network code for your Ad Manager 360 account.

  • CUSTOM_ASSET_KEY : Only used for livestreams . The custom asset key that identifies your Pod Serving event in Ad Manager 360. This can be created by your manifest manipulator or third-party Pod Serving partner.

  • API_KEY : Only used for livestreams . An optional API key that can be required to retrieve a stream ID from the 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');
}

Load the IMA DAI SDK

Next, add the DAI framework using a script tag in dai.html , before the tag for 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>
...

Initialize the StreamManager and make a live or VOD stream request

Livestream Pod Serving VOD Pod Serving

In order to request a set of ads, create an ima.dai.api.StreamManager , which is responsible for requesting and managing DAI streams. The constructor takes a video element and the resulting instance takes an ad UI element to handle ad interactions.

Then, define a function to request the Pod Serving livestream. This function first creates a PodStreamRequest , configures it with the streamRequest parameters provided in step 2, and then calls streamManager.requestStream() with that request object.

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);
}

In order to request a set of ads, create an ima.dai.api.StreamManager , which is responsible for requesting and managing DAI streams. The constructor takes a video element and the resulting instance takes an ad UI element to handle ad interactions.

Then, define a function to request the Pod Serving VOD stream. This function first creates a PodVodStreamRequest , configures it with the streamRequest parameters provided in step 2, and then calls streamManager.requestStream() with that request object.

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);
}

Handle stream events

Livestream Pod Serving VOD Pod Serving

Next, implement event listeners for major video events. This example handles the STREAM_INITIALIZED , ERROR , AD_BREAK_STARTED and AD_BREAK_ENDED events by calling an onStreamEvent() function. This function handles stream loading and errors, as well as disabling the player controls while an ad is playing, which is required by the SDK. When the stream is loaded, the video player loads and plays the provided URL using a loadStream() function.

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);
}

Next, implement event listeners for major video events. This example handles the STREAM_INITIALIZED , LOADED , ERROR , AD_BREAK_STARTED and AD_BREAK_ENDED events by calling an onStreamEvent() function. This function handles stream loading and errors, as well as disabling the player controls while an ad is playing, which is required by the SDK.

In addition, VOD Pod Serving streams require calling StreamManager.loadStreamMetadata() in response to the to the STREAM_INITIALIZED event. You also need to request a stream URL from your, video technology partner (VTP). Once the loadStreamMetadata() call succeeds it triggers a LOADED event, where you should call a loadStream() function with your stream URL to load and play the stream. 

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);
}

Handle stream metadata

In this step you implement event listeners for metadata to notify the SDK when ad events occur. Listening for in-stream metadata events can vary, depending on the stream format (HLS or DASH), the stream type (Live or VOD stream), your player type, and the type of DAI backend being used. See our Timed Metadata guide for more information.

HLS stream format (Live and VOD streams, HLS.js player)

If you are using an HLS.js player, listen to the HLS.js FRAG_PARSING_METADATA event to get ID3 metadata and pass it to the SDK with StreamManager.processMetadata() .

To automatically play the video after everything is loaded and ready, listen to the HLS.js MANIFEST_PARSED event to trigger playback. 

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 streams format, Live and VOD stream type)

If you are using a DASH.js player, you have to use different strings to listen for ID3 metadata for Live or VOD streams:

  • Livestreams: 'https://developer.apple.com/streaming/emsg-id3'
  • VOD streams: 'urn:google:dai:2018'

Pass the ID3 metadata to the SDK with StreamManager.processMetadata() .

To automatically show the video controls after everything is loaded and ready, listen to the DASH.js MANIFEST_LOADED event. 

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 with livestreams (DASH streams format)

If you are using Shaka player for livestream playback, use the string 'emsg' to listen for metadata events. Then, use the event message data in your call to 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 with VOD streams (DASH streams format)

If you are using Shaka player for VOD stream playback, use the string 'timelineregionenter' to listen for metadata events. Then, use the event message data in your call to StreamManager.processMetadata() with the string '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);
       }
}

Handle player events

Add event listeners to the video element's pause and start events to allow the user to resume playback when the SDK pauses during ad breaks. 

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';
  }
}

Clean up IMA DAI assets

When you have successfully finished requesting and displaying ads in a Pod Serving stream with IMA DAI SDK, we suggest you clean up any resources after the Pod Serving session is complete. Call StreamManager.destroy() to stop stream playback, stop all ad tracking, and release all of the loaded stream assets.

To learn about more advanced SDK features, see the other guides or the samples on GitHub .