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

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

IMA SDK'ları, multimedya reklamlarını 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ıyla uygulamalar, reklam ve içerik videosu (VOD veya canlı içerik) için akış isteğinde bulunur. Daha sonra SDK, uygulamanızın içinde reklam ve içerik videosu arasında geçişi yönetmek zorunda kalmamanız için birleştirilmiş video akışı döndürür.

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

Tam hizmet DAI

Bu kılavuzda, IMA DAI SDK'sı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 indirebilirsiniz.

IMA DAI'ya genel bakış

IMA DAI SDK'sını uygulamak için bu kılavuzda gösterildiği gibi iki ana bileşen gerekir:

StreamRequest— ya bir VODStreamRequest ya da bir LiveStreamRequest: Akış isteğini tanımlayan bir nesne. Yayın istekleri, seç-izle video veya canlı yayınlar için olabilir. İstekler; Content ID, API anahtarı veya kimlik doğrulama jetonu ve diğer parametreleri belirtir.
StreamManager: Dinamik reklam ekleme akışlarını ve DAI arka ucuyla etkileşimleri işleyen bir nesne. Akış yöneticisi ayrıca izleme ping'lerini işler 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 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 geliştirme sunucusu başlatmanın hızlı bir yolu, Python'un yerleşik sunucusunu kullanmaktır.

index.html dosyanızı içeren dizinden, bir komut satırı kullanarak:
```
python -m http.server 8000
```
Not: http.server yalnızca Python 3.x'te kullanılabilir.
Web tarayıcısında http://localhost:8000/ adresine gidin

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

Basit bir video oynatıcı oluşturma

Öncelikle dai.html dosyasını değiştirerek basit bir HTML5 video öğesi ve tıklama için kullanılacak bir div öğesi oluşturun. Ayrıca, dai.css ve dai.js dosyalarını yüklemek ve hls.js video oynatıcısını içe aktarmak için gerekli etiketleri ekleyin. Ardından, sayfa öğelerinin boyutunu ve konumunu belirtmek için dai.css dosyasını değiştirin. Son olarak, dai.js'de, akış isteği bilgilerini saklayacak değişkenleri ve sayfa yüklendiğinde çalıştırılacak bir initPlayer() işlevini 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 DAI 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 DAI SDK'sını yükleme

Ardından, dai.html'de dai.js etiketinin önüne bir komut dosyası etiketi kullanarak IMA çerçevesini 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ı istemek ve yönetmekten sorumlu olan bir ima.dai.api.StreamManager oluşturun. Oluşturucu bir video öğesi alır ve sonuç olarak elde edilen ö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 örnekte, hem VOD hem de canlı yayınlar için olan, sırasıyla VODStreamRequest ve LiveStreamRequest örnekleri oluşturan ve ardından streamRequest parametreleriyle streamManager.requestStream() işlevini çağıran işlevler bulunmaktadır. Canlı yayınlarda, zamanlanmış meta veri etkinliklerini dinlemek ve etkinlikleri StreamManager öğesine yönlendirmek için bir işleyici de eklemeniz gerekir. Kullanım alanınıza uyacak şekilde koda yorum ekleyebilir veya kodu kaldırabilirsiniz. Her iki yöntem de isteğe bağlı bir API anahtarı alır. Korumalı akış kullanıyorsanız DAI kimlik doğrulama anahtarı oluşturmanız gerekir.

Bu örnekteki iki akış da 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 işleme

Son olarak, önemli video etkinlikleri için etkinlik işleyiciler uygulamanız gerekir. Bu basit örnekte, bir onStreamEvent() işlevi çağrılarak LOADED, ERROR, AD_BREAK_STARTED ve AD_BREAK_ENDED etkinlikleri işlenmektedir. Bu işlev, akış yüklemeyi ve hatalarını işlemenin yanı sıra SDK'nın gerektirdiği, reklam oynatılırken oynatıcı kontrollerini devre dışı bırakır. Akış yüklendiğinde, video oynatıcı yüklenir ve sağlanan URL'yi bir loadUrl() işlevi kullanarak oynatır.

Reklam araları sırasında IMA durakladığında kullanıcının oynatmayı devam ettirebilmesi amacıyla video öğesinin pause ve start etkinlikleri için etkinlik işleyiciler ayarlamak isteyebilirsiniz.

DAI ile çalışması için özel oynatıcınızın, örnek kodda gösterildiği gibi canlı yayınlarda kimlik 3 etkinliklerini IMA DAI SDK'larına 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 DAI SDK ile reklam istiyor ve görüntülüyorsunuz. Daha gelişmiş SDK özellikleri hakkında bilgi edinmek için diğer kılavuzları veya GitHub'daki örnekleri inceleyin.