IMA DAI SDK 시작하기

IMA SDK를 사용하면 멀티미디어 광고를 웹사이트와 앱에 쉽게 통합할 수 있습니다. IMA SDK는 원하는 형식에서 광고를 <ph type="x-smartling-placeholder"></ph> VAST 호환 광고 서버를 사용하고 앱에서 광고 재생을 관리할 수 있습니다. IMA DAI SDK를 사용하면 앱에서 광고 및 콘텐츠 동영상(VOD 또는 라이브 콘텐츠)에 대한 스트림 요청 그러면 SDK는 광고와 콘텐츠 동영상 간의 전환을 관리할 필요가 없음 표시할 수 있습니다.

관심 있는 DAI 솔루션 선택

<ph type="x-smartling-placeholder"></ph>

전체 서비스 DAI

이 가이드에서는 IMA DAI SDK를 간단한 동영상에 통합하는 방법을 보여줍니다. 재생할 수 있습니다. 완성된 샘플을 보거나 함께 보고 싶다면 통합하려면 간단한 예를 참고하세요.

IMA DAI 개요

IMA DAI SDK 구현에는 본 가이드의 안내를 따르세요.

  • StreamRequest: VODStreamRequest 또는 LiveStreamRequest: 스트림 요청을 정의하는 객체입니다. 스트림 요청은 VOD 또는 라이브일 수 있습니다. 있습니다. 요청은 콘텐츠 ID는 물론 API 키 또는 인증 토큰 및 기타 매개변수입니다.
  • StreamManager: 동적 광고 삽입 스트림 및 DAI 백엔드와의 상호작용을 처리하는 객체입니다. 이 스트림 관리자는 핑 추적을 처리하고 스트림 및 광고 이벤트를 있습니다.

기본 요건

  • 빈 파일 3개 <ph type="x-smartling-placeholder">
      </ph>
    • dai.html
    • dai.css
    • dai.js
  • 컴퓨터에 설치된 Python 또는 테스트에 사용할 웹 서버

개발 서버 시작

IMA DAI SDK는 페이지와 동일한 프로토콜을 사용하여 종속 항목을 로드하므로 웹 서버를 사용하여 앱을 테스트해야 합니다. 가 로컬 개발 서버를 시작하는 빠른 방법은 Python의 기본 제공 있습니다.

  1. 명령줄을 사용하여 index.html 파일이 포함된 디렉터리에서 실행:

    python -m http.server 8000

  2. 웹브라우저에서 http://localhost:8000/으로 이동합니다.

    그 밖에 다른 웹 서버(예: Apache HTTP HTTP 포트)를 사용할 수도 있습니다. 서버에 있어야 합니다.

간단한 동영상 플레이어 만들기

먼저 dai.html을 수정하여 간단한 HTML5 동영상 요소를 만들고 사용할 수 없습니다. 또한 필요한 태그를 추가하여 dai.css를 로드합니다. 및 dai.js 파일을 생성하고 hls.js 동영상 플레이어를 가져올 수 있습니다. 그런 다음 dai.css를 수정하여 페이지 요소의 크기와 위치를 지정합니다. 마지막으로 dai.js에서 스트림 요청을 저장할 변수를 정의합니다. 정보와 페이지가 로드될 때 실행할 initPlayer() 함수가 있어야 합니다.

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

다음으로 dai.html의 태그 바로 앞에 스크립트 태그를 사용하여 IMA 프레임워크를 추가합니다. (dai.js용)

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 초기화 및 스트림 요청

광고 모음을 요청하려면 ima.dai.api.StreamManager를 만듭니다. DAI 스트림 요청 및 관리를 담당합니다. 생성자는 결과 인스턴스가 광고 UI 요소를 가져와 광고를 처리합니다. 알 수 있습니다.

그런 다음 스트림을 요청하는 함수를 정의합니다. 이 예에는 VOD와 라이브 스트림 모두 VODStreamRequest 및 각각 LiveStreamRequest를 호출한 다음 streamManager.requestStream()를 호출합니다. streamRequest 매개변수로 교체됩니다. 라이브 스트림의 경우 시간이 지정된 메타데이터 이벤트를 수신 대기하고 이벤트를 StreamManager 사용 사례에 맞게 코드에 주석을 달거나 주석 처리를 삭제할 수 있습니다. 두 메서드 모두 선택적 API 키를 사용합니다. 보호된 스트림을 사용하는 경우 ~해야 해 DAI 인증 키를 생성합니다.

이 예의 두 스트림은 보호되지 않으므로 apiKey는 사용되지 않습니다.

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

스트림 이벤트 처리

마지막으로 주요 동영상 이벤트에 대한 이벤트 리스너를 구현해야 합니다. 이 간단한 예에서는 LOADED, ERROR, AD_BREAK_STARTED 및 onStreamEvent() 함수를 호출하여 AD_BREAK_ENDED 이벤트 발생 이 함수 스트림 로드 및 오류 처리, 재생 컨트롤 사용 중지 등 광고가 재생되는 동안 이 작업을 수행합니다. 스트림이 종료된 경우 로드되면 동영상 플레이어가 loadUrl()를 사용하여 제공된 URL을 로드하고 재생합니다. 함수를 사용하세요.

동영상 요소의 pause에 대한 이벤트 리스너를 설정하는 것이 좋습니다. 및 start 이벤트를 추가하여 IMA가 일시중지될 때 사용자가 재생을 다시 시작할 수 있도록 합니다. 설정할 수 있습니다.

DAI를 사용하려면 맞춤 플레이어가 라이브 스트림의 ID3 이벤트를 전달해야 합니다. IMA DAI SDK에 연결할 수 있습니다.

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

작업이 끝났습니다. 이제 IMA DAI SDK를 사용하여 광고를 요청하고 표시합니다. 받는사람 고급 SDK 기능에 대해 알아보려면 다른 가이드 또는 GitHub의 샘플