fix(viewer): Audio can muted autoplay if failed (#1054)

src/lib/viewers/media/MediaBaseViewer.js

@@ -304,27 +304,31 @@ class MediaBaseViewer extends BaseViewer {
      *
      * @private
      * @emits volume
-     * @return {void}
+     * @return {Promise}
      */
     autoplay() {
-        // Play may return a promise depening on browser support. This promise
-        // will resolve when playback starts. If it fails, pause UI should be shown.
+        // Play may return a promise depending on browser support. This promise
+        // will resolve when playback starts. If it fails, we mute the video
+        // and try to play again.
         // https://webkit.org/blog/7734/auto-play-policy-changes-for-macos/
         const autoPlayPromise = this.mediaEl.play();
 
         if (autoPlayPromise && typeof autoPlayPromise.then === 'function') {
-            autoPlayPromise
+            this.handleRate();
+            return autoPlayPromise
                 .then(() => {
-                    this.handleRate();
                     this.handleVolume();
                 })
                 .catch(() => {
-                    this.pause();
+                    // Auto-play was prevented, try muted play
+                    this.setVolume(0);
+                    this.mediaEl.play();
                 });
-        } else {
-            // Fallback to traditional autoplay tag if play does not return a promise
-            this.mediaEl.autoplay = true;
         }
+
+        // Fallback to traditional autoplay tag if play does not return a promise
+        this.mediaEl.autoplay = true;
+        return Promise.resolve();
     }
 
     /**

src/lib/viewers/media/__tests__/MediaBaseViewer-test.js

@@ -294,6 +294,15 @@ describe('lib/viewers/media/MediaBaseViewer', () => {
             media.autoplay();
             expect(media.mediaEl.autoplay).to.be.true;
         });
+
+        it('should muted autoplay if the promise is rejected', done => {
+            sandbox.stub(media, 'setVolume');
+            media.mediaEl.play = sandbox.stub().returns(Promise.reject());
+            media.autoplay().then(() => {
+                expect(media.setVolume).to.be.calledWith(0);
+                done();
+            });
+        });
     });
 
     describe('loadUI()', () => {