این صفحه به‌وسیله ‏Cloud Translation API‏ ترجمه شده است.

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

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

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

خدمات کامل DAI

این راهنما نحوه ادغام IMA DAI SDK را در یک برنامه پخش کننده ویدیوی ساده نشان می دهد. اگر می‌خواهید نمونه یکپارچه‌سازی کامل شده را مشاهده یا دنبال کنید، نمونه ساده را از GitHub دانلود کنید.

نمای کلی IMA DAI

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

StreamRequest — یک VODStreamRequest یا یک LiveStreamRequest : یک شی که یک درخواست جریان را تعریف می کند. درخواست‌های جریان می‌تواند برای ویدیوی درخواستی یا پخش مستقیم باشد. درخواست‌های پخش زنده یک کلید دارایی را مشخص می‌کنند، در حالی که درخواست‌های VOD یک شناسه CMS و شناسه ویدیو را مشخص می‌کنند. هر دو نوع درخواست می‌توانند به صورت اختیاری شامل یک کلید API مورد نیاز برای دسترسی به جریان‌های مشخص شده، و یک کد شبکه Google Ad Manager برای IMA SDK برای مدیریت شناسه‌های تبلیغاتی که در تنظیمات Google Ad Manager مشخص شده‌اند، باشند.
StreamManager : شیئی که جریانهای درج آگهی پویا و تعاملات با باطن DAI را مدیریت می کند. مدیر جریان همچنین پینگ‌های ردیابی را مدیریت می‌کند و جریان‌ها و رویدادهای تبلیغاتی را به ناشر ارسال می‌کند.

پیش نیازها

سه فایل خالی
- dai.html
- dai.css
- dai.js
پایتون بر روی رایانه شما نصب شده یا یک وب سرور برای آزمایش استفاده کنید

یک سرور توسعه راه اندازی کنید

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

با استفاده از یک خط فرمان، از دایرکتوری که حاوی فایل index.html شما است، اجرا کنید:
```
python -m http.server 8000
```
توجه: http.server فقط در پایتون 3.x موجود است.
در یک مرورگر وب، به http://localhost:8000/ بروید
همچنین می توانید از هر وب سرور دیگری مانند Apache HTTP Server استفاده کنید.

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

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

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 DAI 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'

// Livestream asset key.
var TEST_ASSET_KEY = "sN_IYUG8STe1ZzhIIE_ksA";

// VOD content source and video IDs.
var TEST_CONTENT_SOURCE_ID = "2548831";
var TEST_VIDEO_ID = "tears-of-steel";

// Ad Manager network code.
var NETWORK_CODE = 'NETWORK_CODE';

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

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

IMA DAI SDK را بارگیری کنید

سپس، چارچوب IMA را با استفاده از یک تگ اسکریپت در 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 را راه‌اندازی کنید و درخواست استریم کنید

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

سپس، توابعی را تعریف کنید که درخواست جریان دارند. این مثال شامل توابعی هم برای VOD و هم برای پخش زنده است که به ترتیب نمونه هایی از VODStreamRequest و LiveStreamRequest را ایجاد می کنند و سپس streamManager.requestStream() را با پارامترهای streamRequest فراخوانی می کنند. برای پخش زنده، همچنین باید یک کنترلر اضافه کنید تا به رویدادهای فراداده زمان‌بندی‌شده گوش داده و رویدادها را به StreamManager ارسال کنید. می‌توانید کد را نظر دهید یا آن را لغو نظر کنید تا مناسب مورد استفاده شما باشد. هر دو روش یک کلید API اختیاری می گیرند. اگر از یک جریان محافظت شده استفاده می کنید، باید یک کلید تأیید اعتبار DAI ایجاد کنید .

هیچ یک از جریان‌ها در این مثال محافظت نمی‌شوند، بنابراین apiKey استفاده نمی‌شود.

