Merge pull request #5477 from sebavan/master

Fix VideoTexture without autoplay

dist/preview release/what's new.md

@@ -96,6 +96,7 @@
 - Add missing effect layer to asset container ([TrevorDev](https://github.com/TrevorDev))
 - Fixed effect layer compatibility with multi materials ([Sebavan](https://github.com/Sebavan))
 - Added a `DeepImmutable<T>` type to specifiy that a referenced object should be considered recursively immutable, meaning that all its properties are `readonly` and that if a property is a reference to an object, this object is also recursively immutable. ([barroij](https://github.com/barroij))
+- Fixed `VideoTexture` poster property when autoplay is turned off.
 
 ### Viewer
 

src/Materials/Textures/babylon.videoTexture.ts

@@ -56,7 +56,9 @@ module BABYLON {
         private _generateMipMaps: boolean;
         private _engine: Engine;
         private _stillImageCaptured = false;
-        private _poster = false;
+        private _displayingPosterTexture = false;
+        private _settings: VideoTextureSettings;
+        private _createInternalTextureOnEvent: string;
 
         /**
          * Creates a video texture.
@@ -93,6 +95,8 @@ module BABYLON {
 
             this.name = name || this._getName(src);
             this.video = this._getVideo(src);
+            this._settings = settings;
+
             if (settings.poster) {
                 this.video.poster = settings.poster;
             }
@@ -106,18 +110,20 @@ module BABYLON {
 
             this.video.setAttribute("playsinline", "");
 
-            this.video.addEventListener("canplay", this._createInternalTexture);
             this.video.addEventListener("paused", this._updateInternalTexture);
             this.video.addEventListener("seeked", this._updateInternalTexture);
             this.video.addEventListener("emptied", this.reset);
+            this._createInternalTextureOnEvent = (settings.poster && !settings.autoPlay) ? "play" : "canplay";
+            this.video.addEventListener(this._createInternalTextureOnEvent, this._createInternalTexture);
 
-            if (this.video.readyState >= this.video.HAVE_CURRENT_DATA) {
-                this._createInternalTexture();
-            }
-
-            if (settings.poster) {
+            const videoHasEnoughData = (this.video.readyState >= this.video.HAVE_CURRENT_DATA);
+            if (settings.poster &&
+                (!settings.autoPlay || !videoHasEnoughData)) {
                 this._texture = this._engine.createTexture(settings.poster!, false, true, scene);
-                this._poster = true;
+                this._displayingPosterTexture = true;
+            }
+            else if (videoHasEnoughData) {
+                this._createInternalTexture();
             }
         }
 
@@ -155,9 +161,9 @@ module BABYLON {
 
         private _createInternalTexture = (): void => {
             if (this._texture != null) {
-                if (this._poster) {
+                if (this._displayingPosterTexture) {
                     this._texture.dispose();
-                    this._poster = false;
+                    this._displayingPosterTexture = false;
                 }
                 else {
                     return;
@@ -181,7 +187,7 @@ module BABYLON {
                 this._samplingMode
             );
 
-            if (!this.video.autoplay) {
+            if (!this.video.autoplay && !this._settings.poster) {
                 let oldHandler = this.video.onplaying;
                 let error = false;
                 this.video.onplaying = () => {
@@ -231,7 +237,7 @@ module BABYLON {
                 return;
             }
 
-            if (!this._poster) {
+            if (!this._displayingPosterTexture) {
                 this._texture.dispose();
                 this._texture = null;
             }
@@ -278,6 +284,9 @@ module BABYLON {
             if (this.video.readyState < this.video.HAVE_CURRENT_DATA) {
                 return;
             }
+            if (this._displayingPosterTexture) {
+                return;
+            }
 
             this._engine.updateVideoTexture(this._texture, this.video, this._invertY);
         }
@@ -301,7 +310,7 @@ module BABYLON {
                 this._onUserActionRequestedObservable = null;
             }
 
-            this.video.removeEventListener("canplay", this._createInternalTexture);
+            this.video.removeEventListener(this._createInternalTextureOnEvent, this._createInternalTexture);
             this.video.removeEventListener("paused", this._updateInternalTexture);
             this.video.removeEventListener("seeked", this._updateInternalTexture);
             this.video.removeEventListener("emptied", this.reset);