# Rewarded Video Advertisement

The rewarded video ad component is composed of the client's native images, text, and video controls. Its level is the highest and will be overlaid on the on-screen Canvas.

Developers can create a rewarded video advertisement component by calling wx.createRewardedVideoAd. This method returns a global singleton.

let video1 = wx.createRewardedVideoAd({ adUnitId: 'xxxx' })
let video2 = wx.createRewardedVideoAd({ adUnitId: 'xxxx' })
console.log(video1 === video2)
// true

Rewarded video ad components are hidden by default and can be created in advance to initialize components in advance.

let rewardedVideoAd = wx.createRewardedVideoAd({ adUnitId: 'xxxx' })

# Show/hide

The rewarded video advertisement component is hidden by default and needs to be displayed by calling RewardedVideoAd.show().

bannerAd.show()

The ad is closed only when the user clicks the 'Close Ad' button on the Rewarded Video Ad component. Developers have no control over the hiding of the rewarded video ad components.

# Advertisement Fetching Success and Failure

The incentive video ad components fetch ads and update them automatically. After the component is created, advertisement will be fetched once. When the user clicks Close Ad, it will pull the next ad.

If fetched successfully, RewardedVideoAd.onLoad() will be executed, and the Promise returned by RewardedVideoAd.show() will also be a resolved Promise. There is no argument passed in either callback functions.

rewardedVideoAd.onLoad(() => {
  console.log('rewarded video advertisement loaded successfully')
})

rewardedVideoAd.show()
.then(() => console.log('rewarded video advertisement display'))

If the fetching fails, the callback function registered via RewardedVideoAd.onError() will be executed, and the parameters of callback function is an object containing the error message. [Common Abnormal Error Reference Document] ((RewardedVideoAd.onError))

rewardedVideoAd.onError(err => {
  console.log(err)
})

The Promise returned by RewardedVideoAd.show() will also be a rejected Promise.

rewardedVideoAd.show()
.catch(err => console.log(err))

# Failed to Fetch, Re-fetch

If component's auto-fetching fails once, the subsequent show() call will be rejected. At this moment, you can call RewardedVideoAd.load() to re-fetch the ad manually.

rewardedVideoAd.show()
.catch(err => {
    rewardedVideoAd.load()
    .then(() => rewardedVideoAd.show())
})

If the auto-fetching of the component is successful, then the method of calling the load() will return a resolved Promise directly without fetching the ad.

rewardedVideoAd.load()
.then(() => rewardedVideoAd.show())

# Subscribe Users to Close Ads

The ad is closed only when the user clicks the 'Close Ad' button on the Rewarded Video Ad component. This event can be subscribed by RewardedVideoAd.onClose().

For the base library version below 2.1.0, Close button appears only after rewarded video’s playback, so the playback is over when onClose is triggered, and the user can be considered to have seen the advertisement when 'onClose` is triggered.

For the base library version above or same as 2.1.0, the close button will be resident, as shown in the figure below

The callback function of RewardedVideoAd.onClose() will populate a parameter res, res.isEnded describes the state when the advertisement is closed.

For the base library version above or same as 2.1.0, the developer needs to determine whether the video finishes playing or not according to res.isEnded, and rewards can be sent to the user.

rewardedVideoAd.onClose(res => {
    // The user clicked the [Close Ad] button
    // For the base library version below 2.1.0, res is a undefined
    if (res && res.isEnded || res === undefined) {
      // If the video plays to the end normally, game rewards can be sent.
    }
    else {
        // If the video quit in the middle of playing , no game rewards can be sent.
    }
})