add getter/setter, allow null to be set`

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;

src/js/poster-image.js

@@ -46,20 +46,56 @@ 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',
 
       // Don't want poster to be tabbable.
       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 `<img>` 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;

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');
 
 });