Bu sayfa, Cloud Translation API ile çevrilmiştir.

IMA DAI SDK'sını kullanmaya başlama

IMA SDK'ları, multimedya reklamları web sitelerinize ve uygulamalarınıza entegre etmenizi kolaylaştırır. IMA SDK'ları, VAST uyumlu herhangi bir reklam sunucusundan reklam isteyebilir ve uygulamalarınızda reklam oynatmayı yönetebilir. IMA DAI SDK'ları sayesinde uygulamalar, reklam ve içerik videosu (VOD veya canlı içerik) için akış isteğinde bulunur. SDK, daha sonra birleştirilmiş bir video akışı döndürür. Böylece, uygulamanız içinde reklam ve içerik videosu arasında geçişi yönetmeniz gerekmez.

İlgilendiğiniz DAI çözümünü seçme

Tam hizmet DAI

Bu kılavuzda, IMA SDK'nın basit 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'ya genel bakış

IMA DAI'yı uygulamak, bu kılavuzda gösterildiği gibi iki ana SDK bileşeni içerir:

StreamRequest— VODStreamRequest veya LiveStreamRequest: Akış isteğini tanımlayan bir nesne. Akış istekleri seç-izle video veya canlı yayınlar için olabilir. İstekler bir içerik kimliğinin yanı sıra API anahtarı veya kimlik doğrulama jetonu ve diğer parametreleri belirtir.
StreamManager: Dinamik reklam ekleme akışlarını ve DAI arka ucuyla etkileşimlerini işleyen bir nesne. Akış yöneticisi ayrıca izleme ping'lerini yönetir ve akış ile reklam etkinliklerini yayıncıya yönlendirir.

Ö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 SDK, 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 geliştirme sunucusu başlatmanın en basit yolu Python'un yerleşik sunucusunu kullanmaktır.

index.html dosyanızı içeren dizinden bir komut satırı kullanarak şu komutu çalıştırın:
```
python -m http.server 8000
```
Not: http.server yalnızca Python 3.x sürümünde kullanılabilir.
Web tarayıcısında http://localhost:8000/ adresine gidin

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

Basit bir video oynatıcı oluşturma

Öncelikle basit bir HTML5 video öğesi ve tıklama için kullanılacak bir div oluşturmak üzere dai.html dosyasını değiştirin. dai.css ve dai.js dosyalarını yüklemek ve hls.js video oynatıcısını içe aktarmak için gerekli etiketleri de ekleyin. Ardından, sayfa öğelerinin boyutunu ve konumunu belirtmek için dai.css öğesini değiştirin. Son olarak, dai.js'de, akış isteği bilgilerini içerecek değişkenler ve sayfa yüklendiğinde çalışacak bir initPlayer() işlevi tanımlayın.

dai.html

<html>
<head>
  <script src="https://cdn.jsdelivr.net/npm/hls.js@latest"></script>
  <script src="dai.js"></script>
  <link rel="stylesheet" href="dai.css" type="text/css">
</head>
<body onLoad="initPlayer()">
  <h2>IMA SDK DAI Demo (HLS.JS)</h2>
    <video id="video"></video>
    <div id="ad-ui"></div>
</body>
</html>

dai.css

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

#ad-ui {
  cursor: pointer;
}

dai.js

var BACKUP_STREAM =
    'https://storage.googleapis.com/interactive-media-ads/media/bbb.m3u8'

// Livestream asset key.
var TEST_ASSET_KEY = "sN_IYUG8STe1ZzhIIE_ksA";

// VOD content source and video IDs.
var TEST_CONTENT_SOURCE_ID = "2548831";
var TEST_VIDEO_ID = "tears-of-steel";

var hls = new Hls(); // hls.js video player
var videoElement;
var adUiElement;
var isAdBreak;

function initPlayer() {
  videoElement = document.getElementById('video');
  adUiElement = document.getElementById('adUi');
}

IMA SDK'yı yükleme

Ardından, dai.html dosyasında bir komut dosyası etiketi kullanarak IMA çerçevesini dai.js etiketinin önüne ekleyin.

dai.html

<html>
<head>
  <script src="https://cdn.jsdelivr.net/npm/hls.js@latest"></script>
  <script type="text/javascript" src="//imasdk.googleapis.com/js/sdkloader/ima3_dai.js"></script>
  <script src="dai.js"></script>
  <link rel="stylesheet" href="dai.css" type="text/css">
