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

سرویس کامل سرو غلافAPI دوخت ابری، API دوخت ابری زنده، VOD

پخش جریان‌های VOD ثبت‌شده در Google Cloud Video Stitcher API

این راهنما نحوه استفاده از IMA DAI SDK برای HTML5 را برای درخواست و پخش یک جلسه پخش جریانی Google Cloud VOD نشان می‌دهد.

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

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

برای مشاهده یا دنبال کردن یک نمونه تکمیل‌شده از یکپارچه‌سازی، نمونه Cloud video stitcher را برای HLS یا DASH دانلود کنید.

توجه: کیت توسعه نرم‌افزار IMA DAI برای HTML5 از هر دو جریان HLS و DASH پشتیبانی می‌کند، اما پخش هر کدام به پخش‌کننده رسانه یا افزونه متفاوتی مانند HLS.js یا DASH.js با پیاده‌سازی‌های متفاوت نیاز دارد.

این راهنما نحوه پیکربندی HLS.js و IMA DAI SDK را برای پخش یک جریان HLS توضیح می‌دهد، و نکات مهمی در مورد تفاوت‌های پیاده‌سازی برای DASH نیز در آن ذکر شده است.

برای شروع پیاده‌سازی استریم‌های DASH DAI با IMA، به نمونه برنامه IMA DASH.js مراجعه کنید.

راه‌اندازی یک پروژه گوگل کلود

یک پروژه Google Cloud راه‌اندازی کنید و حساب‌های سرویس را برای دسترسی به پروژه پیکربندی کنید .

متغیرهای زیر را برای استفاده در IMA SDK وارد کنید:

مکان

منطقه Google Cloud که پیکربندی VOD شما در آن ایجاد شده است: LOCATION

شماره پروژه

شماره پروژه گوگل کلود با استفاده از رابط برنامه‌نویسی کاربردی Video Stitcher: PROJECT_NUMBER

توکن OAuth

توکن OAuth کوتاه‌مدت یک حساب کاربری سرویس با نقش کاربری Video Stitcher:

OAUTH_TOKEN

درباره ایجاد توکن‌های OAuth با عمر کوتاه بیشتر بخوانید. توکن OAuth تا زمانی که منقضی نشده باشد، می‌تواند در چندین درخواست دوباره استفاده شود.

کد شبکه

کد شبکه مدیریت تبلیغات برای درخواست تبلیغات: NETWORK_CODE

شناسه پیکربندی VOD

شناسه پیکربندی VOD برای جریان VOD: VOD_CONFIG_ID

برای اطلاعات بیشتر در مورد ایجاد شناسه پیکربندی VOD ، به راهنمای ایجاد پیکربندی VOD در Cloud stitching مراجعه کنید.

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

نکته کلیدی: کلاس IMA DAI VideoStitcherVodStreamRequest از هر دو نوع استریم HLS و استریم‌های DASH چند دوره‌ای پشتیبانی می‌کند. تبلیغات فقط بین دوره‌های DASH درج می‌شوند.

برنامه‌های نمونه IMA فقط درخواست‌های پخش HLS را نشان می‌دهند. شما همچنان می‌توانید هنگام ساخت کلاس VideoStitcherVodStreamRequest از پخش‌های DASH استفاده کنید. هنگام تنظیم پخش‌کننده سازگار با DASH، باید یک شنونده برای رویدادهای پیشرفت پخش‌کننده ویدیوی خود تنظیم کنید که بتواند فراداده‌های ویدیو را به StreamManager.processMetadata() ارائه دهد. این تابع سه پارامتر می‌گیرد:

1. type : رشته‌ای که باید برای جریان‌های HLS روی 'ID3' و برای جریان‌های DASH 'urn:google:dai:2018' تنظیم شود.

2. data : برای پیام‌های رویداد DASH، این رشته داده پیام است.

3. timestamp : عددی که زمان شروع پیام رویداد برای جریان‌های DASH است.

فراداده‌ها را در اسرع وقت و به دفعاتی که رویدادهای بازیکن شما می‌توانند ارائه دهند، ارسال کنید. اگر فراداده‌ها وجود نداشته باشند یا صحیح نباشند، ممکن است IMA DAI SDK رویدادهای تبلیغاتی را فعال نکند و منجر به گزارش نادرست رویدادهای تبلیغاتی شود.

نمونه‌های IMA DAI برای HTML5 را دانلود کنید و فایل زیپ نمونه hls_js/simple را در یک پوشه جدید استخراج کنید. این مثال یک برنامه وب است که می‌توانید آن را به صورت محلی برای اهداف آزمایشی میزبانی کنید.

