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

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

var isAdBreak;

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.STREAM_INITIALIZED,
    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.STREAM_INITIALIZED:
      console.log('Stream initialized');
      loadStream(e.getStreamData().streamId);
      break;
    case google.ima.dai.api.StreamEvent.Type.ERROR:
      console.log('Error loading stream, playing backup stream.' + e);
      loadStream('');
      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 loadStream(streamID) {
  var url;
  if(streamID) {
    url = STREAM_URL.replace('[[STREAMID]]', streamID);
  } else {
    console.log('Stream Initialization Failed');
    url = BACKUP_STREAM;
  }
  console.log('Loading:' + url);
  hls.loadSource(url);
  hls.attachMedia(videoElement);
}

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

علاوه بر این، جریان‌های سرویس‌دهی غلاف VOD نیاز به فراخوانی StreamManager.loadStreamMetadata() در پاسخ به رویداد STREAM_INITIALIZED دارند. همچنین باید از شریک فناوری ویدیویی خود (VTP) یک URL استریم درخواست کنید. هنگامی که فراخوانی loadStreamMetadata() با موفقیت انجام می شود، یک رویداد LOADED را راه اندازی می کند، جایی که باید یک loadStream() با URL استریم خود فراخوانی کنید تا جریان را بارگیری و پخش کنید.

var isAdBreak;

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.STREAM_INITIALIZED,
    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.STREAM_INITIALIZED:
      const streamId = e.getStreamData().streamId;
      // 'vtpInterface' is a place holder for your own video technology
      //  partner (VTP) API calls.
      vtpInterface.requestStreamURL({
        'streamId': streamId,
      })
      .then( (vtpStreamUrl) => {
        streamUrl = vtpStreamUrl;
        streamManager.loadStreamMetadata();
      }, (error) => {
        // Handle the error.
      });
      break;
    case google.ima.dai.api.StreamEvent.Type.LOADED:
      loadStream(streamUrl);
      break;
    case google.ima.dai.api.StreamEvent.Type.ERROR:
      console.log('Error loading stream, playing backup stream.' + e);
      loadStream();
      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 loadStream(url) {
  if(url) {
    console.log('Loading:' + url);
    hls.loadSource(url);
  } else {
    console.log('Stream Initialization Failed');
    hls.loadSource(BACKUP_STREAM);
  }
  hls.attachMedia(videoElement);
}