DemiSel
/
encantar-js
关注 1
点赞 0
派生 0
代码 工单 0 合并请求 0 版本发布 0 百科 动态
浏览代码

Introduce VideoSource._handleBrowserPolicies() for better compatibility

customisations
alemart 1年前
父节点
135554c15f
当前提交
3a831f81bb
共有 10 个文件被更改，包括 54 次插入 和 12 次删除
合并视图 显示文件统计
  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 查看文件

19 
             </div>
 19 
             </div>
20 
         </div>
 20 
         </div>
21 
         <img id="my-reference-image" src="../assets/my-reference-image.webp" hidden>
 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 
             <source src="../assets/my-video.webm" type="video/webm" />
 23 
             <source src="../assets/my-video.webm" type="video/webm" />
24 
             <source src="../assets/my-video.mp4" type="video/mp4" />
 24 
             <source src="../assets/my-video.mp4" type="video/mp4" />
25 
         </video>
 25 
         </video>

+ 1
- 1
demos/hello-three/index.html 查看文件

19 
             </div>
 19 
             </div>
20 
         </div>
 20 
         </div>
21 
         <img id="my-reference-image" src="../assets/my-reference-image.webp" hidden>
 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 
             <source src="../assets/my-video.webm" type="video/webm" />
 23 
             <source src="../assets/my-video.webm" type="video/webm" />
24 
             <source src="../assets/my-video.mp4" type="video/mp4" />
 24 
             <source src="../assets/my-video.mp4" type="video/mp4" />
25 
         </video>
 25 
         </video>

+ 1
- 1
demos/hello-webgl/index.html 查看文件

18 
         <img id="it-works" src="../assets/it-works.png" hidden>
 18 
         <img id="it-works" src="../assets/it-works.png" hidden>
19 
         <img id="bird" src="../assets/bird.png" hidden>
 19 
         <img id="bird" src="../assets/bird.png" hidden>
20 
         <img id="my-reference-image" src="../assets/my-reference-image.webp" hidden>
 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 
             <source src="../assets/my-video.webm" type="video/webm" />
 22 
             <source src="../assets/my-video.webm" type="video/webm" />
23 
             <source src="../assets/my-video.mp4" type="video/mp4" />
 23 
             <source src="../assets/my-video.mp4" type="video/mp4" />
24 
         </video>
 24 
         </video>

+ 1
- 1
demos/hello-world/index.html 查看文件

16 
             </div>
 16 
             </div>
17 
         </div>
 17 
         </div>
18 
         <img id="my-reference-image" src="../assets/my-reference-image.webp" hidden>
 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 
             <source src="../assets/my-video.webm" type="video/webm" />
 20 
             <source src="../assets/my-video.webm" type="video/webm" />
21 
             <source src="../assets/my-video.mp4" type="video/mp4" />
 21 
             <source src="../assets/my-video.mp4" type="video/mp4" />
22 
         </video>
 22 
         </video>

+ 1
- 1
demos/touch-interaction/index.html 查看文件

20 
             </div>
 20 
             </div>
21 
         </div>
 21 
         </div>
22 
         <img id="my-reference-image" src="../assets/my-reference-image.webp" hidden>
 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 
             <source src="../assets/my-video.webm" type="video/webm" />
 24 
             <source src="../assets/my-video.webm" type="video/webm" />
25 
             <source src="../assets/my-video.mp4" type="video/mp4" />
 25 
             <source src="../assets/my-video.mp4" type="video/mp4" />
26 
         </video>
 26 
         </video>

+ 2
- 2
docs/getting-started/activate-your-webcam.md 查看文件

60 
         <div id="ar-viewport"></div>
 60 
         <div id="ar-viewport"></div>
61 
         <img id="my-reference-image" src="my-reference-image.webp" hidden>
 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 
             <source src="my-video.webm" type="video/webm" />
 64 
             <source src="my-video.webm" type="video/webm" />
65 
             <source src="my-video.mp4" type="video/mp4" />
 65 
             <source src="my-video.mp4" type="video/mp4" />
66 
         </video>
 66 
         </video>
142 
         </div>
 142 
         </div>
143 
         <img id="my-reference-image" src="my-reference-image.webp" hidden>
 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 
             <source src="my-video.webm" type="video/webm" />
 146 
             <source src="my-video.webm" type="video/webm" />
147 
             <source src="my-video.mp4" type="video/mp4" />
 147 
             <source src="my-video.mp4" type="video/mp4" />
148 
         </video>
 148 
         </video>

+ 1
- 1
docs/getting-started/create-the-augmented-scene.md 查看文件

80 
     <body>
 80 
     <body>
81 
         <div id="ar-viewport"></div>
 81 
         <div id="ar-viewport"></div>
82 
         <img id="my-reference-image" src="my-reference-image.webp" hidden>
 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 
             <source src="my-video.webm" type="video/webm" />
 84 
             <source src="my-video.webm" type="video/webm" />
85 
             <source src="my-video.mp4" type="video/mp4" />
 85 
             <source src="my-video.mp4" type="video/mp4" />
86 
         </video>
 86 
         </video>

+ 1
- 1
docs/getting-started/set-up-the-session.md 查看文件

20 
     <body>
 20 
     <body>
21 
         <div id="ar-viewport"></div>
 21 
         <div id="ar-viewport"></div>
22 
         <img id="my-reference-image" src="my-reference-image.webp" hidden>
 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 
             <source src="my-video.webm" type="video/webm" />
 24 
             <source src="my-video.webm" type="video/webm" />
25 
             <source src="my-video.mp4" type="video/mp4" />
 25 
             <source src="my-video.mp4" type="video/mp4" />
26 
         </video>
 26 
         </video>

+ 2
- 2
docs/getting-started/set-up-the-tracker.md 查看文件

94 
     </head>
 94 
     </head>
95 
     <body>
 95 
     <body>
96 
         <img id="my-reference-image" src="my-reference-image.webp" hidden>
 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 
             <source src="my-video.webm" type="video/webm" />
 98 
             <source src="my-video.webm" type="video/webm" />
99 
             <source src="my-video.mp4" type="video/mp4" />
 99 
             <source src="my-video.mp4" type="video/mp4" />
100 
         </video>
 100 
         </video>
123 
     </head>
 123 
     </head>
124 
     <body>
 124 
     <body>
125 
         <img id="my-reference-image" src="my-reference-image.webp" hidden>
 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 
             <source src="my-video.webm" type="video/webm" />
 127 
             <source src="my-video.webm" type="video/webm" />
128 
             <source src="my-video.mp4" type="video/mp4" />
 128 
             <source src="my-video.mp4" type="video/mp4" />
129 
         </video>
 129 
         </video>

+ 43
- 1
src/sources/video-source.ts 查看文件

94 
      */
 94 
      */
95 
     _init(): SpeedyPromise<void>
 95 
     _init(): SpeedyPromise<void>
96 
     {
 96 
     {
97 
-        this._video.setAttribute('playsinline', '');
97 
+        this._handleBrowserPolicies(this._video);
98
98
99 
         return Speedy.load(this._video).then(media => {
 99 
         return Speedy.load(this._video).then(media => {
100 
             Utils.log(`Source of data is a ${media.width}x${media.height} ${this._type}`);
 100 
             Utils.log(`Source of data is a ${media.width}x${media.height} ${this._type}`);
115 
         this._media = null;
 115 
         this._media = null;
116 
         return Speedy.Promise.resolve();
 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 
 }

撰写 预览
正在加载...
取消
保存