aboutsummaryrefslogtreecommitdiffstats
path: root/src
diff options
context:
space:
mode:
Diffstat (limited to 'src')
-rw-r--r--src/js/config/defaults.js2
-rw-r--r--src/js/listeners.js14
-rw-r--r--src/js/plugins/ads.js56
-rw-r--r--src/js/plugins/previewThumbnails.js2
-rw-r--r--src/js/plyr.js7
-rw-r--r--src/js/plyr.polyfilled.js2
-rw-r--r--src/js/utils/is.js2
7 files changed, 42 insertions, 43 deletions
diff --git a/src/js/config/defaults.js b/src/js/config/defaults.js
index 0044d409..bd39d615 100644
--- a/src/js/config/defaults.js
+++ b/src/js/config/defaults.js
@@ -60,7 +60,7 @@ const defaults = {
// Sprite (for icons)
loadSprite: true,
iconPrefix: 'plyr',
- iconUrl: 'https://cdn.plyr.io/3.4.8/plyr.svg',
+ iconUrl: 'https://cdn.plyr.io/3.5.0-beta.4/plyr.svg',
// Blank video (used to prevent errors on source change)
blankVideo: 'https://cdn.plyr.io/static/blank.mp4',
diff --git a/src/js/listeners.js b/src/js/listeners.js
index 68a83d0b..3c65b824 100644
--- a/src/js/listeners.js
+++ b/src/js/listeners.js
@@ -414,20 +414,6 @@ class Listeners {
// Loading state
on.call(player, player.media, 'waiting canplay seeked playing', event => ui.checkLoading.call(player, event));
- // If autoplay, then load advertisement if required
- // TODO: Show some sort of loading state while the ad manager loads else there's a delay before ad shows
- on.call(player, player.media, 'playing', () => {
- if (!player.ads) {
- return;
- }
-
- // If ads are enabled, wait for them first
- if (player.ads.enabled && !player.ads.initialized) {
- // Wait for manager response
- player.ads.managerPromise.then(() => player.ads.play()).catch(() => player.play());
- }
- });
-
// Click video
if (player.supported.ui && player.config.clickToPlay && !player.isAudio) {
// Re-fetch the wrapper
diff --git a/src/js/plugins/ads.js b/src/js/plugins/ads.js
index c643c5dd..6efd3295 100644
--- a/src/js/plugins/ads.js
+++ b/src/js/plugins/ads.js
@@ -136,6 +136,7 @@ class Ads {
this.elements.container = createElement('div', {
class: this.player.config.classNames.ads,
});
+
this.player.elements.container.appendChild(this.elements.container);
// So we can run VPAID2
@@ -144,9 +145,11 @@ class Ads {
// Set language
google.ima.settings.setLocale(this.player.config.ads.language);
- // We assume the adContainer is the video container of the plyr element
- // that will house the ads
- this.elements.displayContainer = new google.ima.AdDisplayContainer(this.elements.container);
+ // Set playback for iOS10+
+ google.ima.settings.setDisableCustomPlaybackForIOS10Plus(this.player.config.playsinline);
+
+ // We assume the adContainer is the video container of the plyr element that will house the ads
+ this.elements.displayContainer = new google.ima.AdDisplayContainer(this.elements.container, this.player.media);
// Request video ads to be pre-loaded
this.requestAds();
@@ -237,6 +240,23 @@ class Ads {
// Get the cue points for any mid-rolls by filtering out the pre- and post-roll
this.cuePoints = this.manager.getCuePoints();
+ // Set volume to match player
+ this.manager.setVolume(this.player.volume);
+
+ // Add listeners to the required events
+ // Advertisement error events
+ this.manager.addEventListener(google.ima.AdErrorEvent.Type.AD_ERROR, error => this.onAdError(error));
+
+ // Advertisement regular events
+ Object.keys(google.ima.AdEvent.Type).forEach(type => {
+ this.manager.addEventListener(google.ima.AdEvent.Type[type], event => this.onAdEvent(event));
+ });
+
+ // Resolve our adsManager
+ this.trigger('loaded');
+ }
+
+ addCuePoints() {
// Add advertisement cue's within the time line if available
if (!is.empty(this.cuePoints)) {
this.cuePoints.forEach(cuePoint => {
@@ -255,21 +275,6 @@ class Ads {
}
});
}
-
- // Set volume to match player
- this.manager.setVolume(this.player.volume);
-
- // Add listeners to the required events
- // Advertisement error events
- this.manager.addEventListener(google.ima.AdErrorEvent.Type.AD_ERROR, error => this.onAdError(error));
-
- // Advertisement regular events
- Object.keys(google.ima.AdEvent.Type).forEach(type => {
- this.manager.addEventListener(google.ima.AdEvent.Type[type], event => this.onAdEvent(event));
- });
-
- // Resolve our adsManager
- this.trigger('loaded');
}
/**
@@ -409,7 +414,10 @@ class Ads {
const { container } = this.player.elements;
let time;
- // Add listeners to the required events
+ this.player.on('canplay', () => {
+ this.addCuePoints();
+ });
+
this.player.on('ended', () => {
this.loader.contentComplete();
});
@@ -488,10 +496,8 @@ class Ads {
// Ad is stopped
this.playing = false;
- // Play our video
- if (this.player.currentTime < this.player.duration) {
- this.player.play();
- }
+ // Play video
+ this.player.media.play();
}
/**
@@ -501,11 +507,11 @@ class Ads {
// Show the advertisement container
this.elements.container.style.zIndex = 3;
- // Ad is playing.
+ // Ad is playing
this.playing = true;
// Pause our video.
- this.player.pause();
+ this.player.media.pause();
}
/**
diff --git a/src/js/plugins/previewThumbnails.js b/src/js/plugins/previewThumbnails.js
index 6f6b87f5..834d16f2 100644
--- a/src/js/plugins/previewThumbnails.js
+++ b/src/js/plugins/previewThumbnails.js
@@ -231,7 +231,7 @@ class PreviewThumbnails {
}
}
- finishScrubbing() {
+ endScrubbing() {
this.mouseDown = false;
// Hide scrubbing preview. But wait until the video has successfully seeked before hiding the scrubbing preview
diff --git a/src/js/plyr.js b/src/js/plyr.js
index 927eb33d..ebc3d1de 100644
--- a/src/js/plyr.js
+++ b/src/js/plyr.js
@@ -1,6 +1,6 @@
// ==========================================================================
// Plyr
-// plyr.js v3.4.8
+// plyr.js v3.5.0-beta.4
// https://github.com/sampotts/plyr
// License: The MIT License (MIT)
// ==========================================================================
@@ -353,6 +353,11 @@ class Plyr {
return null;
}
+ // Intecept play with ads
+ if (this.ads && this.ads.enabled) {
+ this.ads.managerPromise.then(() => this.ads.play()).catch(() => this.media.play());
+ }
+
// Return the promise (for HTML5)
return this.media.play();
}
diff --git a/src/js/plyr.polyfilled.js b/src/js/plyr.polyfilled.js
index 42207a1e..a5e25b6b 100644
--- a/src/js/plyr.polyfilled.js
+++ b/src/js/plyr.polyfilled.js
@@ -1,6 +1,6 @@
// ==========================================================================
// Plyr Polyfilled Build
-// plyr.js v3.4.8
+// plyr.js v3.5.0-beta.4
// https://github.com/sampotts/plyr
// License: The MIT License (MIT)
// ==========================================================================
diff --git a/src/js/utils/is.js b/src/js/utils/is.js
index ab28f2ab..b005cd31 100644
--- a/src/js/utils/is.js
+++ b/src/js/utils/is.js
@@ -19,6 +19,7 @@ const isEvent = input => instanceOf(input, Event);
const isKeyboardEvent = input => instanceOf(input, KeyboardEvent);
const isCue = input => instanceOf(input, window.TextTrackCue) || instanceOf(input, window.VTTCue);
const isTrack = input => instanceOf(input, TextTrack) || (!isNullOrUndefined(input) && isString(input.kind));
+const isPromise = input => instanceOf(input, Promise);
const isEmpty = input =>
isNullOrUndefined(input) ||
@@ -65,6 +66,7 @@ export default {
keyboardEvent: isKeyboardEvent,
cue: isCue,
track: isTrack,
+ promise: isPromise,
url: isUrl,
empty: isEmpty,
};
generated by cgit v1.2.3 (git 2.25.1) at 2025-06-09 07:41:17 +0000