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ı herhangi birinden reklam iste VAST uyumlu reklam sunucusu oluşturup uygulamalarınızda reklam oynatmayı yönetin. 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çme

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'ya genel bakış

IMA DAI SDK'sını uygulamak, aşağıda gösterildiği gibi iki ana bileşen içerir: şu kılavuzu inceleyebilirsiniz:

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 Content ID'nin yanı sıra API anahtarı veya kimlik doğrulama jetonu ve diğer parametreleridir.
StreamManager: Dinamik reklam ekleme akışlarını ve DAI arka ucuyla etkileşimleri işleyen bir nesne. İlgili içeriği oluşturmak için kullanılan Akış yöneticisi ayrıca, izleme ping'lerini yönetir ve akış ile reklam etkinliklerini yayıncısına ait.

Ö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ı sayfayla aynı protokolü kullanarak yüklediğinden yüklendikten sonra uygulamanızı test etmek için bir web sunucusu kullanmanız gerekir. CEVAP yerel geliştirme sunucusu başlatmanın hızlı bir yolu, Python'un yerleşik sunucu.

index.html dosyanızı içeren dizinden, bir komut satırı kullanarak çalıştır:
```
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 Sunucu.

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'de bir komut dosyası etiketi kullanarak IMA çerçevesini etiketin önüne ekleyin. dai.js için

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 içerir ve sonuçta elde edilen örnek, reklamı işlemek için bir reklam kullanıcı arayüzü öğesi alır tıklama sayısı.

Ardından akış isteğinde bulunan işlevleri tanımlayın. Bu örnekte, hem seç-izle video hem de canlı yayınlar (ör. VODStreamRequest ve canlı yayınlar) Sırasıyla LiveStreamRequest, ardından streamManager.requestStream() numaralı telefonu arayın streamRequest parametreleriyle değiştirin. Canlı yayınlar için ayrıca işleyicisini kullanarak, zamanlanmış meta veri etkinliklerini dinleyip etkinlikleri StreamManager 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 gerek DAI kimlik doğrulama anahtarı oluşturun.

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 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, video öğesinin pause öğesi için etkinlik işleyiciler ayarlamak isteyebilirsiniz. IMA duraklatıldığında kullanıcının oynatmayı devam ettirmesini sağlamak için start etkinlik ve dikkat edin.

DAI ile çalışmak için özel oynatıcınızın canlı yayınlarda ID3 etkinliklerini geçmesi gerekir için örnek kodda gösterildiği gibi IMA DAI SDK'larına erişebilmeniz 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. Alıcı: Daha gelişmiş SDK özellikleri hakkında bilgi edinmek, diğer kılavuzları görmek veya GitHub'daki örnekler.