Setting up Ads in React Native
The Bitmovin Player SDKs are capable of displaying Ads out of the box and there are two ways they can be configured with the player. One option is to use static configuration in the player config object, and the other is to schedule them dynamically using Player.scheduleAd
.
Static Ad configuration
The easiest way to configure Ads is by adding the advertisingConfig
property to the player configuration object. All that needs to be provided is a URL pointing to a target Ad tag along with the type of the tag.
const player = usePlayer({
licenseKey: '<PLAYER_LICENSE_KEY>',
advertisingConfig: {
// Each object in `schedule` represents an `AdItem`.
schedule: [
// An `AdItem` represents a time slot within the streamed content dedicated to ads playback.
{
// Each item specifies a list of sources with a type and URL to the ad manifest in the ads
// server. All but the first source act as fallback if the first one fails to load.
// The start and end of an ad break are signaled via `AdBreakStartedEvent` and `AdBreakFinishedEvent`.
sources: [
{
type: AdSourceType.IMA,
tag: 'https://pubads.g.doubleclick.net/gampad/ads?sz=640x480&iu=/124319096/external/single_ad_samples&ciu_szs=300x250&impl=s&gdfp_req=1&env=vp&output=vast&unviewed_position_start=1&cust_params=deployment%3Ddevsite%26sample_ct%3Dskippablelinear&correlator=',
},
// Fallback sources...
],
// Each item also specifies the position where it should appear during playback.
// The possible position values are documented below.
// The default value is `pre`.
position: '20%',
},
],
},
});
The possible AdItem
.position
values are:
pre
: pre-roll ad (for VoD and Live streaming; appears before playback starts)post
: post-roll ad (for VoD streaming only; appears after playback finishes)- Fractional seconds: e.g.
10
,12.5
(mid-roll ad, for VoD and Live streaming) - Percentage of the entire video duration: e.g.
25%
,50%
(mid-roll ad, for VoD streaming only) - Timecode
hh:mm:ss.mmm:
e.g.00:10:30.000
,01:00:00.000
(mid-roll ad, for VoD streaming only)
Dynamic Ad scheduling
To gain more flexibility, it is also possible to schedule an AdItem
dynamically in code using the Player instance. To do this, you need to call the scheduleAd
method.
// The object passed to `scheduleAd` must be an `AdItem`.
player.scheduleAd({
// Ad source with fallbacks.
sources: [
{
tag: '<AD-URL>',
type: AdSourceType.IMA,
},
],
});
An AdScheduledEvent
is dispatched when the ad is successfully scheduled via scheduleAd
.
Also, during playback, it's also possible to check whether an ad is being played with player.isAd()
and skip the ad being currently played with player.skipAd()
(see AdSkippedEvent
).
Supported ad-related events
The supported PlayerView
events for ads are:
onAdBreakFinished
onAdBreakStarted
onAdClicked
onAdError
onAdFinished
onAdManifestLoad
onAdManifestLoaded
onAdQuartile
onAdScheduled
onAdSkipped
onAdStarted
You can find a complete Ads example in the example app.
Updated 2 months ago