aboutsummaryrefslogtreecommitdiffstats
path: root/src/js
diff options
context:
space:
mode:
Diffstat (limited to 'src/js')
-rw-r--r--src/js/captions.js3
-rw-r--r--src/js/controls.js2
-rw-r--r--src/js/fullscreen.js5
-rw-r--r--src/js/html5.js3
-rw-r--r--src/js/listeners.js11
-rw-r--r--src/js/plugins/ads.js3
-rw-r--r--src/js/plyr.d.ts32
-rw-r--r--src/js/plyr.js5
-rw-r--r--src/js/utils/elements.js2
-rw-r--r--src/js/utils/promise.js27
10 files changed, 75 insertions, 18 deletions
diff --git a/src/js/captions.js b/src/js/captions.js
index e33fd81a..724def9e 100644
--- a/src/js/captions.js
+++ b/src/js/captions.js
@@ -151,7 +151,8 @@ const captions = {
toggleClass(this.elements.container, this.config.classNames.captions.enabled, !is.empty(tracks));
// Update available languages in list
- if ((this.config.controls || []).includes('settings') && this.config.settings.includes('captions')) {
+ if ((is.array(this.config.controls) && this.config.controls.includes('settings'))
+ && this.config.settings.includes('captions')) {
controls.setCaptionsMenu.call(this);
}
},
diff --git a/src/js/controls.js b/src/js/controls.js
index 66ec7139..37df497f 100644
--- a/src/js/controls.js
+++ b/src/js/controls.js
@@ -111,7 +111,7 @@ const controls = {
setAttributes(
icon,
extend(attributes, {
- role: 'presentation',
+ 'aria-hidden': 'true',
focusable: 'false',
}),
);
diff --git a/src/js/fullscreen.js b/src/js/fullscreen.js
index c74b3406..d92552e2 100644
--- a/src/js/fullscreen.js
+++ b/src/js/fullscreen.js
@@ -8,6 +8,7 @@ import browser from './utils/browser';
import { getElements, hasClass, toggleClass } from './utils/elements';
import { on, triggerEvent } from './utils/events';
import is from './utils/is';
+import { silencePromise } from './utils/promise';
class Fullscreen {
constructor(player) {
@@ -118,7 +119,7 @@ class Fullscreen {
const element = !this.prefix ? document.fullscreenElement : document[`${this.prefix}${this.property}Element`];
- return element === this.target;
+ return (element && element.shadowRoot) ? element === this.target.getRootNode().host : element === this.target;
}
// Get target element
@@ -268,7 +269,7 @@ class Fullscreen {
// iOS native fullscreen
if (browser.isIos && this.player.config.fullscreen.iosNative) {
this.target.webkitExitFullscreen();
- this.player.play();
+ silencePromise(this.player.play());
} else if (!Fullscreen.native || this.forceFallback) {
this.toggleFallback(false);
} else if (!this.prefix) {
diff --git a/src/js/html5.js b/src/js/html5.js
index 0591a709..6e8c6483 100644
--- a/src/js/html5.js
+++ b/src/js/html5.js
@@ -6,6 +6,7 @@ import support from './support';
import { removeElement } from './utils/elements';
import { triggerEvent } from './utils/events';
import is from './utils/is';
+import { silencePromise } from './utils/promise';
import { setAspectRatio } from './utils/style';
const html5 = {
@@ -101,7 +102,7 @@ const html5 = {
// Resume playing
if (!paused) {
- player.play();
+ silencePromise(player.play());
}
});
diff --git a/src/js/listeners.js b/src/js/listeners.js
index 6a0046ee..d134a350 100644
--- a/src/js/listeners.js
+++ b/src/js/listeners.js
@@ -9,6 +9,7 @@ import browser from './utils/browser';
import { getElement, getElements, matches, toggleClass } from './utils/elements';
import { off, on, once, toggleListener, triggerEvent } from './utils/events';
import is from './utils/is';
+import { silencePromise } from './utils/promise';
import { getAspectRatio, setAspectRatio } from './utils/style';
class Listeners {
@@ -99,7 +100,7 @@ class Listeners {
case 75:
// Space and K key
if (!repeat) {
- player.togglePlay();
+ silencePromise(player.togglePlay());
}
break;
@@ -431,9 +432,9 @@ class Listeners {
if (player.ended) {
this.proxy(event, player.restart, 'restart');
- this.proxy(event, player.play, 'play');
+ this.proxy(event, () => { silencePromise(player.play()) }, 'play');
} else {
- this.proxy(event, player.togglePlay, 'play');
+ this.proxy(event, () => { silencePromise(player.togglePlay()) }, 'play');
}
});
}
@@ -539,7 +540,7 @@ class Listeners {
// Play/pause toggle
if (elements.buttons.play) {
Array.from(elements.buttons.play).forEach(button => {
- this.bind(button, 'click', player.togglePlay, 'play');
+ this.bind(button, 'click', () => { silencePromise(player.togglePlay()) }, 'play');
});
}
@@ -681,7 +682,7 @@ class Listeners {
// If we're done seeking and it was playing, resume playback
if (play && done) {
seek.removeAttribute(attribute);
- player.play();
+ silencePromise(player.play());
} else if (!done && player.playing) {
seek.setAttribute(attribute, '');
player.pause();
diff --git a/src/js/plugins/ads.js b/src/js/plugins/ads.js
index 6b4fca10..62def372 100644
--- a/src/js/plugins/ads.js
+++ b/src/js/plugins/ads.js
@@ -11,6 +11,7 @@ import { triggerEvent } from '../utils/events';
import i18n from '../utils/i18n';
import is from '../utils/is';
import loadScript from '../utils/load-script';
+import { silencePromise } from '../utils/promise';
import { formatTime } from '../utils/time';
import { buildUrlParams } from '../utils/urls';
@@ -510,7 +511,7 @@ class Ads {
this.playing = false;
// Play video
- this.player.media.play();
+ silencePromise(this.player.media.play());
}
/**
diff --git a/src/js/plyr.d.ts b/src/js/plyr.d.ts
index cd204a6f..3071f2ec 100644
--- a/src/js/plyr.d.ts
+++ b/src/js/plyr.d.ts
@@ -94,9 +94,8 @@ declare class Plyr {
/**
* Gets or sets the quality for the player. The setter accepts a value from the options specified in your config.
- * Remarks: YouTube only. HTML5 will follow.
*/
- quality: string;
+ quality: number;
/**
* Gets or sets the current loop state of the player.
@@ -134,6 +133,21 @@ declare class Plyr {
*/
pip: boolean;
+ /**
+ * Gets or sets the aspect ratio for embedded players.
+ */
+ ratio?: string;
+
+ /**
+ * Returns the current video Provider
+ */
+ readonly provider: 'html5' | 'vimeo' | 'youtube';
+
+ /**
+ * Returns the native API for Vimeo or Youtube players
+ */
+ readonly embed?: any;
+
readonly fullscreen: Plyr.FullscreenControl;
/**
@@ -472,11 +486,21 @@ declare namespace Plyr {
* enabled: Whether to enable vi.ai ads. publisherId: Your unique vi.ai publisher ID.
*/
ads?: AdOptions;
+
+ /**
+ * Vimeo Player Options.
+ */
+ vimeo?: object;
+
+ /**
+ * Youtube Player Options.
+ */
+ youtube?: object;
}
interface QualityOptions {
- default: string;
- options: string[];
+ default: number;
+ options: number[];
}
interface LoopOptions {
diff --git a/src/js/plyr.js b/src/js/plyr.js
index 00d33463..00b95a5f 100644
--- a/src/js/plyr.js
+++ b/src/js/plyr.js
@@ -27,6 +27,7 @@ import is from './utils/is';
import loadSprite from './utils/load-sprite';
import { clamp } from './utils/numbers';
import { cloneDeep, extend } from './utils/objects';
+import { silencePromise } from './utils/promise';
import { getAspectRatio, reduceAspectRatio, setAspectRatio, validateRatio } from './utils/style';
import { parseUrl } from './utils/urls';
@@ -303,7 +304,7 @@ class Plyr {
// Autoplay if required
if (this.isHTML5 && this.config.autoplay) {
- setTimeout(() => this.play(), 10);
+ setTimeout(() => silencePromise(this.play()), 10);
}
// Seek time will be recorded (in listeners.js) so we can prevent hiding controls for a few seconds after seek
@@ -356,7 +357,7 @@ class Plyr {
// Intecept play with ads
if (this.ads && this.ads.enabled) {
- this.ads.managerPromise.then(() => this.ads.play()).catch(() => this.media.play());
+ this.ads.managerPromise.then(() => this.ads.play()).catch(() => silencePromise(this.media.play()));
}
// Return the promise (for HTML5)
diff --git a/src/js/utils/elements.js b/src/js/utils/elements.js
index b88aad0c..43f46416 100644
--- a/src/js/utils/elements.js
+++ b/src/js/utils/elements.js
@@ -221,7 +221,7 @@ export function hasClass(element, className) {
// Element matches selector
export function matches(element, selector) {
- const prototype = { Element };
+ const prototype = Element.prototype;
function match() {
return Array.from(document.querySelectorAll(selector)).includes(this);
diff --git a/src/js/utils/promise.js b/src/js/utils/promise.js
new file mode 100644
index 00000000..42fcc2c3
--- /dev/null
+++ b/src/js/utils/promise.js
@@ -0,0 +1,27 @@
+/**
+ * Returns whether an object is `Promise`-like (i.e. has a `then` method).
+ *
+ * @param {Object} value
+ * An object that may or may not be `Promise`-like.
+ *
+ * @return {boolean}
+ * Whether or not the object is `Promise`-like.
+ */
+export function isPromise(value) {
+ return value !== undefined && value !== null && typeof value.then === 'function';
+}
+
+/**
+ * Silence a Promise-like object.
+ *
+ * This is useful for avoiding non-harmful, but potentially confusing "uncaught
+ * play promise" rejection error messages.
+ *
+ * @param {Object} value
+ * An object that may or may not be `Promise`-like.
+ */
+export function silencePromise(value) {
+ if (isPromise(value)) {
+ value.then(null, () => {});
+ }
+}
generated by cgit v1.2.3 (git 2.25.1) at 2025-06-11 04:26:14 +0000