feat(Video): Handle .play() errors.

 - Do not throw the error. This results in unhandled rejection promise.
 - Add proper logging so that we can figure out from which video element the error occured.

react/features/base/media/components/web/Video.tsx

@@ -239,7 +239,8 @@ class Video extends Component<IProps> {
                     // Prevent uncaught "DOMException: The play() request was interrupted by a new load request"
                     // when video playback takes long to start and it starts after the component was unmounted.
                     if (this._mounted) {
-                        throw error;
+                        logger.error(`Error while trying to play video with id ${
+                            this.props.id} and video track ${this.props.videoTrack?.jitsiTrack}: ${error}`);
                     }
                 });
             }
@@ -276,6 +277,9 @@ class Video extends Component<IProps> {
             this._attachTrack(nextProps.videoTrack).catch((_error: Error) => {
                 // Ignore the error. We are already logging it.
             });
+
+            // NOTE: We may want to consider calling .play() explicitly in this case if any issues araise in future.
+            // For now it seems we are good with the autoplay attribute of the video element.
         }
 
         if (this.props.style !== nextProps.style || this.props.className !== nextProps.className) {

react/features/device-selection/components/VideoInputPreview.web.tsx

@@ -59,6 +59,7 @@ const VideoInputPreview = ({ error, localFlipX, track }: IProps) => {
         <div className = { classes.container }>
             <Video
                 className = { cx(classes.video, localFlipX && 'flipVideoX') }
+                id = 'settings_video_input_preview'
                 playsinline = { true }
                 videoTrack = {{ jitsiTrack: track }} />
             {error && (

react/features/settings/components/web/video/VideoSettingsContent.tsx

@@ -277,6 +277,7 @@ const VideoSettingsContent = ({
                 </div>
                 <Video
                     className = { cx(classes.previewVideo, 'flipVideoX') }
+                    id = { `video_settings_preview-${index}` }
                     playsinline = { true }
                     videoTrack = {{ jitsiTrack }} />
             </div>

react/features/virtual-background/components/VirtualBackgroundPreview.tsx

@@ -244,6 +244,7 @@ class VirtualBackgroundPreview extends PureComponent<IProps, IState> {
         return (
             <Video
                 className = { classes.previewVideo }
+                id = 'virtual_background_preview'
                 playsinline = { true }
                 videoTrack = {{ jitsiTrack: data }} />
         );