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.enabled = player.config.ads.enabled;
|
||||||
this.playing = false;
|
this.playing = false;
|
||||||
this.initialized = 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 = {
|
this.elements = {
|
||||||
container: null,
|
container: null,
|
||||||
displayContainer: null,
|
displayContainer: null,
|
||||||
@ -75,26 +46,50 @@ class Ads {
|
|||||||
this.safetyTimer = null;
|
this.safetyTimer = null;
|
||||||
this.countdownTimer = null;
|
this.countdownTimer = null;
|
||||||
|
|
||||||
// Set listeners on the Plyr instance
|
if (this.enabled) {
|
||||||
this.listeners();
|
// 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
|
// Setup a promise to resolve when the IMA manager is ready
|
||||||
// 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
|
|
||||||
this.managerPromise = new Promise((resolve, reject) => {
|
this.managerPromise = new Promise((resolve, reject) => {
|
||||||
// The ad is pre-loaded and ready
|
// The ad is pre-loaded and ready
|
||||||
this.on('ADS_MANAGER_LOADED', () => resolve());
|
this.on('ADS_MANAGER_LOADED', () => resolve());
|
||||||
// Ads failed
|
// Ads failed
|
||||||
this.on('ERROR', () => reject());
|
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
|
// Clear the safety timer
|
||||||
this.managerPromise.then(() => {
|
this.managerPromise.then(() => {
|
||||||
this.clearSafetyTimer('onAdsManagerLoaded()');
|
this.clearSafetyTimer('onAdsManagerLoaded()');
|
||||||
});
|
});
|
||||||
|
|
||||||
|
// Set listeners on the Plyr instance
|
||||||
|
this.listeners();
|
||||||
|
|
||||||
// Setup the IMA SDK
|
// Setup the IMA SDK
|
||||||
this.setupIMA();
|
this.setupIMA();
|
||||||
}
|
}
|
||||||
|
@ -309,14 +309,15 @@ class Plyr {
|
|||||||
* Play the media, or play the advertisement (if they are not blocked)
|
* Play the media, or play the advertisement (if they are not blocked)
|
||||||
*/
|
*/
|
||||||
play() {
|
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.managerPromise.then(() => {
|
||||||
this.ads.play();
|
this.ads.play();
|
||||||
}).catch(() => {
|
}).catch(() => {
|
||||||
this.media.play();
|
return this.media.play();
|
||||||
});
|
});
|
||||||
} else {
|
} else {
|
||||||
this.media.play();
|
return this.media.play();
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -12,15 +12,11 @@
|
|||||||
z-index: -1; // Hide it.
|
z-index: -1; // Hide it.
|
||||||
|
|
||||||
// Make sure the inner container is big enough for the ad creative.
|
// Make sure the inner container is big enough for the ad creative.
|
||||||
> div {
|
> div,
|
||||||
|
> div iframe {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
iframe {
|
|
||||||
position: absolute;
|
|
||||||
width: 100%;
|
|
||||||
height: 100%;
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
&::after {
|
&::after {
|
||||||
|
Loading…
x
Reference in New Issue
Block a user