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

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

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

سرویس کامل سرو پادCloud stitching API Live Cloud stitching API VOD

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

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

این راهنما مثال اصلی را از راهنمای شروع برای IMA DAI گسترش می دهد.

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

برای مشاهده یا دنبال کردن یک نمونه ادغام کامل، نمونه دوخت ویدیوی Cloud را برای HLS یا DASH دانلود کنید.

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

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

برنامه نمونه IMA DASH.js را برای نقطه شروع پیاده سازی جریان های DASH DAI با IMA ببینید.

یک پروژه Google Cloud راه اندازی کنید

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

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

مکان

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

شماره پروژه

شماره پروژه Google Cloud با استفاده از Video Stitcher API: PROJECT_NUMBER

نشانه OAuth

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

OAUTH_TOKEN

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

کد شبکه

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

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

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

درباره ایجاد شناسه پیکربندی VOD در Cloud stitching بیشتر بخوانید. راهنمای پیکربندی VOD ایجاد کنید .

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

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

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

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

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

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

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

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

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

python3 -m http.server 8000

http.server فقط در پایتون 3.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 سفارشی را درخواست و پخش کنید.

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

با افزودن گزینه‌های جلسه برای لغو تنظیمات API پیش‌فرض Cloud Video Stitcher با استفاده از 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": {
    "includeRenditions": [
      {"bitrateBps": 3000, "codecs": "hvc1.1.4.L126.B0, mp4a.40.2"},
      {"bitrateBps": 2000, "codecs": "avc1.64001f, mp4a.40.2"},
    ],
    "bitrateOrder": "ascending"
  }
};

streamManager.requestStream(streamRequest);

پاک کن

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

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

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