با 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 : یک شی که یک درخواست جریان را تعریف می کند. درخواست‌های جریان می‌تواند برای ویدیوی درخواستی یا پخش مستقیم باشد. درخواست ها یک شناسه محتوا و همچنین یک کلید API یا نشانه احراز هویت و سایر پارامترها را مشخص می کنند.
  • StreamManager : شیئی که جریانهای درج آگهی پویا و تعاملات با باطن DAI را مدیریت می کند. مدیر جریان همچنین پینگ‌های ردیابی را مدیریت می‌کند و جریان‌ها و رویدادهای تبلیغاتی را به ناشر ارسال می‌کند.

پیش نیازها

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

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

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

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

    python -m http.server 8000

  2. در یک مرورگر وب، به 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";

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

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

function requestLiveStream(assetKey, apiKey) {
  var streamRequest = new google.ima.dai.api.LiveStreamRequest();
  streamRequest.assetKey = assetKey;
  streamRequest.apiKey = apiKey;
  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 مراجعه کنید.