diff --git a/src/js/defaults.js b/src/js/defaults.js index 2a438d13..f7738afc 100644 --- a/src/js/defaults.js +++ b/src/js/defaults.js @@ -259,7 +259,7 @@ const defaults = { // Ads 'adsloaded', 'adscontentpause', - 'adsconentresume', + 'adscontentresume', 'adstarted', 'adsmidpoint', 'adscomplete', diff --git a/src/js/plugins/ads.js b/src/js/plugins/ads.js index 0faf0f2f..62162e84 100644 --- a/src/js/plugins/ads.js +++ b/src/js/plugins/ads.js @@ -35,36 +35,6 @@ class Ads { this.enabled = player.config.ads.enabled; this.playing = false; this.initialized = false; - this.blocked = false; - this.enabled = utils.is.url(player.config.ads.tag); - - // Check if a tag URL is provided. - 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, @@ -76,28 +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(); + } + } + // 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()'); - // Setup a simple promise to resolve if the IMA loader is ready - this.loaderPromise = new Promise(resolve => { - this.on('ADS_LOADER_LOADED', () => resolve()); - }); - - // Setup a promise to resolve if the IMA manager is ready - this.managerPromise = new Promise(resolve => { - this.on('ADS_MANAGER_LOADED', () => resolve()); - }); - // Clear the safety timer this.managerPromise.then(() => { this.clearSafetyTimer('onAdsManagerLoaded()'); }); + // Set listeners on the Plyr instance + this.listeners(); + // Setup the IMA SDK this.setupIMA(); } @@ -114,7 +106,6 @@ class Ads { // Create the container for our advertisements this.elements.container = utils.createElement('div', { class: this.player.config.classNames.ads, - hidden: '', }); this.player.elements.container.appendChild(this.elements.container); @@ -209,7 +200,7 @@ class Ads { // Add advertisement cue's within the time line if available this.cuePoints.forEach(cuePoint => { - if (cuePoint !== 0 && cuePoint !== -1) { + if (cuePoint !== 0 && cuePoint !== -1 && cuePoint < this.player.duration) { const seekElement = this.player.elements.progress; if (seekElement) { @@ -454,8 +445,8 @@ class Ads { * Resume our video. */ resumeContent() { - // Hide our ad container - utils.toggleHidden(this.elements.container, true); + // Hide the advertisement container + this.elements.container.style.zIndex = ''; // Ad is stopped this.playing = false; @@ -470,8 +461,8 @@ class Ads { * Pause our video */ pauseContent() { - // Show our ad container. - utils.toggleHidden(this.elements.container, false); + // Show the advertisement container + this.elements.container.style.zIndex = '3'; // Ad is playing. this.playing = true; @@ -512,7 +503,7 @@ class Ads { // Re-set our adsManager promises this.managerPromise = new Promise(resolve => { - this.on('ADS_MANAGER_LOADED', () => resolve()); + this.on('ADS_MANAGER_LOADED', resolve); this.player.debug.log(this.manager); }); diff --git a/src/js/plyr.js b/src/js/plyr.js index 7f8ad18c..04913046 100644 --- a/src/js/plyr.js +++ b/src/js/plyr.js @@ -309,13 +309,15 @@ class Plyr { * Play the media, or play the advertisement (if they are not blocked) */ play() { - // TODO: Always return a promise? - if (this.ads.enabled && !this.ads.initialized && !this.ads.blocked) { - this.ads.play(); - return null; + // Return the promise (for HTML5) + if (this.ads.enabled && !this.ads.initialized) { + return this.ads.managerPromise.then(() => { + this.ads.play(); + }).catch(() => { + this.media.play(); + }); } - // Return the promise (for HTML5) return this.media.play(); } diff --git a/src/sass/plugins/ads.scss b/src/sass/plugins/ads.scss index 21a28e02..89330611 100644 --- a/src/sass/plugins/ads.scss +++ b/src/sass/plugins/ads.scss @@ -9,7 +9,15 @@ position: absolute; right: 0; top: 0; - z-index: 3; // Above the controls + z-index: -1; // Hide it. + + // Make sure the inner container is big enough for the ad creative. + > div, + > div iframe { + position: absolute; + width: 100%; + height: 100%; + } &::after { background: rgba($plyr-color-gunmetal, 0.8);