برای میزبانی مثال به صورت محلی، به پوشه جدید بروید و دستور پایتون زیر را برای شروع یک وب سرور اجرا کنید:

python3 -m http.server 8000

http.server فقط در پایتون ۳.x موجود است. می‌توانید از هر وب سرور دیگری مانند Apache HTTP Server یا Node JS استفاده کنید.

یک مرورگر وب باز کنید و برای دیدن پخش‌کننده ویدیو به localhost:8000 بروید. مرورگر شما باید از کتابخانه HLS.js پشتیبانی کند.

اگر همه چیز درست کار کند، با کلیک بر روی دکمه پخش در پخش کننده ویدیو، فیلم کوتاه «اشک‌های فولاد» شروع می‌شود و هر 30 ثانیه یک بار تبلیغات نمایش داده می‌شود.

درخواست پخش VOD

برای جایگزینی جریان نمونه با جریان VOD ادغام‌شده با تبلیغات خود، از کلاس VideoStitcherVodStreamRequest برای ایجاد خودکار یک جلسه تبلیغاتی با Google Ad Manager استفاده کنید. می‌توانید از رابط کاربری Google Ad Manager برای یافتن جلسات DAI تولید شده برای نظارت و اشکال‌زدایی استفاده کنید.

در نمونه موجود، توابعی برای درخواست پخش VOD یا پخش زنده وجود دارد. برای اینکه با Google Cloud Video Stitcher API کار کند، باید یک تابع جدید برای برگرداندن شیء VideoStitcherVodStreamRequest اضافه کنید.

در اینجا یک مثال آورده شده است:

// StreamManager which will be used to request DAI streams.
let streamManager;
...

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

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

  videoElement.addEventListener('pause', () => {
    playButton.style.display = "block";
  });

  playButton.addEventListener('click', initiatePlayback);
}

function initiatePlayback() {
  requestVodVideoStitcherStream();

  playButton.style.display = "none";
  playButton.removeEventListener('click', initiatePlayback);
  playButton.addEventListener('click', resumePlayback);
}
...
function requestVodVideoStitcherStream() {
  const streamRequest = new google.ima.dai.api.VideoStitcherVodStreamRequest();
  streamRequest.vodConfigId = 'VOD_CONFIG_ID';
  streamRequest.region = 'LOCATION';
  streamRequest.projectNumber = 'PROJECT_NUMBER';
  streamRequest.oAuthToken = 'OAUTH_TOKEN';
  streamRequest.networkCode = 'NETWORK_CODE';

  streamManager.requestStream(streamRequest);
}

صفحه را دوباره بارگذاری کنید. سپس، می‌توانید پخش VOD سفارشی را درخواست و پخش کنید.

(اختیاری) گزینه‌های جلسه پخش جریانی را اضافه کنید

درخواست پخش خود را با اضافه کردن گزینه‌های جلسه برای لغو پیکربندی پیش‌فرض Cloud Video Stitcher API با استفاده از VideoStitcherVodStreamRequest.videoStitcherSessionOptions سفارشی کنید. اگر گزینه‌ای ناشناخته ارائه دهید، Cloud Video Stitcher API با خطای HTTP 400 پاسخ خواهد داد. برای کمک به راهنمای عیب‌یابی مراجعه کنید.

برای مثال، می‌توانید گزینه‌های مانیفست را با قطعه کد زیر لغو کنید، که دو مانیفست جریان با ترتیب نمایش از کمترین بیت‌ریت به بیشترین بیت‌ریت را درخواست می‌کند.

...

// The following session options are examples. Use session options
// that are compatible with your video stream.
streamRequest.videoStitcherSessionOptions = {
  "manifestOptions": {
    "bitrateOrder": "ascending"
  }
};

streamManager.requestStream(streamRequest);

تمیز کردن

اکنون که با موفقیت یک جریان VOD را با استفاده از Google Cloud Video Stitcher API میزبانی کرده‌اید و آن را با استفاده از IMA DAI SDK برای HTML5 درخواست کرده‌اید، مهم است که هرگونه منبع سرویس‌دهنده را پاک‌سازی کنید.

برای حذف هرگونه منابع و فایل‌های غیرضروری، راهنمای پاکسازی VOD را دنبال کنید.

در نهایت، در پنجره ترمینال که وب سرور پایتون ۳ را در آن اجرا کردید، از دستور ctrl+C برای پایان دادن به سرور محلی استفاده کنید.