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 ile 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ği. SDK, daha sonra Böylece, reklam ve içerik videosu arasında geçiş yönetmek zorunda kalmazsınız. bir kontrol listesidir.

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

Tam hizmet DAI

Bu kılavuzda, IMA DAI SDK'sının basit bir videoya nasıl entegre edileceği gösterilmektedir oynatıcı uygulaması. Tamamlanmış bir örneği görüntülemek veya takip etmek isterseniz entegrasyon için simple example'ı ziyaret edin.

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— bir VODStreamRequest veya LiveStreamRequest: Akış isteğini tanımlayan bir nesne. Yayın istekleri, seç-izle video veya canlı yayın için olabilir. akışlar. İ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şimleri yöneten bir nesne. Yayın yöneticisi, izleme ping'lerini de yönetir 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ı, yüklendikleri sayfayla aynı protokolü kullanarak bağımlılıkları yüklediğinden, uygulamanızı test etmek için bir web sunucusu kullanmanız gerekir. Yerel bir geliştirme sunucusunu başlatmanın hızlı bir yolu, Python'un yerleşik sunucusunu kullanmaktır.

Komut satırını kullanarak index.html dosyanızı içeren dizinden şunları ç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/

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

Basit bir video oynatıcı oluşturma

Öncelikle dai.html dosyasını değiştirerek basit bir HTML5 video öğesi ve kullanılacak seçeneği belirleyin. Ayrıca, dai.css dosyasını yüklemek için gerekli etiketleri ekleyin. ve dai.js dosyalarını yüklemenin yanı sıra hls.js video oynatıcısını içe aktarmak için gereklidir. Ardından, sayfa öğelerinin boyutunu ve konumunu belirtmek için dai.css dosyasını değiştirin. Son olarak, dai.js'de akış isteğini barındıracak değişkenleri tanımlayın. bilgileri ve sayfa yüklendiğinde çalıştırılacak bir initPlayer() işleviyle birlikte çalışır.

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 dosyasında dai.js etiketinden önce 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

Reklam grubu istemek için bir ima.dai.api.StreamManager oluşturun. DAI akışlarını istemekten ve yönetmekten sorumludur. Oluşturucu bir video öğesi alır ve oluşturulan ö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, VODStreamRequest ve canlı yayınlar oluşturur. Sırasıyla LiveStreamRequest, ardından streamManager.requestStream() numaralı telefonu arayın streamRequest parametreleriyle değiştirin. Canlı yayınlar için zamanlanmış meta veri etkinliklerini dinleyecek ve etkinlikleri StreamManager'e iletecek 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ı kullanır. Korunan bir akış kullanıyorsanız DAI kimlik doğrulama anahtarı oluşturmanız gerekir.

Bu örnekteki hiçbir akış 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 LOADED, ERROR, AD_BREAK_STARTED ve onStreamEvent() işlevi çağırarak AD_BREAK_ENDED etkinlikleri. Bu işlev akış yükleme ve hatalarla ilgili sorunları çözmenin yanı sıra oynatıcı kontrollerini devre dışı bırakma SDK'nın gerektirdiği, reklam oynatılırken de oynayabilmenizdir. Akış: yüklendiğinde, video oynatıcı yükler ve sağlanan URL'yi bir loadUrl() kullanarak oynatır. işlevini kullanın.

Ayrıca, IMA reklam araları sırasında duraklatıldığında kullanıcının oynatmayı devam ettirmesine izin vermek için video öğesinin pause ve start etkinlikleri için etkinlik dinleyicileri de ayarlayabilirsiniz.

DAI ile çalışmak için özel oynatıcınızın canlı yayınlarda ID3 etkinliklerini geçmesi gerekir değerini IMA DAI SDK'larına ekleyin.

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'sını kullanarak reklam isteğinde bulunuyor ve reklamları görüntülüyorsunuz. Alıcı: Daha gelişmiş SDK özellikleri hakkında bilgi edinmek, diğer kılavuzları görmek veya GitHub'daki örnekler.