dai.js

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

  // Timed metadata is only used for LIVE streams.
  hls.on(Hls.Events.FRAG_PARSING_METADATA, function(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(function(sample) {
        streamManager.processMetadata('ID3', sample.data, sample.pts);
      });
    }
  });

  requestVODStream(TEST_CONTENT_SOURCE_ID, TEST_VIDEO_ID, null, NETWORK_CODE);
  // Uncomment the line below and comment out the one above to request a
  // LIVE stream instead of a VOD stream.
  //requestLiveStream(TEST_ASSET_KEY, null, NETWORK_CODE);
}

function requestVODStream(cmsId, videoId, apiKey, networkCode) {
  var streamRequest = new google.ima.dai.api.VODStreamRequest();
  streamRequest.contentSourceId = cmsId;
  streamRequest.videoId = videoId;
  streamRequest.apiKey = apiKey;
  streamRequest.networkCode = networkCode;
  streamManager.requestStream(streamRequest);
}

function requestLiveStream(assetKey, apiKey, networkCode) {
  var streamRequest = new google.ima.dai.api.LiveStreamRequest();
  streamRequest.assetKey = assetKey;
  streamRequest.apiKey = apiKey;
  streamRequest.networkCode = networkCode;
  streamManager.requestStream(streamRequest);
}

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

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

همچنین ممکن است بخواهید شنونده‌های رویداد را برای pause عنصر ویدیو تنظیم کنید و رویدادها را start تا به کاربر اجازه دهد وقتی IMA در طول وقفه‌های تبلیغاتی متوقف می‌شود، پخش را از سر بگیرد.

برای کار با DAI، پخش‌کننده سفارشی شما باید رویدادهای ID3 را برای پخش زنده به کیت‌های توسعه نرم‌افزار IMA DAI ارسال کند، همانطور که در کد نمونه نشان داده شده است.

dai.js

var isAdBreak;

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

  streamManager.addEventListener(
    [google.ima.dai.api.StreamEvent.Type.LOADED,
     google.ima.dai.api.StreamEvent.Type.ERROR,
     google.ima.dai.api.StreamEvent.Type.AD_BREAK_STARTED,
     google.ima.dai.api.StreamEvent.Type.AD_BREAK_ENDED],
    onStreamEvent,
    false);
