راه اندازی IMA SDK برای DAI، راه اندازی IMA SDK برای DAI، راه اندازی IMA SDK برای DAI، راه اندازی IMA SDK برای DAI

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 وابستگی ها را با استفاده از همان پروتکل صفحه ای که از آن بارگیری شده بارگیری می کند، باید از یک وب سرور برای آزمایش برنامه خود استفاده کنید. یک راه سریع برای راه اندازی سرور توسعه محلی استفاده از سرور داخلی پایتون است.

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

    python -m http.server 8000

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

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

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

ابتدا، dai.html را تغییر دهید تا یک عنصر ویدیویی HTML5 و یک div برای استفاده از کلیک ایجاد کنید. مثال زیر IMA DAI SDK را وارد می کند. برای جزئیات بیشتر، وارد کردن IMA DAI SDK را ببینید.

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

<html>
<head>
  <script src="https://cdn.jsdelivr.net/npm/hls.js@latest"></script>
  <script src="//imasdk.googleapis.com/js/sdkloader/ima3_dai.js"></script>
  <script src="dai.js"></script>
  <link rel="stylesheet" href="dai.css">
</head>
<body onLoad="initPlayer()">
  <h2>IMA SDK DAI Demo (HLS.JS)</h2>
  <video id="video"></video>
  <div id="adUi"></div>
  <button id="play-button">Play</button>
</body>
</html>


dai.html
#video,
#adUi {
  width: 640px;
  height: 360px;
  position: absolute;
  top: 35px;
  left: 0;
}

#adUi {
  cursor: pointer;
}

#play-button {
  position: absolute;
  top: 400px;
  left: 15px;
}

dai.css
// This stream will be played if ad-enabled playback fails.
const BACKUP_STREAM =
    'http://storage.googleapis.com/testtopbox-public/video_content/bbb/' +
    'master.m3u8';

// Live stream asset key.
// const TEST_ASSET_KEY = 'c-rArva4ShKVIAkNfy6HUQ';

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

// Ad Manager network code.
const NETWORK_CODE = '21775744923';
const API_KEY = null;

// StreamManager which will be used to request ad-enabled streams.
let streamManager;

// hls.js video player
const hls = new Hls();

// Video element
let videoElement;

// Ad UI element
let adUiElement;

// The play/resume button
let playButton;

// Whether the stream is currently in an ad break.
let adBreak = false;

/**
 * Initializes the video player.
 */
function initPlayer() {
  videoElement = document.getElementById('video');
  playButton = document.getElementById('play-button');
  adUiElement = document.getElementById('adUi');
  createStreamManager();
  listenForMetadata();

  // Show the video controls when the video is paused during an ad break,
  // and hide them when ad playback resumes.
  videoElement.addEventListener('pause', () => {
    if (adBreak) {
      showVideoControls();
    }
  });
  videoElement.addEventListener('play', () => {
    if (adBreak) {
      hideVideoControls();
    }
  });

  playButton.addEventListener('click', () => {
    console.log('initiatePlayback');
    requestStream();
    // Hide this play button after the first click to request the stream.
    playButton.style.display = 'none';
  });
}
dai.js

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

/**
 * Hides the video controls.
 */
function hideVideoControls() {
  videoElement.controls = false;
  adUiElement.style.display = 'block';
}

/**
 * Shows the video controls.
 */
function showVideoControls() {
  videoElement.controls = true;
  adUiElement.style.display = 'none';
}
dai.js

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

سپس، چارچوب IMA را با استفاده از یک تگ اسکریپت در dai.html ، قبل از تگ برای dai.js اضافه کنید. 

<script src="//imasdk.googleapis.com/js/sdkloader/ima3_dai.js"></script>
dai.html

StreamManager را راه اندازی کنید

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

/**
 * Create the StreamManager and listen to stream events.
 */
function createStreamManager() {
  streamManager =
      new google.ima.dai.api.StreamManager(videoElement, adUiElement);
  streamManager.addEventListener(
      google.ima.dai.api.StreamEvent.Type.LOADED, onStreamEvent);
  streamManager.addEventListener(
      google.ima.dai.api.StreamEvent.Type.ERROR, onStreamEvent);
  streamManager.addEventListener(
      google.ima.dai.api.StreamEvent.Type.AD_BREAK_STARTED, onStreamEvent);
  streamManager.addEventListener(
      google.ima.dai.api.StreamEvent.Type.AD_BREAK_ENDED, onStreamEvent);
}
dai.js

درخواست پخش جریانی بدهید

