feat: Add option to suppress initial error for non-playable sources

docs/guides/options.md

@@ -35,6 +35,7 @@
   * [plugins](#plugins)
   * [responsive](#responsive)
   * [sources](#sources)
+  * [suppressNotSupportedError](#suppressNotSupportedError)
   * [techCanOverridePoster](#techcanoverrideposter)
   * [techOrder](#techorder)
   * [userActions](#useractions)
@@ -374,6 +375,12 @@ Using `<source>` elements will have the same effect:
 </video>
 ```
 
+### `suppressNotSupportedError`
+
+> Type: `boolean`
+
+If set to true, then the no compatible source error will not be triggered immediately and instead will occur on the first user interaction. This is useful for Google's "mobile friendly" test tool, which can't play video but where you might not want to see an error displayed.
+
 ### `techCanOverridePoster`
 
 > Type: `boolean`

src/js/big-play-button.js

@@ -47,7 +47,9 @@ class BigPlayButton extends Button {
     // exit early if clicked via the mouse
     if (this.mouseused_ && event.clientX && event.clientY) {
       silencePromise(playPromise);
-      this.player_.tech(true).focus();
+      if (this.player_.tech(true)) {
+        this.player_.tech(true).focus();
+      }
       return;
     }
 

src/js/player.js

@@ -3709,6 +3709,24 @@ class Player extends Component {
       return this.error_ || null;
     }
 
+    // Suppress the first error message for no compatible source until
+    // user interaction
+    if (this.options_.suppressNotSupportedError &&
+        err && err.message &&
+        err.message === this.localize(this.options_.notSupportedMessage)
+    ) {
+      const triggerSuppressedError = function() {
+        this.error(err);
+      };
+
+      this.options_.suppressNotSupportedError = false;
+      this.any(['click', 'touchstart'], triggerSuppressedError);
+      this.one('loadstart', function() {
+        this.off(['click', 'touchstart'], triggerSuppressedError);
+      });
+      return;
+    }
+
     // restoring to default
     if (err === null) {
       this.error_ = err;

src/js/poster-image.js

@@ -112,7 +112,9 @@ class PosterImage extends ClickableComponent {
       return;
     }
 
-    this.player_.tech(true).focus();
+    if (this.player_.tech(true)) {
+      this.player_.tech(true).focus();
+    }
 
     if (this.player_.paused()) {
       silencePromise(this.player_.play());

test/unit/player.test.js

@@ -336,6 +336,73 @@ QUnit.test('should asynchronously fire error events during source selection', fu
   log.error.restore();
 });
 
+QUnit.test('should suppress source error messages', function(assert) {
+  const clock = sinon.useFakeTimers();
+
+  const player = TestHelpers.makePlayer({
+    techOrder: ['foo'],
+    suppressNotSupportedError: true
+  });
+
+  let errors = 0;
+
+  player.on('error', function(e) {
+    errors++;
+  });
+
+  player.src({src: 'http://example.com', type: 'video/mp4'});
+
+  clock.tick(10);
+
+  assert.strictEqual(errors, 0, 'no error on bad source load');
+
+  player.trigger('click');
+
+  clock.tick(10);
+
+  assert.strictEqual(errors, 1, 'error after click');
+
+  player.dispose();
+});
+
+QUnit.test('should cancel a suppressed error message on loadstart', function(assert) {
+  const clock = sinon.useFakeTimers();
+
+  const player = TestHelpers.makePlayer({
+    techOrder: ['foo'],
+    suppressNotSupportedError: true
+  });
+
+  let errors = 0;
+
+  player.on('error', function(e) {
+    errors++;
+  });
+
+  player.src({src: 'http://example.com', type: 'video/mp4'});
+
+  clock.tick(10);
+
+  assert.strictEqual(errors, 0, 'no error on bad source load');
+  assert.strictEqual(
+    player.options_.suppressNotSupportedError,
+    false,
+    'option was unset when error was suppressed'
+  );
+
+  player.trigger('loadstart');
+
+  clock.tick(10);
+
+  player.trigger('click');
+
+  clock.tick(10);
+
+  assert.strictEqual(errors, 0, 'no error after click after loadstart');
+
+  player.dispose();
+});
+
 QUnit.test('should set the width, height, and aspect ratio via a css class', function(assert) {
   const player = TestHelpers.makePlayer();
   const getStyleText = function(styleEl) {