Wrap all play calls in catch handler (#35811)

* Wrap all play calls in catch handler

* Introduce playIgnoringError

* Fix type

* Fix undefined return case

3p/bodymovinanimation.js

@@ -1,4 +1,5 @@
 import {setStyles} from '#core/dom/style';
+import {tryPlay} from '#core/dom/video';
 import {dict} from '#core/types/object';
 import {parseJson} from '#core/types/object/json';
 
@@ -42,7 +43,7 @@ function parseMessage(event) {
   const eventMessage = parseJson(getData(event));
   const action = eventMessage['action'];
   if (action == 'play') {
-    animationHandler.play();
+    tryPlay(animationHandler);
   } else if (action == 'pause') {
     animationHandler.pause();
   } else if (action == 'stop') {

3p/viqeoplayer.js

@@ -1,3 +1,4 @@
+import {tryPlay} from '#core/dom/video';
 import {tryDecodeUriComponent} from '#core/types/string/url';
 
 import {loadScript} from './3p';
@@ -76,7 +77,7 @@ function viqeoPlayerInitLoaded(global, VIQEO) {
       return;
     }
     if (action === 'play') {
-      viqeoPlayerInstance.play();
+      tryPlay(viqeoPlayerInstance);
     } else if (action === 'pause') {
       viqeoPlayerInstance.pause();
     } else if (action === 'stop') {

extensions/amp-audio/0.1/amp-audio.js

@@ -1,6 +1,7 @@
 import {Layout, applyFillContent, isLayoutSizeFixed} from '#core/dom/layout';
 import {propagateAttributes} from '#core/dom/propagate-attributes';
 import {realChildNodes} from '#core/dom/query';
+import {tryPlay} from '#core/dom/video';
 
 import {triggerAnalyticsEvent} from '../../../src/analytics';
 import {listen} from '../../../src/event-helper';
@@ -235,7 +236,7 @@ export class AmpAudio extends AMP.BaseElement {
     if (!this.isInvocationValid_()) {
       return;
     }
-    this.audio_.play();
+    tryPlay(this.audio_);
     this.setPlayingStateForTesting_(true);
   }
 
@@ -253,7 +254,7 @@ export class AmpAudio extends AMP.BaseElement {
   /** @private */
   audioPlaying_() {
     const playHandler = () => {
-      this.audio_.play();
+      tryPlay(this.audio_);
       this.setPlayingStateForTesting_(true);
     };
     const pauseHandler = () => {

extensions/amp-iframe/0.1/amp-iframe.js

@@ -1,3 +1,4 @@
+import {playIgnoringError} from '#core/dom/video';
 import {AMPDOC_SINGLETON_NAME} from '#core/constants/enums';
 import {ActionTrust} from '#core/constants/action-constants';
 import {IntersectionObserver3pHost} from '../../../src/utils/intersection-observer-3p-host';
@@ -835,7 +836,7 @@ export class AmpIframe extends AMP.BaseElement {
       return false;
     }
     const audio = this.win.document.createElement('audio');
-    audio.play();
+    playIgnoringError(audio);
     if (audio.paused) {
       return false;
     }

extensions/amp-story/1.0/amp-story-page.js

@@ -8,6 +8,7 @@
  * </amp-story-page>
  * </code>
  */
+import {isAutoplaySupported, tryPlay} from '#core/dom/video';
 import {
   AFFILIATE_LINK_SELECTOR,
   AmpStoryAffiliateLink,
@@ -53,7 +54,6 @@ import {getLogEntries} from './logging';
 import {getMediaPerformanceMetricsService} from './media-performance-metrics-service';
 import {getMode} from '../../../src/mode';
 import {htmlFor} from '#core/dom/static-template';
-import {isAutoplaySupported} from '#core/dom/video';
 import {isExperimentOn} from '#experiments';
 import {isPrerenderActivePage} from './prerender-active-page';
 import {listen, listenOnce} from '../../../src/event-helper';
@@ -1028,7 +1028,7 @@ export class AmpStoryPage extends AMP.BaseElement {
    */
   playMedia_(mediaPool, mediaEl) {
     if (this.isBotUserAgent_) {
-      mediaEl.play();
+      tryPlay(mediaEl);
       return Promise.resolve();
     } else {
       return this.loadPromise(mediaEl).then(
@@ -1151,7 +1151,7 @@ export class AmpStoryPage extends AMP.BaseElement {
       mediaEl.muted = false;
       mediaEl.removeAttribute('muted');
       if (mediaEl.tagName === 'AUDIO' && mediaEl.paused) {
-        mediaEl.play();
+        tryPlay(mediaEl);
       }
       return Promise.resolve();
     } else {

extensions/amp-story/1.0/media-tasks.js

@@ -1,4 +1,5 @@
-import {Deferred, tryResolve} from '#core/data-structures/promise';
+import {Deferred} from '#core/data-structures/promise';
+import {tryPlay} from '#core/dom/video';
 import {Sources} from './sources';
 import {isConnectedNode} from '#core/dom';
 
@@ -204,10 +205,7 @@ export class PlayTask extends MediaTask {
       return Promise.resolve();
     }
 
-    // The play() invocation is wrapped in a Promise.resolve(...) due to the
-    // fact that some browsers return a promise from media elements' play()
-    // function, while others return a boolean.
-    return tryResolve(() => mediaEl.play());
+    return tryPlay(mediaEl);
   }
 }
 

extensions/amp-video-docking/0.1/controls.js

@@ -8,6 +8,7 @@ import {
   toggle,
   translate,
 } from '#core/dom/style';
+import {tryPlay} from '#core/dom/video';
 import {once} from '#core/types/function';
 
 import {Services} from '#service';
@@ -271,7 +272,7 @@ export class Controls {
       }),
 
       this.listenWhenEnabled_(this.playButton_, click, () => {
-        video.play(/* auto */ false);
+        tryPlay(video, /* auto */ false);
       }),
 
       this.listenWhenEnabled_(this.pauseButton_, click, () => {

extensions/amp-video/0.1/amp-video.js

@@ -1,3 +1,4 @@
+import {tryPlay} from '#core/dom/video';
 import {EMPTY_METADATA} from '../../../src/mediasession-helper';
 import {PauseHelper} from '#core/dom/video/pause-helper';
 import {Services} from '#service';
@@ -792,17 +793,7 @@ export class AmpVideo extends AMP.BaseElement {
    * @override
    */
   play(unusedIsAutoplay) {
-    const ret = this.video_.play();
-
-    if (ret && ret.catch) {
-      ret.catch(() => {
-        // Empty catch to prevent useless unhandled promise rejection logging.
-        // Play can fail for many reasons such as video getting paused before
-        // play() is finished.
-        // We use events to know the state of the video and do not care about
-        // the success or failure of the play()'s returned promise.
-      });
-    }
+    tryPlay(this.video_);
   }
 
   /**

extensions/amp-video/0.1/flexible-bitrate.js

@@ -1,3 +1,4 @@
+import {tryPlay} from '#core/dom/video';
 import {DomBasedWeakRef} from '#core/data-structures/dom-based-weakref';
 import {Services} from '#service';
 import {childElement, childElementsByTag} from '#core/dom/query';
@@ -239,14 +240,14 @@ export class BitrateManager {
     video.pause();
     const hasChanges = this.sortSources_(video);
     if (!hasChanges) {
-      video.play();
+      tryPlay(video);
       return;
     }
     video.load();
     listenOnce(video, 'loadedmetadata', () => {
       // Restore currentTime after loading new source.
       video.currentTime = currentTime;
-      video.play();
+      tryPlay(video);
       dev().fine(TAG, 'Playing at lower bitrate %s', video.currentSrc);
     });
   }

extensions/amp-video/0.1/test/test-amp-video.js

@@ -523,24 +523,6 @@ describes.realWin(
       expect(impl.toggleFallback).to.have.been.calledWith(true);
     });
 
-    it('play() should not log promise rejections', async () => {
-      const playPromise = Promise.reject('The play() request was interrupted');
-      const catchSpy = env.sandbox.spy(playPromise, 'catch');
-      await getVideo(
-        {
-          src: 'video.mp4',
-          width: 160,
-          height: 90,
-        },
-        null,
-        function (element, impl) {
-          env.sandbox.stub(impl.video_, 'play').returns(playPromise);
-          impl.play();
-        }
-      );
-      expect(catchSpy.called).to.be.true;
-    });
-
     it('decode error retries the next source', async () => {
       const s0 = doc.createElement('source');
       s0.setAttribute('src', './0.mp4');

extensions/amp-video/1.0/component.js

@@ -1,5 +1,6 @@
 import * as Preact from '#preact';
 import {ContainWrapper, useValueRef} from '#preact/component';
+import {tryPlay} from '#core/dom/video';
 import {Deferred} from '#core/data-structures/promise';
 import {Loading} from '#core/constants/loading-instructions';
 import {MIN_VISIBILITY_RATIO_FOR_AUTOPLAY} from '../../../src/video-interface';
@@ -141,7 +142,7 @@ function VideoWrapperWithRef(
   }, [load, setPlayingState]);
 
   const play = useCallback(() => {
-    return readyDeferred.promise.then(() => playerRef.current.play());
+    return readyDeferred.promise.then(() => tryPlay(playerRef.current));
   }, [readyDeferred]);
 
   const pause = useCallback(() => {

src/core/dom/video/index.js

@@ -1,5 +1,7 @@
 import {devAssertElement} from '#core/assert';
+import {tryResolve} from '#core/data-structures/promise';
 import {setStyles} from '#core/dom/style';
+import {devExpectedError} from '#core/error';
 
 /**
  * @param {!Window} win
@@ -37,10 +39,7 @@ export function detectIsAutoplaySupported(win) {
 
   // Promise wrapped this way to catch both sync throws and async rejections.
   // More info: https://github.com/tc39/proposal-promise-try
-  new Promise((resolve) => resolve(detectionElement.play())).catch(() => {
-    // Suppress any errors, useless to report as they are expected.
-  });
-
+  playIgnoringError(detectionElement);
   return Promise.resolve(!detectionElement.paused);
 }
 
@@ -78,3 +77,48 @@ export function resetIsAutoplaySupported(win) {
 export function getInternalVideoElementFor(element) {
   return devAssertElement(element.querySelector('video, iframe'));
 }
+
+/**
+ * @typedef {{
+ *   play: (function(boolean): Promise<undefined>|undefined)
+ * }}
+ */
+let VideoOrBaseElementPlayableDef;
+
+/**
+ * Tries to play the media element, marking any rejected error as an expected
+ * error for reproting.
+ *
+ * @param {!HTMLMediaElement|VideoOrBaseElementPlayableDef} element
+ * @param {boolean=} isAutoplay
+ * @return {Promise<undefined>}
+ */
+export function tryPlay(element, isAutoplay) {
+  // Some browsers return undefined, some a boolean, and some a real promise.
+  // Using tryResolve coerces all of those into a real promise.
+  const promise = tryResolve(() => element.play(!!isAutoplay));
+  // Fork the promise chain to report any rejected error as expected. We don't
+  // return the promise returned by `.catch()` so that we don't
+  // introduce any new microtasks.
+  promise.catch((err) => {
+    devExpectedError('TRYPLAY', err);
+  });
+  return promise;
+}
+
+/**
+ * Plays the media element, discarding any error without reporting it.
+ *
+ * @param {!HTMLMediaElement} element
+ */
+export function playIgnoringError(element) {
+  // Some browsers return undefined, some a boolean, and some a real promise.
+  // Using tryResolve coerces all of those into a real promise.
+  tryResolve(() => element.play()).catch(() => {
+    // Empty catch to prevent useless unhandled promise rejection logging.
+    // Play can fail for many reasons such as video getting paused before
+    // play() is finished.
+    // We use events to know the state of the video and do not care about
+    // the success or failure of the play()'s returned promise.
+  });
+}

src/service/video-manager-impl.js

@@ -3,7 +3,11 @@ import {dispatchCustomEvent, removeElement} from '#core/dom';
 import {measureIntersection} from '#core/dom/layout/intersection';
 import {createViewportObserver} from '#core/dom/layout/viewport-observer';
 import {toggle} from '#core/dom/style';
-import {getInternalVideoElementFor, isAutoplaySupported} from '#core/dom/video';
+import {
+  getInternalVideoElementFor,
+  isAutoplaySupported,
+  tryPlay,
+} from '#core/dom/video';
 import {clamp} from '#core/math';
 import {isFiniteNumber} from '#core/types';
 import {once} from '#core/types/function';
@@ -233,7 +237,7 @@ export class VideoManager {
     // specific handling (e.g. user gesture requirement for unmuted playback).
     const trust = ActionTrust.LOW;
 
-    registerAction('play', () => video.play(/* isAutoplay */ false));
+    registerAction('play', () => tryPlay(video, /* isAutoplay */ false));
     registerAction('pause', () => video.pause());
     registerAction('mute', () => video.mute());
     registerAction('unmute', () => video.unmute());
@@ -479,7 +483,7 @@ class VideoEntry {
 
     /** @private @const {function()} */
     this.boundMediasessionPlay_ = () => {
-      this.video.play(/* isAutoplay */ false);
+      tryPlay(this.video, /* isAutoplay */ false);
     };
 
     /** @private @const {function()} */
@@ -901,7 +905,7 @@ class VideoEntry {
     }
     if (this.isVisible_) {
       this.visibilitySessionManager_.beginSession();
-      this.video.play(/*autoplay*/ true);
+      tryPlay(this.video, /*autoplay*/ true);
       this.playCalledByAutoplay_ = true;
     } else {
       if (this.isPlaying_) {