Outstream Ad Video Control

1. Using VideoController

1. Setting PlayBehavior

   Use gladsdk.setHostMeta() or adSlot.setHostMeta() to set PlayBehavior to MANUAL.

   gladsdk.setHostMeta("playBehavior", "MANUAL");
   adSlot.setHostMeta("playBehavior", "MANUAL");
   info

   1. AUTO_PLAY_ON_SDK (default)
      • WiFi full autoplay
      • LTE n seconds autoplay
   2. AUTO_PLAY_ON_SDK_ONLY_WIFI
      • WiFi full autoplay
      • LTE no autoplay
   3. MANUAL
      • WiFi no autoplay
      • LTE no autoplay
      • Playback control through VideoController in the service

2. Getting VideoController

   • You can get VideoController through adSlot.getVideoController.

     adSlot.getVideoController(): Promise<VideoController>

     getVideoController returns a Promise and will be rejected if the ad type doesn't support VideoController.

     adSlot
       .getVideoController()
       .then(function (videoController) {
         // Outstream ad type that can use videoController
       })
       .catch(function () {
         // Ad type that cannot use videoController
       });

3. Using VideoController

   • You can control video play / pause / mute / unmute / volume through VideoController.

   • When calling methods, whether the action is caused by userAction must be passed together (except for volume operations).

     ex) When called when user clicks unmute button: videoController.mute(true)
     ex) When unmute is called without user clicking unmute button: videoController.mute(false)

     ex) When called when user clicks play button: videoController.play(true)
     ex) When play is called by viewable without user clicking play button: videoController.play(false)

     videoController.play(false);
     videoController.pause(false);
     videoController.mute(false);
     videoController.unmute(false);
     
     videoController.setVolume(0.5); // Volume value must be between 0~1
     videoController.getVolume(); // Returns current volume value

2. EventListener

You can add play / pause / ended / muted event listeners through VideoController.addEventListener.

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

• Used to reset the description area and playback state of ad content.

  When reset, the ad changes to paused, currentTime = 0, and play button is not visible state.

  var adSlot = gladsdk.findAdSlot(...);
  adSlot.setHostMeta("reset", true);
  adSlot.setHostMeta("reset", false);

  Since gladsdk.setHostMeta() applies hostMeta to all ad slots, reset must be applied to each slot individually.

  Since hostMeta maintains the set values in object form, to ensure it's only called when true, you must call it with true and then call it again with false.

• Example: When short-form content changes to other content and existing content needs to be reset

  

4. Setting Ad Height

You can set the height of the ad by setting the NativeHeight hostMeta value.

gladsdk.setHostMeta("NativeHeight", height);

5. AdMute Handling

1. AdMute State Change Event

   // AD mute state change
   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: Initial state where AD mute button is visible
     }
     if (muteState === window.gladsdk.AdMuteState.FEEDBACK_ON) {
       // FEEDBACK_ON: State where AD mute button is clicked and mute status is being confirmed
     }
     if (muteState === window.gladsdk.AdMuteState.QUESTION) {
       // QUESTION: State where AD mute reason is being selected
     }
     if (muteState === window.gladsdk.AdMuteState.RESULT) {
       // RESULT: State where AD mute is completed
     }
   });

2. Ad Deletion Handling When AdMute is Completed

   AdMuteState.RESULT and AD_MUTE_STATE_COMPLETED are triggered at the same time.

   // AD mute occurrence
   window.gladsdk.addEventListener(window.gladsdk.event.AD_MUTE_COMPLETED, function (ad) {
     console.debug(window.gladsdk.event.AD_MUTE_COMPLETED);
   });