...
function onStreamEvent(e) {
  switch (e.type) {
    case google.ima.dai.api.StreamEvent.Type.LOADED:
      console.log('Stream loaded');
      loadUrl(e.getStreamData().url);
      break;
    case google.ima.dai.api.StreamEvent.Type.ERROR:
      console.log('Error loading stream, playing backup stream.' + e);
      loadUrl(BACKUP_STREAM);
      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 loadUrl(url) {
  console.log('Loading:' + url);
  hls.loadSource(url);
  hls.attachMedia(videoElement);
  hls.on(Hls.Events.MANIFEST_PARSED, function() {
    console.log('Video Play');
    videoElement.play();
  });
}

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 هستید. برای آشنایی با ویژگی‌های پیشرفته‌تر SDK، به سایر راهنماها یا نمونه‌های موجود در GitHub مراجعه کنید.

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

خدمات کامل DAI

نمای کلی IMA DAI

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

StreamRequest — یک VODStreamRequest یا یک LiveStreamRequest : یک شی که یک درخواست جریان را تعریف می کند. درخواست‌های جریان می‌تواند برای ویدیوی درخواستی یا پخش مستقیم باشد. درخواست‌های پخش زنده یک کلید دارایی را مشخص می‌کنند، در حالی که درخواست‌های VOD یک شناسه CMS و شناسه ویدیو را مشخص می‌کنند. هر دو نوع درخواست می‌توانند به صورت اختیاری شامل یک کلید API مورد نیاز برای دسترسی به جریان‌های مشخص شده، و یک کد شبکه Google Ad Manager برای IMA SDK برای مدیریت شناسه‌های تبلیغاتی که در تنظیمات Google Ad Manager مشخص شده‌اند، باشند.
StreamManager : شیئی که جریانهای درج آگهی پویا و تعاملات با باطن DAI را مدیریت می کند. مدیر جریان همچنین پینگ‌های ردیابی را مدیریت می‌کند و جریان‌ها و رویدادهای تبلیغاتی را به ناشر ارسال می‌کند.

پیش نیازها

سه فایل خالی
- dai.html
- dai.css
- dai.js
پایتون بر روی رایانه شما نصب شده یا یک وب سرور برای آزمایش استفاده کنید

یک سرور توسعه راه اندازی کنید

با استفاده از یک خط فرمان، از دایرکتوری که حاوی فایل index.html شما است، اجرا کنید:
```
python -m http.server 8000
```
توجه: http.server فقط در پایتون 3.x موجود است.
در یک مرورگر وب، به http://localhost:8000/ بروید
همچنین می توانید از هر وب سرور دیگری مانند Apache HTTP Server استفاده کنید.

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

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 DAI 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'

// Livestream asset key.
var TEST_ASSET_KEY = "sN_IYUG8STe1ZzhIIE_ksA";

// VOD content source and video IDs.
var TEST_CONTENT_SOURCE_ID = "2548831";
var TEST_VIDEO_ID = "tears-of-steel";

// Ad Manager network code.
var NETWORK_CODE = 'NETWORK_CODE';

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

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

IMA DAI SDK را بارگیری کنید

سپس، چارچوب IMA را با استفاده از یک تگ اسکریپت در 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 را راه‌اندازی کنید و درخواست استریم کنید

هیچ یک از جریان‌ها در این مثال محافظت نمی‌شوند، بنابراین apiKey استفاده نمی‌شود.

dai.js

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

  // Timed metadata is only used for LIVE streams.
  hls.on(Hls.Events.FRAG_PARSING_METADATA, function(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(function(sample) {
        streamManager.processMetadata('ID3', sample.data, sample.pts);
      });
    }
  });

  requestVODStream(TEST_CONTENT_SOURCE_ID, TEST_VIDEO_ID, null, NETWORK_CODE);
  // Uncomment the line below and comment out the one above to request a
  // LIVE stream instead of a VOD stream.
  //requestLiveStream(TEST_ASSET_KEY, null, NETWORK_CODE);
}

function requestVODStream(cmsId, videoId, apiKey, networkCode) {
  var streamRequest = new google.ima.dai.api.VODStreamRequest();
  streamRequest.contentSourceId = cmsId;
  streamRequest.videoId = videoId;
  streamRequest.apiKey = apiKey;
  streamRequest.networkCode = networkCode;
  streamManager.requestStream(streamRequest);
}

function requestLiveStream(assetKey, apiKey, networkCode) {
  var streamRequest = new google.ima.dai.api.LiveStreamRequest();
  streamRequest.assetKey = assetKey;
  streamRequest.apiKey = apiKey;
  streamRequest.networkCode = networkCode;
  streamManager.requestStream(streamRequest);
}

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

برای همکاری با DAI ، بازیکن سفارشی شما باید رویدادهای ID3 را برای Livestreams به SDK های IMA DAI منتقل کند ، همانطور که در کد نمونه نشان داده شده است.

dai.js

var isAdBreak;

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

  streamManager.addEventListener(
    [google.ima.dai.api.StreamEvent.Type.LOADED,
     google.ima.dai.api.StreamEvent.Type.ERROR,
     google.ima.dai.api.StreamEvent.Type.AD_BREAK_STARTED,
     google.ima.dai.api.StreamEvent.Type.AD_BREAK_ENDED],
    onStreamEvent,
    false);
