diff --git a/src/js/player.js b/src/js/player.js index 83a2aa9f17..9d0709e8e6 100644 --- a/src/js/player.js +++ b/src/js/player.js @@ -820,27 +820,28 @@ class Player extends Component { * * @see [Video Element Attributes]{@link https://developer.mozilla.org/en-US/docs/Web/HTML/Element/video#attr-crossorigin} * - * @param {string} [value] + * @param {string|null} [value] * The value to set the `Player`'s crossOrigin to. If an argument is - * given, must be one of `anonymous` or `use-credentials`. + * given, must be one of `'anonymous'` or `'use-credentials'`, or 'null'. * - * @return {string|undefined} + * @return {string|null|undefined} * - The current crossOrigin value of the `Player` when getting. * - undefined when setting */ crossOrigin(value) { - if (!value) { + // `null` can be set to unset a value + if (typeof value === 'undefined') { return this.techGet_('crossOrigin'); } - if (value !== 'anonymous' && value !== 'use-credentials') { - log.warn(`crossOrigin must be "anonymous" or "use-credentials", given "${value}"`); + if (value !== null && value !== 'anonymous' && value !== 'use-credentials') { + log.warn(`crossOrigin must be null, "anonymous" or "use-credentials", given "${value}"`); return; } this.techCall_('setCrossOrigin', value); if (this.posterImage) { - this.posterImage.$('img').crossOrigin = value; + this.posterImage.crossOrigin(value); } return; diff --git a/src/js/poster-image.js b/src/js/poster-image.js index 546866664b..ad890323d0 100644 --- a/src/js/poster-image.js +++ b/src/js/poster-image.js @@ -46,7 +46,6 @@ class PosterImage extends ClickableComponent { * The element that gets created. */ createEl() { - const crossOrigin = this.player_.options_.crossOrigin || this.player_.options_.crossorigin || null; const el = Dom.createEl('picture', { className: 'vjs-poster', @@ -54,12 +53,49 @@ class PosterImage extends ClickableComponent { tabIndex: -1 }, {}, Dom.createEl('img', { loading: 'lazy', - crossOrigin + crossOrigin: this.crossOrigin() })); return el; } + /** + * Get or set the `PosterImage`'s crossOrigin option. + * + * @param {string|null} [value] + * The value to set the crossOrigin to. If an argument is + * given, must be one of `'anonymous'` or `'use-credentials'`, or 'null'. + * + * @return {string|null} + * - The current crossOrigin value of the `Player` when getting. + * - undefined when setting + */ + crossOrigin(value) { + // `null` can be set to unset a value + if (typeof value === 'undefined') { + if (this.el_) { + // If the poster's element exists, give its value + return this.el_.querySelector('img').crossOrigin; + } else if (this.player_.tech_ && this.player_.tech_.isReady_) { + // If not but the tech is ready, query the tech + return this.player_.crossOrigin(); + } + // Otherwise check options as the poster is usually set before the state of crossorigin + // can be retrieved by the getter + return this.player_.options_.crossOrigin || this.player_.options_.crossorigin || null; + + } + + if (value !== null && value !== 'anonymous' && value !== 'use-credentials') { + this.player_.log.warn(`crossOrigin must be null, "anonymous" or "use-credentials", given "${value}"`); + return; + } + + this.el_.querySelector('img').crossOrigin = value; + + return; + } + /** * An {@link EventTarget~EventListener} for {@link Player#posterchange} events. * @@ -122,5 +158,20 @@ class PosterImage extends ClickableComponent { } +/** + * Get or set the `PosterImage`'s crossorigin option. For the HTML5 player, this + * sets the `crossOrigin` property on the `` tag to control the CORS + * behavior. + * + * @param {string|null} [value] + * The value to set the `PosterImages`'s crossorigin to. If an argument is + * given, must be one of `anonymous` or `use-credentials`. + * + * @return {string|null|undefined} + * - The current crossorigin value of the `Player` when getting. + * - undefined when setting + */ +PosterImage.prototype.crossorigin = PosterImage.prototype.crossOrigin; + Component.registerComponent('PosterImage', PosterImage); export default PosterImage; diff --git a/test/unit/poster.test.js b/test/unit/poster.test.js index 136203657c..98e0d5970e 100644 --- a/test/unit/poster.test.js +++ b/test/unit/poster.test.js @@ -33,18 +33,12 @@ QUnit.test('should create and update a poster image', function(assert) { QUnit.test('should mirror crossOrigin', function(assert) { assert.strictEqual(this.mockPlayer.posterImage.$('img').crossOrigin, null, 'crossOrigin not set when not present in options'); + assert.strictEqual(this.mockPlayer.posterImage.crossOrigin(), null, 'crossOrigin not set from getter when not present in options'); this.mockPlayer.crossOrigin('anonymous'); assert.strictEqual(this.mockPlayer.posterImage.$('img').crossOrigin, 'anonymous', 'crossOrigin updated'); - - this.mockPlayer.options_.crossOrigin = 'anonymous'; - - const newPosterImage = new PosterImage(this.mockPlayer); - - assert.strictEqual(newPosterImage.$('img').crossOrigin, 'anonymous', 'crossOrigin is set from player options'); - - newPosterImage.dispose(); + assert.strictEqual(this.mockPlayer.posterImage.crossOrigin(), 'anonymous', 'crossOrigin getter returns updated value'); });