تعریف توابع برای درخواست جریان. این مثال شامل توابعی برای VOD و پخش زنده است که نمونه هایی از کلاس VODStreamRequest و کلاس LiveStreamRequest را ایجاد می کند. پس از اینکه نمونه streamRequest خود را داشتید، متد streamManager.requestStream() را با نمونه درخواست جریان فراخوانی کنید. 

/**
 * Makes a stream request and plays the stream.
 */
function requestStream() {
  requestVODStream(TEST_CONTENT_SOURCE_ID, TEST_VIDEO_ID, NETWORK_CODE, API_KEY);
  // Uncomment line below and comment one above to request a LIVE stream.
  // requestLiveStream(TEST_ASSET_KEY, NETWORK_CODE, API_KEY);
}

/**
 * Requests a Live stream with ads.
 * @param {string} assetKey
 * @param {?string} networkCode
 * @param {?string} apiKey
 */
function requestLiveStream(assetKey, networkCode, apiKey) {
  const streamRequest = new google.ima.dai.api.LiveStreamRequest();
  streamRequest.assetKey = assetKey;
  streamRequest.networkCode = networkCode;
  streamRequest.apiKey = apiKey;
  streamManager.requestStream(streamRequest);
}

/**
 * Requests a VOD stream with ads.
 * @param {string} cmsId
 * @param {string} videoId
 * @param {?string} networkCode
 * @param {?string} apiKey
 */
function requestVODStream(cmsId, videoId, networkCode, apiKey) {
  const streamRequest = new google.ima.dai.api.VODStreamRequest();
  streamRequest.contentSourceId = cmsId;
  streamRequest.videoId = videoId;
  streamRequest.networkCode = networkCode;
  streamRequest.apiKey = apiKey;
  streamManager.requestStream(streamRequest);
}
dai.js

هر دو روش درخواست جریان یک کلید API اختیاری می گیرند. اگر از یک جریان محافظت شده استفاده می کنید، باید یک کلید تأیید اعتبار DAI ایجاد کنید. برای جزئیات بیشتر، احراز هویت درخواست‌های جریان ویدیویی DAI را ببینید. هیچ یک از جریان‌ها در این مثال با استفاده از کلید احراز هویت DAI محافظت نمی‌شوند، بنابراین apiKey استفاده نمی‌شود.

تجزیه فراداده جریان (فقط پخش مستقیم)

برای پخش‌های زنده، همچنین باید یک کنترل‌کننده اضافه کنید تا به رویدادهای فراداده زمان‌بندی‌شده گوش دهد و رویدادها را به کلاس StreamManager ارسال کنید تا IMA رویدادهای تبلیغاتی را در طول وقفه‌های تبلیغاتی منتشر کند: 

/**
 * Set up metadata listeners to pass metadata to the StreamManager.
 */
function listenForMetadata() {
  // Only used in LIVE streams. Timed metadata is handled differently
  // by different video players, and the IMA SDK provides two ways
  // to pass in metadata, StreamManager.processMetadata() and
  // StreamManager.onTimedMetadata().
  //
  // Use StreamManager.onTimedMetadata() if your video player parses
  // the metadata itself.
  // Use StreamManager.processMetadata() if your video player provides raw
  // ID3 tags, as with hls.js.
  hls.on(Hls.Events.FRAG_PARSING_METADATA, function(event, data) {
    if (streamManager && data) {
      // For each ID3 tag in our metadata, we 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);
      });
    }
  });
}
dai.js

این راهنما از پخش کننده hls.js برای پخش جریانی استفاده می کند، اما اجرای ابرداده شما به نوع پخش کننده ای که استفاده می کنید بستگی دارد.

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

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

/**
 * Responds to a stream event.
 * @param {!google.ima.dai.api.StreamEvent} e
 */
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');
      adBreak = true;
      hideVideoControls();
      break;
    case google.ima.dai.api.StreamEvent.Type.AD_BREAK_ENDED:
      console.log('Ad Break Ended');
      adBreak = false;
      showVideoControls();
      break;
    default:
      break;
  }
}

/**
 * Loads and plays a Url.
 * @param {string} url
 */
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();
  });
}
dai.js

هنگامی که جریان بارگیری می شود، پخش کننده ویدیو URL ارائه شده را با استفاده از تابع loadUrl() بارگیری و پخش می کند.

همین! اکنون در حال درخواست و نمایش تبلیغات با IMA DAI SDK هستید. برای آشنایی با ویژگی‌های پیشرفته‌تر SDK، به سایر راهنماها یا نمونه‌های موجود در GitHub مراجعه کنید.