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
signal-noise · Jun 12, 2020 · b7b8612 · b7b8612
1 parent df64dd8
commit b7b8612
Show file tree

Hide file tree

Showing 4 changed files with 16 additions and 3 deletions.
diff --git a/modules/UI/videolayout/LocalVideo.js b/modules/UI/videolayout/LocalVideo.js
@@ -276,9 +276,12 @@ export default class LocalVideo extends SmallVideo {
 
         // Ensure the video gets play() called on it. This may be necessary in the
         // case where the local video container was moved and re-attached, in which
-        // case video does not autoplay.
+        // case video does not autoplay. Also, set the playsinline attribute on the
+        // video element so that local video doesn't open in full screen by default
+        // in Safari browser on iOS.
         const video = this.container.querySelector('video');
 
+        video && video.setAttribute('playsinline', 'true');
         video && !config.testing?.noAutoPlayVideo && video.play();
     }
 }
diff --git a/react/features/base/media/components/web/Video.js b/react/features/base/media/components/web/Video.js
@@ -32,7 +32,13 @@ type Props = {
      * Used to determine the value of the autoplay attribute of the underlying
      * video element.
      */
-    autoPlay: boolean
+    autoPlay: boolean,
+
+    /**
+     * Used to determine the value of the autoplay attribute of the underlying
+     * video element.
+     */
+    playsinline: boolean
 };
 
 /**
@@ -51,7 +57,8 @@ class Video extends Component<Props> {
     static defaultProps = {
         className: '',
         autoPlay: true,
-        id: ''
+        id: '',
+        playsinline: true
     };
 
     /**
@@ -140,6 +147,7 @@ class Video extends Component<Props> {
                 autoPlay = { this.props.autoPlay }
                 className = { this.props.className }
                 id = { this.props.id }
+                playsInline = { this.props.playsinline }
                 ref = { this._setVideoElement } />
         );
     }

diff --git a/react/features/device-selection/components/VideoInputPreview.js b/react/features/device-selection/components/VideoInputPreview.js
@@ -45,6 +45,7 @@ class VideoInputPreview extends Component<Props> {
             <div className = { className }>
                 <Video
                     className = 'video-input-preview-display flipVideoX'
+                    playsinline = { true }
                     videoTrack = {{ jitsiTrack: this.props.track }} />
                 <div className = 'video-input-preview-error'>
                     { error || '' }

diff --git a/react/features/settings/components/web/video/VideoSettingsContent.js b/react/features/settings/components/web/video/VideoSettingsContent.js
@@ -167,6 +167,7 @@ class VideoSettingsContent extends Component<Props, State> {
                 <div className = 'video-preview-overlay' />
                 <Video
                     className = { videoClassName }
+                    playsinline = { true }
                     videoTrack = {{ jitsiTrack }} />
             </div>
         );