Browse Source

Improve the VideoSource

customisations
alemart 1 year ago
parent
commit
37b0c2fbc2
1 changed files with 16 additions and 13 deletions
  1. 16
    13
      src/sources/video-source.ts

+ 16
- 13
src/sources/video-source.ts View File

100
      */
100
      */
101
     _init(): SpeedyPromise<void>
101
     _init(): SpeedyPromise<void>
102
     {
102
     {
103
-        return Speedy.load(this._video).then(media => {
104
-            Utils.log(`Source of data is a ${media.width}x${media.height} ${this._type}`);
105
-            this._media = media;
106
-            return this._handleBrowserQuirks(this._video).then(() => void(0));
103
+        Utils.log(`Initializing ${this._type} source...`);
104
+
105
+        // prepare the video before loading the SpeedyMedia!
106
+        return this._prepareVideo(this._video).then(video => {
107
+            Utils.log('The video is prepared');
108
+
109
+            return Speedy.load(video).then(media => {
110
+                Utils.log(`Source of data is a ${media.width}x${media.height} ${this._type}`);
111
+                this._media = media;
112
+            });
107
         });
113
         });
108
     }
114
     }
109
 
115
 
125
      * Handle browser-specific quirks for <video> elements
131
      * Handle browser-specific quirks for <video> elements
126
      * @param video a video element
132
      * @param video a video element
127
      * @returns a promise that resolves to the input video
133
      * @returns a promise that resolves to the input video
128
-     * @internal
129
      */
134
      */
130
-    _handleBrowserQuirks(video: HTMLVideoElement): SpeedyPromise<HTMLVideoElement>
135
+    private _prepareVideo(video: HTMLVideoElement): SpeedyPromise<HTMLVideoElement>
131
     {
136
     {
132
         // WebKit <video> policies for iOS:
137
         // WebKit <video> policies for iOS:
133
         // https://webkit.org/blog/6784/new-video-policies-for-ios/
138
         // https://webkit.org/blog/6784/new-video-policies-for-ios/
139
         return this._handleAutoPlay(video).then(video => {
144
         return this._handleAutoPlay(video).then(video => {
140
 
145
 
141
             // handle WebKit quirks
146
             // handle WebKit quirks
142
-            // note: navigator.vendor is deprecated. Alternatively, test GL_RENDERER == "Apple GPU"
143
-            if(Utils.isIOS() || /Apple/.test(navigator.vendor)) {
147
+            if(Utils.isWebKit()) {
144
 
148
 
145
                 // on Epiphany, a hidden <video> shows up as a black screen when copied to a canvas
149
                 // on Epiphany, a hidden <video> shows up as a black screen when copied to a canvas
150
+                // on iOS, this hack doesn't seem necessary, but works okay
146
                 if(video.hidden) {
151
                 if(video.hidden) {
147
                     video.hidden = false;
152
                     video.hidden = false;
148
                     video.style.setProperty('opacity', '0');
153
                     video.style.setProperty('opacity', '0');
163
      * Handle browser-specific quirks for videos marked with autoplay
168
      * Handle browser-specific quirks for videos marked with autoplay
164
      * @param video a <video> marked with autoplay
169
      * @param video a <video> marked with autoplay
165
      * @returns a promise that resolves to the input video
170
      * @returns a promise that resolves to the input video
166
-     * @internal
167
      */
171
      */
168
-    _handleAutoPlay(video: HTMLVideoElement): SpeedyPromise<HTMLVideoElement>
172
+    private _handleAutoPlay(video: HTMLVideoElement): SpeedyPromise<HTMLVideoElement>
169
     {
173
     {
170
         // Autoplay guide: https://developer.mozilla.org/en-US/docs/Web/Media/Autoplay_guide
174
         // Autoplay guide: https://developer.mozilla.org/en-US/docs/Web/Media/Autoplay_guide
171
         // Chrome policy: https://developer.chrome.com/blog/autoplay/
175
         // Chrome policy: https://developer.chrome.com/blog/autoplay/
251
      * Wait for the input video to be playable
255
      * Wait for the input video to be playable
252
      * @param video
256
      * @param video
253
      * @returns a promise that resolves to the input video when it can be played through to the end
257
      * @returns a promise that resolves to the input video when it can be played through to the end
254
-     * @internal
255
      */
258
      */
256
-    _waitUntilPlayable(video: HTMLVideoElement): SpeedyPromise<HTMLVideoElement>
259
+    private _waitUntilPlayable(video: HTMLVideoElement): SpeedyPromise<HTMLVideoElement>
257
     {
260
     {
258
         const TIMEOUT = 15000, INTERVAL = 500;
261
         const TIMEOUT = 15000, INTERVAL = 500;
259
 
262
 
275
             }, INTERVAL);
278
             }, INTERVAL);
276
         });
279
         });
277
     }
280
     }
278
-}
281
+}

Loading…
Cancel
Save