</head>

StreamManager'ı başlatma ve akış isteğinde bulunma

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

Ardından akış isteğinde bulunan işlevleri tanımlayın. Bu örnek, hem VOD hem de canlı yayınlar için sırasıyla VODStreamRequest ve LiveStreamRequest örnekleri oluşturan ve ardından streamRequest parametreleriyle streamManager.requestStream() çağıran işlevler içerir. Canlı yayınlarda, zamanlanmış meta veri etkinliklerini dinlemek ve etkinlikleri StreamManager öğesine yönlendirmek için bir işleyici eklemeniz de gerekir. Kullanım alanınıza uyacak şekilde kod ekleyebilir veya kodu devre dışı bırakabilirsiniz. Her iki yöntem de isteğe bağlı bir API anahtarı alır. Korumalı bir akış kullanıyorsanız bir DAI kimlik doğrulama anahtarı oluşturmanız gerekir.

Bu örnekteki akışlardan hiçbiri korunmadığından apiKey kullanılmaz.

dai.js

function initPlayer() {
  videoElement = document.getElementById('video');
  adUiElement = document.getElementById('adUi');
  streamManager = new google.ima.dai.api.StreamManager(videoElement, adUiElement)

  // Timed metadata is only used for LIVE streams.
  hls.on(Hls.Events.FRAG_PARSING_METADATA, function(event, data) {
    if (streamManager && data) {
      // For each ID3 tag in the metadata, 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);
      });
    }
  });

  requestVODStream(TEST_CONTENT_SOURCE_ID, TEST_VIDEO_ID, null);
  // Uncomment the line below and comment out the one above to request a
  // LIVE stream instead of a VOD stream.
  //requestLiveStream(TEST_ASSET_KEY, null);
}

function requestVODStream(cmsId, videoId, apiKey) {
  var streamRequest = new google.ima.dai.api.VODStreamRequest();
  streamRequest.contentSourceId = cmsId;
  streamRequest.videoId = videoId;
  streamRequest.apiKey = apiKey;
  streamManager.requestStream(streamRequest);
}

function requestLiveStream(assetKey, apiKey) {
  var streamRequest = new google.ima.dai.api.LiveStreamRequest();
  streamRequest.assetKey = assetKey;
  streamRequest.apiKey = apiKey;
  streamManager.requestStream(streamRequest);
}

Akış etkinliklerini yönetme

Son olarak, büyük video etkinlikleri için etkinlik işleyiciler uygulamanız gerekir. Bu basit örnek, bir onStreamEvent() işlevini çağırarak LOADED, ERROR, AD_BREAK_STARTED ve AD_BREAK_ENDED etkinliklerini işler. Bu işlev hem akış yüklemesini ve hatalarını ele alır hem de SDK'nın gerektirdiği şekilde reklam oynatılırken oynatıcı kontrollerini devre dışı bırakır. Akış yüklendiğinde, video oynatıcı bir loadUrl() işlevi kullanarak sağlanan URL'yi yükler ve oynatır.

IMA, reklam araları sırasında durakladığında kullanıcının oynatmayı devam ettirmesini sağlamak amacıyla video öğesinin pause ve start etkinlikleri için etkinlik işleyiciler de ayarlayabilirsiniz.

DAI ile çalışması için özel oynatıcınızın, örnek kodda gösterildiği gibi IMA SDK'larına canlı yayınlar için ID3 etkinlikleri iletmesi gerekir.

dai.js

var isAdBreak;

function initPlayer() {
  videoElement = document.getElementById('video');
  adUiElement = document.getElementById('adUi');
  streamManager = new google.ima.dai.api.StreamManager(videoElement, adUiElement);
  videoElement.addEventListener('pause', onStreamPause);
  videoElement.addEventListener('play', onStreamPlay);

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

function onStreamPause() {
  console.log('paused');
  if (isAdBreak) {
    videoElement.controls = true;
    adUiElement.style.display = 'none';
  }
}

function onStreamPlay() {
  console.log('played');
  if (isAdBreak) {
    videoElement.controls = false;
    adUiElement.style.display = 'block';
  }
}

İşte bu kadar. Artık IMA SDK ile reklam istiyor ve gösteriyorsunuz. Daha gelişmiş SDK özellikleri hakkında bilgi edinmek için diğer kılavuzlara veya GitHub'daki örnekleri inceleyin.