...
function onStreamEvent(e) {
  switch (e.type) {
    case google.ima.dai.api.StreamEvent.Type.LOADED:
      console.log('Stream loaded');
      loadUrl(e.getStreamData().url);
      break;
    case google.ima.dai.api.StreamEvent.Type.ERROR:
      console.log('Error loading stream, playing backup stream.' + e);
      loadUrl(BACKUP_STREAM);
      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 loadUrl(url) {
  console.log('Loading:' + url);
  hls.loadSource(url);
  hls.attachMedia(videoElement);
  hls.on(Hls.Events.MANIFEST_PARSED, function() {
    console.log('Video Play');
    videoElement.play();
  });
}

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 درخواست تبلیغات و نمایش می دهید. برای کسب اطلاعات در مورد ویژگی های پیشرفته SDK ، راهنماهای دیگر یا نمونه های موجود در GitHub را ببینید.

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

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

خدمات کامل DAI

این راهنما نحوه ادغام IMA DAI SDK را در یک برنامه پخش کننده ویدیویی ساده نشان می دهد. اگر می خواهید با یک ادغام نمونه کامل مشاهده یا دنبال کنید ، مثال ساده را از GitHub بارگیری کنید.

بررسی اجمالی ایما دای

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

StreamRequest - یا یک VODStreamRequest یا LiveStreamRequest : شیئی که یک درخواست جریان را تعریف می کند. درخواست های جریان می تواند برای جریان های ویدئویی بر روی تقاضا یا پخش مستقیم باشد. درخواست های جریان مستقیم یک کلید دارایی را مشخص می کند ، در حالی که درخواست های VOD یک شناسه CMS و شناسه ویدیویی را مشخص می کنند. هر دو نوع درخواست می توانند به صورت اختیاری شامل یک کلید API مورد نیاز برای دسترسی به جریان های مشخص شده باشند ، و یک کد شبکه Google Ad Manager برای IMA SDK برای کنترل شناسه های تبلیغاتی همانطور که در تنظیمات Google Ad Manager مشخص شده است.
StreamManager : شیئی که جریان های دینامیکی درج و تعامل با پس زمینه DAI را کنترل می کند. مدیر جریان همچنین پیگیری های ردیابی و رویدادهای جریان و پیش رو به ناشر را کنترل می کند.

پیش نیازها

سه پرونده خالی
- dai.html
- dai.css
- dai.js
پایتون روی رایانه شما نصب شده است ، یا یک سرور وب برای استفاده برای آزمایش

یک سرور توسعه را شروع کنید

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

با استفاده از یک خط فرمان ، از دایرکتوری که حاوی index.html شما است اجرا کنید:
```
python -m http.server 8000
```
توجه: http.server فقط در Python 3.x موجود است.
در یک مرورگر وب ، به http://localhost:8000/ بروید
همچنین می توانید از هر سرور وب دیگر مانند سرور Apache HTTP استفاده کنید.

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

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

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 DAI 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'

// Livestream asset key.
var TEST_ASSET_KEY = "sN_IYUG8STe1ZzhIIE_ksA";

// VOD content source and video IDs.
var TEST_CONTENT_SOURCE_ID = "2548831";
var TEST_VIDEO_ID = "tears-of-steel";

// Ad Manager network code.
var NETWORK_CODE = 'NETWORK_CODE';

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

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

IMA Dai SDK را بارگیری کنید

در مرحله بعد ، قبل از برچسب برای dai.js ، چارچوب IMA را با استفاده از یک برچسب اسکریپت در 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 را اولیه کنید و درخواست جریان کنید

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

سپس توابع درخواست جریان را تعریف کنید. این مثال شامل توابع برای هر دو VOD و LIVESTREAMS است که به ترتیب موارد VODStreamRequest و LiveStreamRequest را ایجاد می کنند و سپس با پارامترهای streamRequest تماس می گیرند. streamManager.requestStream() . برای Livestreams ، شما همچنین باید یک کنترل کننده را برای گوش دادن به رویدادهای ابرداده به موقع اضافه کنید و وقایع را به StreamManager منتقل کنید. می توانید کد را متناسب با پرونده استفاده خود اظهار نظر یا نادیده بگیرید. هر دو روش از یک کلید API اختیاری استفاده می کنند. اگر از یک جریان محافظت شده استفاده می کنید ، باید یک کلید احراز هویت DAI ایجاد کنید .

هیچ یک از جریان در این مثال محافظت نمی شود ، بنابراین apiKey استفاده نمی شود.

dai.js

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

  // Timed metadata is only used for LIVE streams.
  hls.on(Hls.Events.FRAG_PARSING_METADATA, function(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(function(sample) {
        streamManager.processMetadata('ID3', sample.data, sample.pts);
      });
    }
  });

  requestVODStream(TEST_CONTENT_SOURCE_ID, TEST_VIDEO_ID, null, NETWORK_CODE);
  // Uncomment the line below and comment out the one above to request a
  // LIVE stream instead of a VOD stream.
  //requestLiveStream(TEST_ASSET_KEY, null, NETWORK_CODE);
}

