아웃스트림 광고 비디오 제어
1. VideoController 사용
-
PlayBehavior 설정
gladsdk.setHostMeta()
또는adSlot.setHostMeta()
를 사용하여 PlayBehavior를 MANUAL로 설정합니다.gladsdk.setHostMeta("playBehavior", "MANUAL");
adSlot.setHostMeta("playBehavior", "MANUAL");정보- AUTO_PLAY_ON_SDK (기본값)
- WIFI 전체 자동재생
- LTE n초 자동재생
- AUTO_PLAY_ON_SDK_ONLY_WIFI
- WIFI 전체 자동재생
- LTE 자동재생 X
- MANUAL
- WIFI 자동재생 X
- LTE 자동재생 X
- 서비스에서 VideoController를 통해 재생을 제어
- AUTO_PLAY_ON_SDK (기본값)
-
VideoController 획득
-
adSlot.getVideoController
를 통해 VideoController를 획득할 수 있습니다.adSlot.getVideoController(): Promise<VideoController>
getVideoController
는 Promise를 반환하며 VideoController를 사용할 수 없는 광고 타입일 경우 reject 됩니다.adSlot
.getVideoController()
.then(function (videoController) {
// videoController를 사용할 수 있는 아웃스트림 광고 타입
})
.catch(function () {
// videoController를 사용할 수 없는 광고 타입
});
-
-
VideoController 사용
-
VideoController를 통해 영상의 play / pause / mute / unmute / volume을 제어할 수 있습니다.
-
메소드를 호출할 때 userAction에 의한 동작인지 여부가 함께 전달되어야 합니다. (볼륨 동작 제외)
ex) 사용자가 unmute 버튼을 눌렀을 때 호출하는 경우:
videoController.mute(true)
ex) 사용자가 unmute 버튼을 누르지 않았지만 unmute를 호출하는 경우:videoController.mute(false)
ex) 사용자가 재생 버튼을 눌렀을 때 호출하는 경우:
videoController.play(true)
ex) 사용자가 재생 버튼을 누르지 않았지만 viewable에 의해 재생을 호출하는 경우:videoController.play(false)
videoController.play(false);
videoController.pause(false);
videoController.mute(false);
videoController.unmute(false);
videoController.setVolume(0.5); // 볼륨 값은 0~1 사이의 값이어야합니다.
videoController.getVolume(); // 현재 볼륨 값을 반환합니다.
-
2. EventListener
VideoController.addEventListener
를 통해 play / pause / ended / muted 이벤트 리스너를 추가할 수 있습니다.
const videoController = await adSlot.getVideoController();
videoController.addEventListener("play", function () {
//
});
videoController.addEventListener("pause", function () {
//
});
videoController.addEventListener("ended", function () {
//
});
videoController.addEventListener("mute", function (muted: boolean) {
//
});
3. Reset
-
광고 컨텐츠의 설명문구 영역과 재생 상태를 초기화 하기 위해 사용됩니다.
reset시 광고는
일시정지
,currentTime = 0
,재생 버튼이 보이지 않는 상태
로 변경됩니다.var adSlot = gladsdk.findAdSlot(...);
adSlot.setHostMeta("reset", true);
adSlot.setHostMeta("reset", false);gladsdk.setHostMeta()
는 모든 광고 슬롯에 hostMeta를 적용 시키므로 각 슬롯별로 reset을 적용해야합니다.hostMeta
는 객체 형태로 설정된 값을 계속 유지하므로, true일 때만 호출되도록 하기 위해 true로 호출 후 false로 재 호출해주어야 합니다. -
ex) 숏폼의 컨텐츠가 다른 컨텐츠로 변경되며 기존 컨텐츠가 초기화 되어야 할 때
4. 광고 높이 설정
NativeHeight
hostMeta 값을 설정하여 광고의 높이를 설정할 수 있습니다.
gladsdk.setHostMeta("NativeHeight", height);
5. AdMute 처리
-
AdMute 상태 변경 이벤트
// AD mute 상태 변경
window.gladsdk.addEventListener(window.gladsdk.event.AD_MUTE_STATE_CHANGED, function (ad, muteState) {
console.debug(window.gladsdk.event.AD_MUTE_STATE_CHANGED);
if (muteState === window.gladsdk.AdMuteState.INIT) {
// INIT: AD mute 버튼이 보이는 초기 상태
}
if (muteState === window.gladsdk.AdMuteState.FEEDBACK_ON) {
// FEEDBACK_ON: AD mute 버튼이 클릭되어 mute 여부를 확인받는 상태
}
if (muteState === window.gladsdk.AdMuteState.QUESTION) {
// QUESTION: AD mute 사유를 선택하는 상태
}
if (muteState === window.gladsdk.AdMuteState.RESULT) {
// RESULT: AD mute가 완료된 상태
}
}); -
AdMute 완료 시 광고 삭제 처리
AdMuteState.RESULT
와AD_MUTE_STATE_COMPLETED
는 동일한 시점에 발화됩니다.// AD mute 발생
window.gladsdk.addEventListener(window.gladsdk.event.AD_MUTE_COMPLETED, function (ad) {
console.debug(window.gladsdk.event.AD_MUTE_COMPLETED);
});