자동재생

자동재생은 데스크톱 및 모바일 웹 기기에서 지원됩니다.

Chrome 53 및 iOS 10부터 Android 및 iPhone에서 인라인 음소거 자동재생이 지원됩니다.

데스크톱용 Safari 11에서는 자동 재생 동영상을 처리하는 방식이 변경되었습니다. 2018년 4월에 Chrome도 유사하게 변경되었습니다.

웹사이트에서 현재 동영상이 자동재생되는 경우 새 정책을 처리할 수 있도록 업데이트하세요. 새로운 자동재생 시도 코드 샘플은 동영상 자동재생을 시도하고 자동재생이 실패할 경우 클릭 재생방식으로 대체하는 방법을 보여줍니다. 이 가이드에서는 새 샘플을 안내합니다.

브라우저에서 자동재생 성공 또는 실패 감지

현재 웹브라우저에서는 자동재생의 지원 여부를 확인하는 간단한 쿼리를 제공하지 않습니다. 동영상이 자동재생될 수 있는지 확인하는 유일한 방법은 재생을 시도하는 것입니다.

이 접근 방식은 다음 코드 스니펫에 나와 있습니다.

var contentVideo = document.getElementById('myVideo');
var promise = contentVideo.play();

if (promise !== undefined) {
  promise.then(_ => {
    // Autoplay worked!
  }).catch(error => {
    // Autoplay failed.
  });
}

코드는 먼저 Promise를 반환하는 HTML5 동영상 요소에서 play()를 호출합니다. 이 샘플에서 Promise는 자동재생 기능을 감지하고 AdsRequest를 적절하게 설정하는 데 사용됩니다.

자동재생 및 IMA

IMA SDK AdsRequest에는 자동재생과 관련된 두 개의 필드, setAdWillAutoPlay 및 setAdWillPlayMuted를 제공해야 합니다. 전자의 경우, 광고 서버가 자동재생이 가능한 광고만 반환하도록 하고, 후자는 광고 서버가 음소거 또는 음소거 해제된 상태에서 시작할 수 있는 광고만 반환하도록 합니다. 이 샘플에서는 콘텐츠 동영상을 브라우저의 자동재생 지원 여부를 나타내는 표시기로 사용합니다. 다음과 같은 세 가지 결과가 나올 수 있는 두 가지 사항을 확인합니다.

확인하려면 콘텐츠 동영상을 재생하고 반환된 Promise를 살펴보세요.

var adsInitialized, autoplayAllowed, autoplayRequiresMuted;

// Called on page load.
function init() {
  videoContent = document.getElementById('contentElement');
  playButton = document.getElementById('playButton');
  // Hide the play button unless we need click-to-play.
  playButton.style.display = 'none';
  // Add an event listener now in case we need to fall back to click-to-play.
  playButton.addEventListener('click', () => {
    adDisplayContainer.initialize();
    adsInitialized = true;
    videoContent.load();
    playAds();
  });
  // Create your AdsLoader and AdDisplayContainer here.
  setUpIMA();
  // Check if autoplay is supported.
  checkAutoplaySupport();
}

function checkAutoplaySupport() {
  var playPromise = videoContent.play();
  if (playPromise !== undefined) {
    playPromise.then(onAutoplayWithSoundSuccess).catch(onAutoplayWithSoundFail);
  }
}

function onAutoplayWithSoundSuccess() {
  // If we make it here, unmuted autoplay works.
  videoContent.pause();
  autoplayAllowed = true;
  autoplayRequiresMuted = false;
  autoplayChecksResolved();
}

function onAutoplayWithSoundFail() {
  // Unmuted autoplay failed. Now try muted autoplay.
  checkMutedAutoplaySupport();
}

function checkMutedAutoplaySupport() {
  videoContent.volume = 0;
  videoContent.muted = true;
  var playPromise = videoContent.play();
  if (playPromise !== undefined) {
    playPromise.then(onMutedAutoplaySuccess).catch(onMutedAutoplayFail);
  }
}

function onMutedAutoplaySuccess() {
  // If we make it here, muted autoplay works but unmuted autoplay does not.
  videoContent.pause();
  autoplayAllowed = true;
  autoplayRequiresMuted = true;
  autoplayChecksResolved();
}

function onMutedAutoplayFail() {
  // Both muted and unmuted autoplay failed. Fall back to click to play.
  videoContent.volume = 1;
  videoContent.muted = false;
  autoplayAllowed = false;
  autoplayRequiresMuted = false;
  autoplayChecksResolved();
}

function autoplayChecksResolved() {
  // Request video ads.
  var adsRequest = new google.ima.AdsRequest();
  adsRequest.adTagUrl = <YOUR_AD_TAG_URL>;

  ...

  adsRequest.setAdWillAutoPlay(autoplayAllowed);
  adsRequest.setAdWillPlayMuted(autoplayRequiresMuted);
  adsLoader.requestAds(adsRequest);
}

function onAdsManagerLoaded() {
  ...
  if (autoplayAllowed) {
    playAds();
  } else {
    playButton.style.display = 'block';
  }
}

function playAds() {
  try {
    if (!adsInitialized) {
      adDisplayContainer.initialize();
      adsInitialized = true;
    }
    adsManager.init(640, 360, google.ima.ViewMode.NORMAL);
    adsManager.start();
  } catch (adError) {
    videoContent.play();
  }
}

iPhone에서 자동재생

iPhone에서 자동재생하려면 이전 코드 외에도 playsinline 매개변수를 동영상 태그에 추가해야 합니다.

index.html

<body>
  ...
  <video id="contentElement" playsinline muted>
    <source src="https://storage.googleapis.com/gvabox/media/samples/stock.mp4">
  </video>
</body>

이렇게 HTML을 변경하면 콘텐츠가 iPhone의 기본 전체화면 플레이어 대신 iPhone의 인라인 동영상 플레이어에서 재생됩니다.

자동재생 및 오디오 광고

광고가 음소거 상태로 자동재생될 가능성이 있다면 광고 요청에서 오디오 전용 광고가 반환되는지 여부를 고려해야 합니다. 이 경우에는 다음 중 하나를 사용하는 것이 좋습니다.

  • 동영상 광고만 요청하도록 다음 VAST URL 매개변수 ad_type=video를 업데이트합니다 (플레이어가 동영상을 지원하는 경우). URL 매개변수에 대한 자세한 내용은 이 Ad Manager 가이드를 참조하세요.
  • 광고를 음소거 상태로 시작하는 옵션을 삭제합니다.

IMA 오디오 통합에 대한 자세한 내용은 IMA 오디오 광고 가이드를 참고하세요.