function requestVODStream(cmsId, videoId, apiKey, networkCode) {
  var streamRequest = new google.ima.dai.api.VODStreamRequest();
  streamRequest.contentSourceId = cmsId;
  streamRequest.videoId = videoId;
  streamRequest.apiKey = apiKey;
  streamRequest.networkCode = networkCode;
  streamManager.requestStream(streamRequest);
}

function requestLiveStream(assetKey, apiKey, networkCode) {
  var streamRequest = new google.ima.dai.api.LiveStreamRequest();
  streamRequest.assetKey = assetKey;
  streamRequest.apiKey = apiKey;
  streamRequest.networkCode = networkCode;
  streamManager.requestStream(streamRequest);
}

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

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

همچنین ممکن است بخواهید شنوندگان رویداد را برای pause عنصر ویدیویی تنظیم کنید و رویدادها را start تا کاربر بتواند هنگام مکث IMA در هنگام استراحت ، پخش را از سر بگیرد.

dai.js

var isAdBreak;

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

  streamManager.addEventListener(
    [google.ima.dai.api.StreamEvent.Type.LOADED,
     google.ima.dai.api.StreamEvent.Type.ERROR,
     google.ima.dai.api.StreamEvent.Type.AD_BREAK_STARTED,
     google.ima.dai.api.StreamEvent.Type.AD_BREAK_ENDED],
    onStreamEvent,
    false);
...
function onStreamEvent(e) {
  switch (e.type) {
    case google.ima.dai.api.StreamEvent.Type.LOADED:
      console.log('Stream loaded');
      loadUrl(e.getStreamData().url);
      break;
    case google.ima.dai.api.StreamEvent.Type.ERROR:
      console.log('Error loading stream, playing backup stream.' + e);
      loadUrl(BACKUP_STREAM);
      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 loadUrl(url) {
  console.log('Loading:' + url);
  hls.loadSource(url);
  hls.attachMedia(videoElement);
  hls.on(Hls.Events.MANIFEST_PARSED, function() {
    console.log('Video Play');
    videoElement.play();
  });
}

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 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

Full service DAI

This guide demonstrates how to integrate the IMA DAI SDK into a simple video player app. If you would like to view or follow along with a completed sample integration, download the simple example from GitHub.

IMA DAI overview

Implementing the IMA DAI SDK involves two main components as demonstrated in this guide:

StreamRequest — either a VODStreamRequest or a LiveStreamRequest : An object that defines a stream request. Stream requests can either be for video-on-demand or live streams. Live stream requests specify an asset key, while VOD requests specify a CMS ID and video ID. Both request types can optionally include an API key needed to access specified streams, and a Google Ad Manager network code for the IMA SDK to handle ads identifiers as specified in Google Ad Manager settings.
StreamManager : An object that handles dynamic ad insertion streams and interactions with the DAI backend. The stream manager also handles tracking pings and forwards stream and ad events to the publisher.

پیش نیازها

Three empty files
- dai.html
- dai.css
- dai.js
Python installed on your computer, or a web server to use for testing

Start a development server

Since the IMA DAI 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.

Using a command line, from the directory that contains your index.html file run:
```
python -m http.server 8000
```
Note: http.server is only available in Python 3.x.
In a web browser, go to to http://localhost:8000/
You can also use any other web server, such as the Apache HTTP Server .

Create a simple video player

First, modify dai.html to create a simple HTML5 video element and a div to use for the clickthrough. 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.

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 DAI 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'

// Livestream asset key.
var TEST_ASSET_KEY = "sN_IYUG8STe1ZzhIIE_ksA";

// VOD content source and video IDs.
var TEST_CONTENT_SOURCE_ID = "2548831";
var TEST_VIDEO_ID = "tears-of-steel";

// Ad Manager network code.
var NETWORK_CODE = 'NETWORK_CODE';

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

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

Load the IMA DAI SDK

Next, add the IMA 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 stream request

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 clicks.

Then, define functions that request streams. This example includes functions for both VOD and livestreams, which create instances of VODStreamRequest and LiveStreamRequest , respectively, and then call streamManager.requestStream() with the streamRequest parameters. For livestreams, you also need to add a handler to listen to timed metadata events and forward the events to the StreamManager . You can comment or uncomment the code to fit your use case. Both methods take an optional API key. If you're using a protected stream, you need to create a DAI authentication key .

Neither stream in this example is protected, so apiKey is not used.

dai.js

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

  // Timed metadata is only used for LIVE streams.
  hls.on(Hls.Events.FRAG_PARSING_METADATA, function(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(function(sample) {
        streamManager.processMetadata('ID3', sample.data, sample.pts);
      });
    }
  });

  requestVODStream(TEST_CONTENT_SOURCE_ID, TEST_VIDEO_ID, null, NETWORK_CODE);
  // Uncomment the line below and comment out the one above to request a
  // LIVE stream instead of a VOD stream.
  //requestLiveStream(TEST_ASSET_KEY, null, NETWORK_CODE);
}

