Selaa lähdekoodia

Add muted setting to VideoTexture, fix autoplay in Chrome

Auto-playing a VideoTexture in Chrome failed to work. According to their [autoplay policy](https://developers.google.com/web/updates/2017/09/autoplay-policy-changes) muted autoplay is allowed, so this adds support for a `muted` setting.

But this still seems to be not enough for Chrome, as a video element detached from DOM seems still to not autoplay. See this reproduction: https://jsfiddle.net/6105nLzr/4/ - when line 13 is commented out, the video does *not* start to play (see console output). So calling `play()` programmatically.
simonihmig 4 vuotta sitten
vanhempi
commit
4eb66ecc03
2 muutettua tiedostoa jossa 13 lisäystä ja 1 poistoa
  1. 1 0
      dist/preview release/what's new.md
  2. 12 1
      src/Materials/Textures/videoTexture.ts

+ 1 - 0
dist/preview release/what's new.md

@@ -164,6 +164,7 @@
 - Added the possibility to update the shader code before being compiled ([Popov72](https://github.com/Popov72))
 - Added the `shadowOnly` property to the `BackgroundMaterial` class ([Popov72](https://github.com/Popov72))
 - Added support for lightmaps in unlit PBR materials ([Popov72](https://github.com/Popov72))
+- Added `muted` setting to `VideoTexture`, fix autoplay in Chrome ([simonihmig](https://github.com/simonihmig))
 
 ### Meshes
 

+ 12 - 1
src/Materials/Textures/videoTexture.ts

@@ -18,6 +18,11 @@ export interface VideoTextureSettings {
     autoPlay?: boolean;
 
     /**
+     * Applies `muted` to video, if specified
+     */
+    muted?: boolean;
+
+    /**
      * Applies `loop` to video, if specified
      */
     loop?: boolean;
@@ -110,13 +115,15 @@ export class VideoTexture extends Texture {
         if (settings.poster) {
             this.video.poster = settings.poster;
         }
-
         if (settings.autoPlay !== undefined) {
             this.video.autoplay = settings.autoPlay;
         }
         if (settings.loop !== undefined) {
             this.video.loop = settings.loop;
         }
+        if (settings.muted !== undefined) {
+            this.video.muted = settings.muted;
+        }
 
         this.video.setAttribute("playsinline", "");
 
@@ -126,6 +133,10 @@ export class VideoTexture extends Texture {
         this._createInternalTextureOnEvent = (settings.poster && !settings.autoPlay) ? "play" : "canplay";
         this.video.addEventListener(this._createInternalTextureOnEvent, this._createInternalTexture);
 
+        if (settings.autoPlay) {
+            this.video.play();
+        }
+
         const videoHasEnoughData = (this.video.readyState >= this.video.HAVE_CURRENT_DATA);
         if (settings.poster &&
             (!settings.autoPlay || !videoHasEnoughData)) {