비디오 광고

비디오 광고는 동영상 기반의 광고로, 높은 참여도와 시각적 임팩트를 제공합니다. AdStage SDK는 HTML5 비디오 플레이어를 사용하며, 모바일 최적화와 다양한 재생 옵션을 지원합니다.

🎯 기본 사용법

단순한 비디오 광고

// HTML에 컨테이너   useEffect(() => {
// SDK 초기화 (한 번만)
AdStage.init({
  apiKey: process.env.NEXT_PUBLIC_ADSTAGE_API_KEY
});
 
// 비디오 광고 생성
if (containerRef.current) {…}id="video-container"></div>
 
// 기본 비디오 광고 생성
AdStage.ads.video('video-container', {
  width: 640,
  height: 360
});

클릭 이벤트 처리

AdStage.ads.video('video-container', {
  width: 640,
  height: 360,
  onClick: (adData) => {
    console.log('비디오 광고 클릭됨:', adData);
    // 사용자 정의 로직 추가 가능
  }
});

⚙️ 설정 옵션

기본 옵션

옵션	타입	기본값	설명
`width`	`number`	`640`	비디오 너비 (px)
`height`	`number`	`360`	비디오 높이 (px)
`autoplay`	`boolean`	`true`	자동 재생 여부
`muted`	`boolean`	`true`	음소거 여부
`controls`	`boolean`	`false`	기본 컨트롤 표시
`onClick`	`function`	`undefined`	클릭 시 실행될 콜백 함수

고급 옵션

옵션	타입	기본값	설명
`loop`	`boolean`	`true`	반복 재생 여부
`playsinline`	`boolean`	`true`	인라인 재생 (모바일)
`customControls`	`object`	`undefined`	세부 컨트롤 설정

필터링 옵션

옵션	타입	기본값	설명
`adId`	`string`	`undefined`	특정 광고 ID 지정
`language`	`'ko' \| 'en' \| 'ja' \| 'zh'`	`undefined`	언어별 필터링
`deviceType`	`'MOBILE' \| 'DESKTOP'`	`undefined`	디바이스별 필터링
`country`	`'KR' \| 'US' \| 'JP' \| 'CN' \| 'DE'`	`undefined`	국가별 필터링

참고: 비디오 광고는 단일 비디오 최적화로 설계되어 있습니다 (maxAds: 1).

💡 실제 구현 예제

가장 간단한 CDN 방식으로 HTML에서 바로 사용할 수 있습니다.

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>비디오 광고 예제</title>
</head>
<body>
  <h1>내 웹사이트</h1>
  
  <!-- 비디오 광고 컨테이너 -->
  <div id="video-container" style="width: 640px; height: 360px; margin: 20px auto; border: 1px solid #ddd; border-radius: 8px;">
    로딩 중...
  </div>
 
  <!-- AdStage SDK 로드 -->
  <script src="https://unpkg.com/@adstage/web-sdk/dist/index.umd.js"></script>
  <script>
    // SDK 초기화
    AdStage.init({
      apiKey: 'your-api-key'
    });
 
    // 비디오 광고 생성
    AdStage.ads.video('video-container', {
      width: 640,
      height: 360,
      autoplay: true,
      muted: true
    });
  </script>
</body>
</html>

🚀 고급 기능

커스텀 컨트롤

비디오 플레이어의 개별 컨트롤을 세밀하게 설정할 수 있습니다.

AdStage.ads.video('video-container', {
  width: 640,
  height: 360,
  controls: true,
  customControls: {
    hidePlayButton: false,        // 재생 버튼 표시
    hideProgressBar: false,       // 진행바 표시
    hideVolumeSlider: false,      // 볼륨 슬라이더 표시
    hideFullscreenButton: true    // 전체화면 버튼 숨김
  }
});

반응형 비디오

화면 크기에 따라 비디오 크기를 조정하는 방법입니다.

// 미디어 쿼리를 활용한 반응형 구현
const getResponsiveVideoSize = () => {
  if (window.innerWidth <= 768) {
    return { width: '100%', height: 200 };  // 모바일
  } else if (window.innerWidth <= 1024) {
    return { width: 640, height: 300 };     // 태블릿
  } else {
    return { width: 640, height: 360 };     // 데스크톱
  }
};
 
const { width, height } = getResponsiveVideoSize();
 
AdStage.ads.video('video-container', {
  width,
  height,
  autoplay: true,
  muted: true,
  deviceType: window.innerWidth <= 768 ? 'MOBILE' : 'DESKTOP'
});
 
// 윈도우 리사이즈 시 재생성
window.addEventListener('resize', () => {
  // 기존 광고 제거 후 새로 생성
  AdStage.ads.destroy(slotId);
  const newSize = getResponsiveVideoSize();
  slotId = AdStage.ads.video('video-container', {
    ...newSize,
    autoplay: true,
    muted: true
  });
});

특정 광고 ID 지정

특정한 비디오 광고만 표시하고 싶을 때 사용합니다.

AdStage.ads.video('video-container', {
  width: 640,
  height: 360,
  adId: 'video-ad-789'  // 특정 광고 ID
});

🔧 최적화 팁

1. 동적 크기 조정 활용

SDK가 자동으로 비디오 크기에 맞춰 컨테이너를 최적화합니다.

// 16:9 비율 자동 유지
AdStage.ads.video('video-container', {
  width: '100%',
  height: 'auto'  // 비율에 맞춰 자동 조정
});

2. 백그라운드 로딩

광고는 백그라운드에서 로드되므로 즉시 슬롯 ID를 받을 수 있습니다.

// 즉시 슬롯 ID 반환
const slotId = AdStage.ads.video('video-container');
console.log('슬롯 생성됨:', slotId);  // 즉시 실행
 
// 실제 광고는 비동기로 로드됨

3. 자동 정리 활용

DOM에서 컨테이너가 제거되면 광고도 자동으로 정리됩니다.

const slotId = AdStage.ads.video('video-container');
 
// DOM에서 컨테이너 제거 시 자동 정리됨
document.getElementById('video-container').remove();
// 수동으로 destroy() 호출할 필요 없음

🎨 스타일링

CSS 클래스 활용

SDK가 자동으로 추가하는 CSS 클래스를 활용하여 스타일링할 수 있습니다.

/* 광고 컨테이너 기본 스타일 */
.adstage-video-ad {
  position: relative;
  overflow: hidden;
  border-radius: 8px;
  background: #000;
}
 
/* 로딩 상태 */
.adstage-loading {
  opacity: 0.7;
  background: linear-gradient(90deg, #000 25%, #333 50%, #000 75%);
  background-size: 200% 100%;
  animation: loading 1.5s infinite;
}
 
@keyframes loading {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}
 
/* 로딩 완료 */
.adstage-loaded {
  opacity: 1;
  transition: opacity 0.3s ease;
}
 
/* 오류 상태 */
.adstage-error {
  border: 1px solid #ff6b6b;
  background-color: #ffe0e0;
}

슬롯 상태 확인

// 모든 슬롯 확인
const allSlots = AdStage.ads.getAllSlots();
console.log('전체 광고 슬롯:', allSlots);
 
// 특정 슬롯 확인
const slot = AdStage.ads.getSlotById(slotId);
console.log('슬롯 정보:', slot);

📚 관련 문서

광고 시스템 개요: 전체 광고 시스템 소개
배너 광고: 배너 광고 가이드
텍스트 광고: 텍스트 광고 가이드
고급 설정: 성능 최적화 및 고급 기능

비디오 광고

목차