DemiSel
/
encantar-js
Obserwuj 1
Gwiazdka 0
Forkuj 0
Kod Problemy 0 Pull Requests 0 Wydania 0 Wiki Aktywność
Przeglądaj źródła

Introduce VideoSource._handleBrowserPolicies() for better compatibility

customisations
alemart 1 rok temu
rodzic
135554c15f
commit
3a831f81bb
10 zmienionych plików z 54 dodań i 12 usunięć
Widok podzielony Pokaż statystyki zmian
  1. 1
    1
      demos/hello-aframe/index.html
  2. 1
    1
      demos/hello-three/index.html
  3. 1
    1
      demos/hello-webgl/index.html
  4. 1
    1
      demos/hello-world/index.html
  5. 1
    1
      demos/touch-interaction/index.html
  6. 2
    2
      docs/getting-started/activate-your-webcam.md
  7. 1
    1
      docs/getting-started/create-the-augmented-scene.md
  8. 1
    1
      docs/getting-started/set-up-the-session.md
  9. 2
    2
      docs/getting-started/set-up-the-tracker.md
  10. 43
    1
      src/sources/video-source.ts

+ 1
- 1
demos/hello-aframe/index.html Wyświetl plik 

@@ -19,7 +19,7 @@
19 19 
             </div>
20 20 
         </div>
21 21 
         <img id="my-reference-image" src="../assets/my-reference-image.webp" hidden>
22 
-        <video id="my-video" hidden muted loop playsinline autoplay oncanplay="this.muted=true;this.play()">
22 
+        <video id="my-video" hidden muted loop playsinline autoplay>
23 23 
             <source src="../assets/my-video.webm" type="video/webm" />
24 24 
             <source src="../assets/my-video.mp4" type="video/mp4" />
25 25 
         </video>

+ 1
- 1
demos/hello-three/index.html Wyświetl plik 

@@ -19,7 +19,7 @@
19 19 
             </div>
20 20 
         </div>
21 21 
         <img id="my-reference-image" src="../assets/my-reference-image.webp" hidden>
22 
-        <video id="my-video" hidden muted loop playsinline autoplay oncanplay="this.muted=true;this.play()">
22 
+        <video id="my-video" hidden muted loop playsinline autoplay>
23 23 
             <source src="../assets/my-video.webm" type="video/webm" />
24 24 
             <source src="../assets/my-video.mp4" type="video/mp4" />
25 25 
         </video>

+ 1
- 1
demos/hello-webgl/index.html Wyświetl plik 

@@ -18,7 +18,7 @@
18 18 
         <img id="it-works" src="../assets/it-works.png" hidden>
19 19 
         <img id="bird" src="../assets/bird.png" hidden>
20 20 
         <img id="my-reference-image" src="../assets/my-reference-image.webp" hidden>
21 
-        <video id="my-video" hidden muted loop playsinline autoplay oncanplay="this.muted=true;this.play()">
21 
+        <video id="my-video" hidden muted loop playsinline autoplay>
22 22 
             <source src="../assets/my-video.webm" type="video/webm" />
23 23 
             <source src="../assets/my-video.mp4" type="video/mp4" />
24 24 
         </video>

+ 1
- 1
demos/hello-world/index.html Wyświetl plik 

@@ -16,7 +16,7 @@
16 16 
             </div>
17 17 
         </div>
18 18 
         <img id="my-reference-image" src="../assets/my-reference-image.webp" hidden>
19 
-        <video id="my-video" hidden muted loop playsinline autoplay oncanplay="this.muted=true;this.play()">
19 
+        <video id="my-video" hidden muted loop playsinline autoplay>
20 20 
             <source src="../assets/my-video.webm" type="video/webm" />
21 21 
             <source src="../assets/my-video.mp4" type="video/mp4" />
22 22 
         </video>

+ 1
- 1
demos/touch-interaction/index.html Wyświetl plik 

@@ -20,7 +20,7 @@
20 20 
             </div>
21 21 
         </div>
22 22 
         <img id="my-reference-image" src="../assets/my-reference-image.webp" hidden>
23 
-        <video id="my-video" hidden muted loop playsinline autoplay oncanplay="this.muted=true;this.play()">
23 
+        <video id="my-video" hidden muted loop playsinline autoplay>
24 24 
             <source src="../assets/my-video.webm" type="video/webm" />
25 25 
             <source src="../assets/my-video.mp4" type="video/mp4" />
26 26 
         </video>

+ 2
- 2
docs/getting-started/activate-your-webcam.md Wyświetl plik 

@@ -60,7 +60,7 @@ Let's also comment (or remove) the `<video>` tag from the HTML file - we no long
60 60 
         <div id="ar-viewport"></div>
61 61 
         <img id="my-reference-image" src="my-reference-image.webp" hidden>
62 62 
         <!--
63 
-        <video id="my-video" hidden muted loop playsinline autoplay oncanplay="this.muted=true;this.play()">
63 
+        <video id="my-video" hidden muted loop playsinline autoplay>
64 64 
             <source src="my-video.webm" type="video/webm" />
65 65 
             <source src="my-video.mp4" type="video/mp4" />
66 66 
         </video>
 
