IMA DAI SDK는 최소 HbbTV 동영상 플레이어 앱에 대한 통합을 지원합니다. IMA DAI SDK를 사용하면 방송 콘텐츠 스트림과 함께 브로드밴드 광고 스트림에 대한 Google Ad Manager 수요를 지원할 수 있습니다. 이 가이드에서는 브로드캐스트 스트림의 광고 이벤트 데이터를 기반으로 광고 매니페스트를 로드하는 방법을 설명합니다.
완성된 샘플 통합을 보거나 따라 하려면 IMA HTML5 DAI SDK가 포함된 HbbTV 선형 샘플 앱을 다운로드하세요. 이전 TV 기기를 지원하기 위해 이 가이드와 GitHub 샘플 앱은 ES5 JavaScript로 작성되어 있습니다.
HbbTV가 아닌 다른 플랫폼과 통합하는 방법에 관한 자세한 내용은 양방향 미디어 광고 SDK를 참고하세요.
기본 요건
이 가이드를 계속하기 전에 다음을 준비해야 합니다.
- IMA DAI를 사용하려면 Ad Manager 360 Advanced 계정이 있어야 합니다. Ad Manager 계정이 있는 경우 계정 관리자에게 자세한 내용을 문의하세요. Ad Manager 가입에 대한 자세한 내용은 Ad Manager 고객센터를 참고하세요.
- 미디어 재생을 위해 방송 객체와 상호작용하는 HbbTV 앱 자세한 내용은 HbbTV Broadcast AV 객체를 참고하세요.
- 미리 로드를 지원하는 dash.js 버전입니다. 버전 4.6.0 이상을 사용하는 것이 좋습니다.
- 애플리케이션을 호스팅하는 웹 서버
- DVB 방송 스트림이 있는 테스트 환경 테스트 환경 설정에 관한 자세한 안내는 HbbTV 애플리케이션 실행을 참고하세요.
- Broadcast Stream: 맞춤 애플리케이션 정보 표 (AIT) 데이터가 포함된 브로드캐스트 스트림을 준비합니다. 또한 TV에서 수신할 수 있도록 방송 스트림을 전송하는 방법도 필요합니다. DVB 모듈레이터를 사용하여 방송 스트림을 전송하거나 다른 방법을 사용할 수 있습니다.
- 웹 서버: TV에서 액세스할 수 있는 웹 서버에 HbbTV 애플리케이션을 호스팅합니다.
- 유형이 광고 모음 게재 매니페스트인 라이브 스트림 이벤트입니다. 이벤트를 만들려면 DAI용 라이브 스트림 설정하기를 참고하세요.
호환되는 방송 스트림 만들기
HbbTV 앱은 broadcastContainer.addStreamEventListener()를 사용하여 브로드캐스트 스트림에서 HbbTV 스트림 이벤트를 수신 대기합니다. 광고를 올바르게 로드하고 재생하려면 연결된 JSON 문자열 페이로드를 포함하도록 다음 이벤트 유형으로 브로드캐스트 스트림을 설정해야 합니다.
AD_BREAK_EVENT_ANNOUNCE~{"type":"adBreakAnnounce", "pod_id":1,"duration":90, "offset":10}AD_BREAK_EVENT_START-{"type":"adBreakStart"}AD_BREAK_EVENT_END-{"type":"adBreakEnd"}
이러한 이벤트의 경우 streamEvent.type와 함께 JSON 문자열 페이로드를 포함합니다. 광고 미리 로드를 지원하려면 AD_BREAK_EVENT_ANNOUNCE 이벤트에 streamEvent.duration 및 streamEvent.offset가 포함되어야 합니다. 자세한 내용은 HbbTV 스트림 이벤트 수신 대기를 참고하세요.
브로드캐스트 스트림을 설정하려면 다중화된 MPEG 전송 스트림 예시를 참고하세요.
예시 스트림을 사용하려면 자체 스트림 설정의 애플리케이션 정보 표 URL을 업데이트해야 합니다.
라이브 스트림 이벤트를 게재하는 포드 만들기
HbbTV 앱에 광고를 게재하려면 라이브 스트림 이벤트를 게재하는 광고 모음이 필요합니다. 이벤트 설정에 관한 자세한 내용은 DAI용 라이브 스트림 설정하기를 참고하세요. 설정한 스트림에 액세스하려면 앱에 다음 변수가 있어야 합니다.
NETWORK_CODE: 광고 요청에 사용되는 Ad Manager 네트워크 코드입니다.CUSTOM_ASSET_KEY: DAI용 라이브 스트림을 설정하는 과정에서 생성된 Ad Manager 맞춤 애셋 키입니다.
애플리케이션 파일 구조 만들기
이 가이드에서는 IMA HbbTV 샘플 앱과 유사한 파일 구조를 사용합니다. 이 가이드를 따라하려면 다음 파일을 만들어야 합니다.
index.html: 앱의 HTML 색인입니다.Style.css: 앱의 CSS 스타일 지정입니다.application.js: 기본 JS 진입점입니다. 재생 상태 및 광고 시점을 관리합니다.video_player.js: 광고 재생에 사용되는 dash.js 플레이어를 관리합니다.ads_manager.js: IMA 설정, 스트림 요청, 이벤트 처리를 관리합니다.
ads_manager.js는 IMA DAI SDK를 설정합니다. 다음 구성요소는 IMA DAI SDK를 구현합니다.
PodStreamRequest: Google의 광고 서버에 대한 스트림 요청을 정의하는 객체입니다.StreamManager: 동적 광고 삽입 스트림과 DAI 백엔드와의 상호작용을 처리하는 객체입니다. 스트림 관리자는 추적 핑도 처리하고 스트림 및 광고 이벤트를 게시자에게 전달합니다.
테스트 환경 설정에 관한 자세한 안내는 HbbTV 애플리케이션 실행에 관한 이 가이드를 참고하세요.
IMA DAI SDK 및 DASH.js 로드
방송 광고 스트림 재생을 시작하려면 IMA DAI SDK와 dash.js를 앱에 로드합니다. application.js 태그 앞에 index.html에서 스크립트 태그를 사용하여 dash.js와 IMA 프레임워크를 추가합니다.
<script src="https://cdn.jsdelivr.net/npm/dashjs@latest/dist/dash.all.min.js"></script> <script src="//imasdk.googleapis.com/js/sdkloader/ima3_dai.js"></script>
그런 다음 dash.js 플레이어를 시작하고 제어하는 동영상 플레이어 래퍼 클래스를 만듭니다.