Tam hizmet DAI ile ayarlama

Platform seçin: HTML5 Android iOS tvOS Yayınla Roku

Bu kılavuzda, IMA DAI SDK'sının bir video oynatıcı uygulamasına nasıl entegre edileceği gösterilmektedir. Tamamlanmış bir örnek entegrasyonu görüntülemek veya takip etmek isterseniz GitHub'dan basit örneği indirin.

IMA DAI'ye genel bakış

IMA DAI SDK'sını uygulamak, bu kılavuzda gösterildiği gibi iki ana bileşenden oluşur:

  • StreamRequest ( VODStreamRequest veya LiveStreamRequest): Yayın isteğini tanımlayan nesne. Akış istekleri, seç-izle video veya canlı yayınlar için olabilir. Canlı yayın istekleri bir öğe anahtarı belirtirken VOD istekleri bir CMS kimliği ve video kimliği belirtir. Her iki istek türü de isteğe bağlı olarak, belirtilen akışlara erişmek için gereken bir API anahtarı ve IMA SDK'nın reklam tanımlayıcılarını Google Ad Manager ayarlarında belirtildiği şekilde işlemesi için bir Google Ad Manager ağ kodu içerebilir.
  • StreamManager: Dinamik Reklam Ekleme akışlarını ve DAI arka ucuyla etkileşimleri işleyen bir nesne. Yayın yöneticisi, izleme ping'lerini de işler ve yayın ile reklam etkinliklerini yayıncıya iletir.

Ön koşullar

  • Üç boş dosya
    • dai.html
    • dai.css
    • dai.js
  • Bilgisayarınızda yüklü Python veya test için kullanılacak bir web sunucusu

Geliştirme sunucusu başlatma

IMA DAI SDK'sı, bağımlılıkları yüklendiği sayfayla aynı protokolü kullanarak yüklediğinden uygulamanızı test etmek için bir web sunucusu kullanmanız gerekir. Yerel bir geliştirme sunucusu başlatmanın hızlı bir yolu, Python'un yerleşik sunucusunu kullanmaktır.

  1. Komut satırını kullanarak index.html dosyanızı içeren dizinden şu komutu çalıştırın:

    python -m http.server 8000

  2. Web tarayıcısında http://localhost:8000/ adresine gidin.

    Apache HTTP Server gibi başka bir web sunucusu da kullanabilirsiniz.

Video oynatıcı oluşturma

İlk olarak, bir HTML5 video öğesi ve tıklama için kullanılacak bir div oluşturmak üzere dai.html dosyasını değiştirin. Aşağıdaki örnekte IMA DAI SDK'sı içe aktarılmaktadır. Daha fazla bilgi için IMA DAI SDK'sını içe aktarma bölümüne bakın.

Ayrıca, dai.css ve dai.js dosyalarını yüklemek ve hls.js video oynatıcıyı içe aktarmak için gerekli etiketleri ekleyin. Ardından, sayfa öğelerinin boyutunu ve konumunu belirtmek için dai.css öğesini değiştirin. Son olarak, dai.js dosyasında akış isteği bilgilerini tutacak değişkenleri, sayfa yüklendiğinde çalıştırılacak bir initPlayer() işlevini tanımlayın ve oynat düğmesini tıklandığında akış isteyecek şekilde ayarlayın.

<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>


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

#adUi {
  cursor: pointer;
}

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

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

Duraklatılmış reklam araları sırasında oynatmayı devam ettirmek için video öğesinin pause ve start etkinlikleri için etkinlik işleyiciler ayarlayarak oynatıcı kontrollerini gösterin ve gizleyin.

/**
 * 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';
}

IMA DAI SDK'sını yükleme

Ardından, dai.html dosyasında dai.js etiketinden önce bir komut dosyası etiketi kullanarak IMA çerçevesini ekleyin.

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

StreamManager'ı başlatma

Bir reklam grubu istemek için DAI akışlarını istemekten ve yönetmekten sorumlu bir ima.dai.api.StreamManager oluşturun. Oluşturucu, reklam tıklamalarını işlemek için bir video öğesi ve reklam kullanıcı arayüzü öğesi alır.

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

Akış isteğinde bulunma

Akış isteğinde bulunmak için işlevler tanımlayın. Bu örnekte, VODStreamRequest sınıfının ve LiveStreamRequest sınıfının örneklerini oluşturan hem VOD hem de canlı yayın işlevleri yer alır. streamRequest örneğinizi aldıktan sonra akış isteği örneğiyle streamManager.requestStream() yöntemini çağırın.

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

Her iki akış isteği yöntemi de isteğe bağlı bir API anahtarı alır. Korunan bir akış kullanıyorsanız DAI kimlik doğrulama anahtarı oluşturmanız gerekir. Daha fazla bilgi için DAI video akışı isteklerinin kimliğini doğrulama başlıklı makaleyi inceleyin. Bu örnekteki akışların hiçbiri DAI kimlik doğrulama anahtarı kullanılarak korunmadığından apiKey kullanılmaz.

Akış meta verilerini ayrıştırma

Ayrıca, IMA'nın reklam araları sırasında reklam etkinlikleri yayınlaması için zamanlanmış meta veri etkinliklerini dinleyecek ve etkinlikleri StreamManager sınıfına yönlendirecek bir işleyici eklemeniz gerekir:

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

Bu kılavuzda, akış oynatma için hls.js oynatıcı kullanılmaktadır ancak meta veri uygulamanız, kullandığınız oynatıcı türüne bağlıdır.

Yayın etkinliklerini yönetme

Önemli video etkinlikleri için etkinlik işleyiciler uygulayın. Bu örnekte, bir onStreamEvent() işlevi çağrılarak LOADED, ERROR, AD_BREAK_STARTED ve AD_BREAK_ENDED etkinlikleri işlenir. Bu işlev, IMA SDK'nın gerektirdiği şekilde akış yükleme, akış hataları ve reklam oynatma sırasında oynatıcı kontrollerini devre dışı bırakma işlemlerini gerçekleştirir.

/**
 * 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();
  });
}

Yayın yüklendiğinde video oynatıcı, sağlanan URL'yi bir loadUrl() işlevi kullanarak yükler ve oynatır.

İşte bu kadar. Artık IMA DAI SDK ile reklam isteğinde bulunabilir ve reklamları gösterebilirsiniz. Daha gelişmiş SDK özellikleri hakkında bilgi edinmek için diğer kılavuzlara veya GitHub'daki örneklere göz atın.