@@ -142,7 +142,7 @@ In order to display that scan gimmick, we need to create a HUD (<em>Heads-Up Dis
142 142 
         </div>
143 143 
         <img id="my-reference-image" src="my-reference-image.webp" hidden>
144 144 
         <!--
145 
-        <video id="my-video" hidden muted loop playsinline autoplay oncanplay="this.muted=true;this.play()">
145 
+        <video id="my-video" hidden muted loop playsinline autoplay>
146 146 
             <source src="my-video.webm" type="video/webm" />
147 147 
             <source src="my-video.mp4" type="video/mp4" />
148 148 
         </video>

+ 1
- 1
docs/getting-started/create-the-augmented-scene.md Wyświetl plik 

@@ -80,7 +80,7 @@ A-Frame is easy for beginners and pleasing for experts. A simple scene is declar
80 80 
     <body>
81 81 
         <div id="ar-viewport"></div>
82 82 
         <img id="my-reference-image" src="my-reference-image.webp" hidden>
83 
-        <video id="my-video" hidden muted loop playsinline autoplay oncanplay="this.muted=true;this.play()">
83 
+        <video id="my-video" hidden muted loop playsinline autoplay>
84 84 
             <source src="my-video.webm" type="video/webm" />
85 85 
             <source src="my-video.mp4" type="video/mp4" />
86 86 
         </video>

+ 1
- 1
docs/getting-started/set-up-the-session.md Wyświetl plik 

@@ -20,7 +20,7 @@ We begin by creating the viewport. Remember that the viewport is the area in whi
20 20 
     <body>
21 21 
         <div id="ar-viewport"></div>
22 22 
         <img id="my-reference-image" src="my-reference-image.webp" hidden>
23 
-        <video id="my-video" hidden muted loop playsinline autoplay oncanplay="this.muted=true;this.play()">
23 
+        <video id="my-video" hidden muted loop playsinline autoplay>
24 24 
             <source src="my-video.webm" type="video/webm" />
25 25 
             <source src="my-video.mp4" type="video/mp4" />
26 26 
         </video>

+ 2
- 2
docs/getting-started/set-up-the-tracker.md Wyświetl plik 

@@ -94,7 +94,7 @@ Let's include the test video in our page. Add a `<video>` tag as follows:
94 94 
     </head>
95 95 
     <body>
96 96 
         <img id="my-reference-image" src="my-reference-image.webp" hidden>
97 
-        <video id="my-video" hidden muted loop playsinline autoplay oncanplay="this.muted=true;this.play()">
97 
+        <video id="my-video" hidden muted loop playsinline autoplay>
98 98 
             <source src="my-video.webm" type="video/webm" />
99 99 
             <source src="my-video.mp4" type="video/mp4" />
100 100 
         </video>
 
@@ -123,7 +123,7 @@ We'll be writing a little bit of JavaScript code now. In order to keep our code
123 123 
     </head>
124 124 
     <body>
125 125 
         <img id="my-reference-image" src="my-reference-image.webp" hidden>
126 
-        <video id="my-video" hidden muted loop playsinline autoplay oncanplay="this.muted=true;this.play()">
126 
+        <video id="my-video" hidden muted loop playsinline autoplay>
127 127 
             <source src="my-video.webm" type="video/webm" />
128 128 
             <source src="my-video.mp4" type="video/mp4" />
129 129 
         </video>

+ 43
- 1
src/sources/video-source.ts Wyświetl plik 

@@ -94,7 +94,7 @@ export class VideoSource implements Source
94 94 
      */
95 95 
     _init(): SpeedyPromise<void>
96 96 
     {
97 
-        this._video.setAttribute('playsinline', '');
97 
+        this._handleBrowserPolicies(this._video);
98 98
99 99 
         return Speedy.load(this._video).then(media => {
100 100 
             Utils.log(`Source of data is a ${media.width}x${media.height} ${this._type}`);
 
@@ -115,4 +115,46 @@ export class VideoSource implements Source
115 115 
         this._media = null;
116 116 
         return Speedy.Promise.resolve();
117 117 
     }
118 
+
119 
+    /**
120 
+     * Handle browser-specific policies for <video> elements
121 
+     * @param video
122 
+     * @internal
123 
+     */
124 
+    _handleBrowserPolicies(video: HTMLVideoElement): void
125 
+    {
126 
+        // WebKit <video> policies for iOS:
127 
+        // https://webkit.org/blog/6784/new-video-policies-for-ios/
128 
+
129 
+        // required on iOS; nice to have in all browsers
130 
+        video.setAttribute('playsinline', '');
131 
+
132 
+        // autoplay videos should be muted
133 
+        if(video.autoplay) {
134 
+            video.muted = true;
135 
+            video.addEventListener('canplay', () => {
136 
+                const p = video.play();
137 
+                if(typeof p === 'object') {
138 
+                    p.catch((error: DOMException) => {
139 
+                        Utils.error(`Can't autoplay video! Tip: allow manual playback`, error, video);
140 
+                        if(Utils.isIOS() && error.name == 'NotAllowedError')
141 
+                            Utils.warning('Is low power mode on?');
142 
+                    });
143 
+                }
144 
+            });
145 
+        }
146 
+
147 
+        // Handle WebKit policies
148 
+        // note: navigator.vendor is deprecated. Alternatively, test GL_RENDERER == "Apple GPU"
149 
+        if(Utils.isIOS() || /Apple/.test(navigator.vendor)) {
150 
+
151 
+            // on Epiphany, a hidden <video> shows up as a black screen when copied to a canvas
152 
+            if(video.hidden) {
153 
+                video.hidden = false;
154 
+                video.style.setProperty('opacity', '0');
155 
+                video.style.setProperty('position', 'absolute');
156 
+            }
157 
+
158 
+        }
159 
+    }
118 160 
 }

Napisz Podgląd
Ładowanie…
Anuluj
Zapisz