ソースを参照

fix(UI): add playsinline attr for video element

> playinline attr needs to be set to true to stop local video from playing in full screen mode in Safari on iOS.
> This applies to the local video thumbnails and the camera previews from the device selection menu and video preview button
master
Jaya Allamsetty 5年前
コミット
b7b861259b

+ 4
- 1
modules/UI/videolayout/LocalVideo.js ファイルの表示

276
 
276
 
277
         // Ensure the video gets play() called on it. This may be necessary in the
277
         // Ensure the video gets play() called on it. This may be necessary in the
278
         // case where the local video container was moved and re-attached, in which
278
         // case where the local video container was moved and re-attached, in which
279
-        // case video does not autoplay.
279
+        // case video does not autoplay. Also, set the playsinline attribute on the
280
+        // video element so that local video doesn't open in full screen by default
281
+        // in Safari browser on iOS.
280
         const video = this.container.querySelector('video');
282
         const video = this.container.querySelector('video');
281
 
283
 
284
+        video && video.setAttribute('playsinline', 'true');
282
         video && !config.testing?.noAutoPlayVideo && video.play();
285
         video && !config.testing?.noAutoPlayVideo && video.play();
283
     }
286
     }
284
 }
287
 }

+ 10
- 2
react/features/base/media/components/web/Video.js ファイルの表示

32
      * Used to determine the value of the autoplay attribute of the underlying
32
      * Used to determine the value of the autoplay attribute of the underlying
33
      * video element.
33
      * video element.
34
      */
34
      */
35
-    autoPlay: boolean
35
+    autoPlay: boolean,
36
+
37
+    /**
38
+     * Used to determine the value of the autoplay attribute of the underlying
39
+     * video element.
40
+     */
41
+    playsinline: boolean
36
 };
42
 };
37
 
43
 
38
 /**
44
 /**
51
     static defaultProps = {
57
     static defaultProps = {
52
         className: '',
58
         className: '',
53
         autoPlay: true,
59
         autoPlay: true,
54
-        id: ''
60
+        id: '',
61
+        playsinline: true
55
     };
62
     };
56
 
63
 
57
     /**
64
     /**
140
                 autoPlay = { this.props.autoPlay }
147
                 autoPlay = { this.props.autoPlay }
141
                 className = { this.props.className }
148
                 className = { this.props.className }
142
                 id = { this.props.id }
149
                 id = { this.props.id }
150
+                playsInline = { this.props.playsinline }
143
                 ref = { this._setVideoElement } />
151
                 ref = { this._setVideoElement } />
144
         );
152
         );
145
     }
153
     }

+ 1
- 0
react/features/device-selection/components/VideoInputPreview.js ファイルの表示

45
             <div className = { className }>
45
             <div className = { className }>
46
                 <Video
46
                 <Video
47
                     className = 'video-input-preview-display flipVideoX'
47
                     className = 'video-input-preview-display flipVideoX'
48
+                    playsinline = { true }
48
                     videoTrack = {{ jitsiTrack: this.props.track }} />
49
                     videoTrack = {{ jitsiTrack: this.props.track }} />
49
                 <div className = 'video-input-preview-error'>
50
                 <div className = 'video-input-preview-error'>
50
                     { error || '' }
51
                     { error || '' }

+ 1
- 0
react/features/settings/components/web/video/VideoSettingsContent.js ファイルの表示

167
                 <div className = 'video-preview-overlay' />
167
                 <div className = 'video-preview-overlay' />
168
                 <Video
168
                 <Video
169
                     className = { videoClassName }
169
                     className = { videoClassName }
170
+                    playsinline = { true }
170
                     videoTrack = {{ jitsiTrack }} />
171
                     videoTrack = {{ jitsiTrack }} />
171
             </div>
172
             </div>
172
         );
173
         );

読み込み中…
キャンセル
保存