자동재생은 데스크톱 및 모바일 웹 기기에서 지원됩니다.
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 오디오 광고 가이드를 참고하세요.