Ad block detection would not work when calling play() right after creating the player instance, so the adsManager now also rejects on such a case. Also made sure that calling play() will wait for the adsManager promise to resolve or otherwise return the media.play() method.
This commit is contained in:
parent
819f7d1080
commit
69ffcbad27
@ -35,35 +35,6 @@ class Ads {
|
||||
this.enabled = player.config.ads.enabled;
|
||||
this.playing = false;
|
||||
this.initialized = false;
|
||||
this.blocked = false;
|
||||
|
||||
// Check if ads are enabled.
|
||||
if (!this.enabled) {
|
||||
return;
|
||||
}
|
||||
|
||||
// Check if the Google IMA3 SDK is loaded or load it ourselves
|
||||
if (!utils.is.object(window.google)) {
|
||||
utils.loadScript(
|
||||
player.config.urls.googleIMA.api,
|
||||
() => {
|
||||
this.ready();
|
||||
},
|
||||
() => {
|
||||
// Script failed to load or is blocked
|
||||
this.blocked = true;
|
||||
this.player.debug.log('Ads error: Google IMA SDK failed to load');
|
||||
},
|
||||
);
|
||||
} else {
|
||||
this.ready();
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Get the ads instance ready.
|
||||
*/
|
||||
ready() {
|
||||
this.elements = {
|
||||
container: null,
|
||||
displayContainer: null,
|
||||
@ -75,26 +46,50 @@ class Ads {
|
||||
this.safetyTimer = null;
|
||||
this.countdownTimer = null;
|
||||
|
||||
// Set listeners on the Plyr instance
|
||||
this.listeners();
|
||||
if (this.enabled) {
|
||||
// Check if the Google IMA3 SDK is loaded or load it ourselves
|
||||
if (!utils.is.object(window.google)) {
|
||||
utils.loadScript(
|
||||
player.config.urls.googleIMA.api,
|
||||
() => {
|
||||
this.ready();
|
||||
},
|
||||
() => {
|
||||
// Script failed to load or is blocked
|
||||
this.handleEventListeners('ERROR');
|
||||
this.player.debug.log('Ads error: Google IMA SDK failed to load');
|
||||
},
|
||||
);
|
||||
} else {
|
||||
this.ready();
|
||||
}
|
||||
}
|
||||
|
||||
// Start ticking our safety timer. If the whole advertisement
|
||||
// thing doesn't resolve within our set time; we bail
|
||||
this.startSafetyTimer(12000, 'ready()');
|
||||
|
||||
// Setup a promise to resolve if the IMA manager is ready
|
||||
// Setup a promise to resolve when the IMA manager is ready
|
||||
this.managerPromise = new Promise((resolve, reject) => {
|
||||
// The ad is pre-loaded and ready
|
||||
this.on('ADS_MANAGER_LOADED', () => resolve());
|
||||
// Ads failed
|
||||
this.on('ERROR', () => reject());
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* Get the ads instance ready.
|
||||
*/
|
||||
ready() {
|
||||
// Start ticking our safety timer. If the whole advertisement
|
||||
// thing doesn't resolve within our set time; we bail
|
||||
this.startSafetyTimer(12000, 'ready()');
|
||||
|
||||
// Clear the safety timer
|
||||
this.managerPromise.then(() => {
|
||||
this.clearSafetyTimer('onAdsManagerLoaded()');
|
||||
});
|
||||
|
||||
// Set listeners on the Plyr instance
|
||||
this.listeners();
|
||||
|
||||
// Setup the IMA SDK
|
||||
this.setupIMA();
|
||||
}
|
||||
|
@ -309,14 +309,15 @@ class Plyr {
|
||||
* Play the media, or play the advertisement (if they are not blocked)
|
||||
*/
|
||||
play() {
|
||||
if (this.ads.enabled && !this.ads.initialized && !this.ads.blocked) {
|
||||
// Return the promise (for HTML5)
|
||||
if (this.ads.enabled && !this.ads.initialized) {
|
||||
this.ads.managerPromise.then(() => {
|
||||
this.ads.play();
|
||||
}).catch(() => {
|
||||
this.media.play();
|
||||
return this.media.play();
|
||||
});
|
||||
} else {
|
||||
this.media.play();
|
||||
return this.media.play();
|
||||
}
|
||||
}
|
||||
|
||||
|
@ -12,15 +12,11 @@
|
||||
z-index: -1; // Hide it.
|
||||
|
||||
// Make sure the inner container is big enough for the ad creative.
|
||||
> div {
|
||||
> div,
|
||||
> div iframe {
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
iframe {
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
&::after {
|
||||
|
Loading…
x
Reference in New Issue
Block a user