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

پلتفرم مورد نظر را انتخاب کنید: HTML5 اندروید iOS tvOS Cast Roku

کیت‌های توسعه نرم‌افزار IMA ادغام تبلیغات چندرسانه‌ای را در وب‌سایت‌ها و برنامه‌های شما آسان می‌کنند. کیت‌های توسعه نرم‌افزار IMA می‌توانند از هر سرور تبلیغاتی سازگار با VAST درخواست تبلیغات کنند و پخش تبلیغات را در برنامه‌های شما مدیریت کنند. با کیت‌های توسعه نرم‌افزار IMA DAI، برنامه‌ها درخواست پخش جریانی برای تبلیغات و ویدیوی محتوا - چه 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
    • دای.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 را وارد می‌کند. برای جزئیات بیشتر، به Import the 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

بارگیری SDK مربوط به IMA DAI

سپس، فریم‌ورک IMA را با استفاده از تگ script در 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() {
  // 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 برای پخش جریانی استفاده می‌کند، اما پیاده‌سازی متادیتای شما به نوع پخش‌کننده‌ای که استفاده می‌کنید بستگی دارد.

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

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

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

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