Add VideoSource._handleAutoPlay()

src/sources/camera-source.ts

@@ -130,7 +130,7 @@ export class CameraSource extends VideoSource
                     err
                 ));
             });
-        }).then(_ => super._init());
+        }).then(_ => super._init()); // this will call VideoSource._handleBrowserQuirks()
     }
 
     /**

src/sources/video-source.ts

@@ -24,7 +24,7 @@ import Speedy from 'speedy-vision';
 import { SpeedyMedia } from 'speedy-vision/types/core/speedy-media';
 import { SpeedyPromise } from 'speedy-vision/types/core/speedy-promise';
 import { Utils, Nullable } from '../utils/utils';
-import { IllegalOperationError } from '../utils/errors';
+import { IllegalOperationError, NotSupportedError } from '../utils/errors';
 import { Source } from './source';
 
 
@@ -94,7 +94,7 @@ export class VideoSource implements Source
      */
     _init(): SpeedyPromise<void>
     {
-        this._handleBrowserPolicies(this._video);
+        this._handleBrowserQuirks(this._video);
 
         return Speedy.load(this._video).then(media => {
             Utils.log(`Source of data is a ${media.width}x${media.height} ${this._type}`);
@@ -117,11 +117,11 @@ export class VideoSource implements Source
     }
 
     /**
-     * Handle browser-specific policies for <video> elements
+     * Handle browser-specific quirks for <video> elements
      * @param video
      * @internal
      */
-    _handleBrowserPolicies(video: HTMLVideoElement): void
+    _handleBrowserQuirks(video: HTMLVideoElement): void
     {
         // WebKit <video> policies for iOS:
         // https://webkit.org/blog/6784/new-video-policies-for-ios/
@@ -129,27 +129,11 @@ export class VideoSource implements Source
         // required on iOS; nice to have in all browsers
         video.setAttribute('playsinline', '');
 
-        // autoplay videos should be muted
-        if(video.autoplay) {
-            video.muted = true;
-            video.addEventListener('canplay', () => {
-                const p = video.play();
-                if(typeof p === 'object') {
-                    p.catch((error: DOMException) => {
-                        Utils.error(`Can't autoplay video!`, error, video);
-
-                        if(error.name == 'NotAllowedError') {
-                            Utils.warning('Tip: allow manual playback');
-
-                            if(Utils.isIOS())
-                                Utils.warning('Is low power mode on?');
-                        }
-                    });
-                }
-            });
-        }
+        // handle autoplay
+        if(video.autoplay)
+            this._handleAutoPlay(video);
 
-        // Handle WebKit policies
+        // Handle WebKit quirks
         // note: navigator.vendor is deprecated. Alternatively, test GL_RENDERER == "Apple GPU"
         if(Utils.isIOS() || /Apple/.test(navigator.vendor)) {
 
@@ -162,4 +146,55 @@ export class VideoSource implements Source
 
         }
     }
+
+    /**
+     * Handle browser-specific quirks for videos marked with autoplay
+     * @param video a <video> marked with autoplay
+     * @internal
+     */
+    _handleAutoPlay(video: HTMLVideoElement): void
+    {
+        Utils.assert(video.autoplay);
+
+        // videos marked with autoplay should be muted
+        video.muted = true;
+
+        // the browser may not honor the autoplay attribute if the video is not
+        // visible on-screen. So, let's try to play the video in any case.
+        video.addEventListener('canplay', () => {
+            const promise = video.play();
+
+            // handle older browsers
+            if(typeof promise !== 'object')
+                return;
+
+            // can't play the video
+            promise.catch((error: DOMException) => {
+                Utils.error(`Can't autoplay video!`, error, video);
+
+                // autoplay is blocked for some reason
+                if(error.name == 'NotAllowedError') {
+                    Utils.warning('Tip: allow manual playback');
+
+                    if(Utils.isIOS())
+                        Utils.warning('Is low power mode on?');
+
+                    // User interaction is required to play the video. We can
+                    // solve this here (easy and convenient to do) or at the
+                    // application layer (for a better user experience). If the
+                    // latter is preferred, just disable autoplay and play the
+                    // video programatically.
+                    if(video.hidden || !video.controls || video.parentNode === null) {
+                        // this is added for convenience
+                        document.body.addEventListener('pointerdown', () => video.play());
+                        alert('Tap on the screen to start');
+                    }
+                }
+
+                // unsupported media source
+                else if(error.name == 'NotSupportedError')
+                    throw new NotSupportedError('Unsupported video format', error);
+            });
+        });
+    }
 }