function requestVODStream(cmsId, videoId, apiKey, networkCode) {
  var streamRequest = new google.ima.dai.api.VODStreamRequest();
  streamRequest.contentSourceId = cmsId;
  streamRequest.videoId = videoId;
  streamRequest.apiKey = apiKey;
  streamRequest.networkCode = networkCode;
  streamManager.requestStream(streamRequest);
}

function requestLiveStream(assetKey, apiKey, networkCode) {
  var streamRequest = new google.ima.dai.api.LiveStreamRequest();
  streamRequest.assetKey = assetKey;
  streamRequest.apiKey = apiKey;
  streamRequest.networkCode = networkCode;
  streamManager.requestStream(streamRequest);
}

Handle stream events

Finally, you need to implement event listeners for major video events. This simple example handles the 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. When the stream is loaded, the video player loads and plays the provided URL using a loadUrl() function.

You might also want to set up event listeners for the video element's pause and start events to allow the user to resume playback when the IMA pauses during ad breaks.

To work with DAI, your custom player must pass ID3 events for livestreams to the IMA DAI SDKs as shown in the sample code.

dai.js

var isAdBreak;

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

  streamManager.addEventListener(
    [google.ima.dai.api.StreamEvent.Type.LOADED,
     google.ima.dai.api.StreamEvent.Type.ERROR,
     google.ima.dai.api.StreamEvent.Type.AD_BREAK_STARTED,
     google.ima.dai.api.StreamEvent.Type.AD_BREAK_ENDED],
    onStreamEvent,
    false);
...
function onStreamEvent(e) {
  switch (e.type) {
    case google.ima.dai.api.StreamEvent.Type.LOADED:
      console.log('Stream loaded');
      loadUrl(e.getStreamData().url);
      break;
    case google.ima.dai.api.StreamEvent.Type.ERROR:
      console.log('Error loading stream, playing backup stream.' + e);
      loadUrl(BACKUP_STREAM);
      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 loadUrl(url) {
  console.log('Loading:' + url);
  hls.loadSource(url);
  hls.attachMedia(videoElement);
  hls.on(Hls.Events.MANIFEST_PARSED, function() {
    console.log('Video Play');
    videoElement.play();
  });
}

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

همین! You're now requesting and displaying ads with the IMA DAI SDK. To learn about more advanced SDK features, see the other guides or the samples on GitHub .