feat: 修复切换主屏显示播放异常的情况

src/pages/Play/components/SyncPlayer.tsx

@@ -31,6 +31,7 @@ const SyncVideoPlayer: React.FC<SyncVideoPlayerProps> = ({
   const topVideoRef = useRef<HTMLVideoElement>(null);
   const leftVideoRef = useRef<HTMLVideoElement>(null);
   const rightVideoRef = useRef<HTMLVideoElement>(null);
+  const audioRef = useRef<HTMLAudioElement>(null);
   const [videos, setVideos] = useState<{
     top: VideoSource;
     left: VideoSource;
@@ -47,16 +48,12 @@ const SyncVideoPlayer: React.FC<SyncVideoPlayerProps> = ({
       left: position === 'left' ? prev.top : prev.left,
       right: position === 'right' ? prev.top : prev.right
     }));
-    if (position === 'left') {
-      leftVideoRef.current?.load();
-    } else {
-      rightVideoRef.current?.load();
-    }
+    leftVideoRef.current?.load();
+    rightVideoRef.current?.load();
     topVideoRef.current?.load();
+    audioRef.current?.load();
   };
 
-
-  const audioRef = useRef<HTMLAudioElement>(null);
   const [isPlaying, setIsPlaying] = useState(false);
   const [currentTime, setCurrentTime] = useState(0);
   const [duration, setDuration] = useState(0);
@@ -174,6 +171,7 @@ const SyncVideoPlayer: React.FC<SyncVideoPlayerProps> = ({
             style={{ objectFit: 'contain',backgroundColor: 'grey' }}
             muted
             controls={false}
+            disablePictureInPicture
           >
             <source src={videos.top.src} type="video/mp4" />
           </video>
@@ -189,6 +187,7 @@ const SyncVideoPlayer: React.FC<SyncVideoPlayerProps> = ({
                 style={{ objectFit: 'contain', backgroundColor: 'grey' }}
                 muted
                 controls={false}
+                disablePictureInPicture
               >
                 <source src={videos[pos].src} type="video/mp4" />
               </video>
@@ -196,13 +195,15 @@ const SyncVideoPlayer: React.FC<SyncVideoPlayerProps> = ({
                 <Tag color={videos[pos].tagColor}>
                   {videos[pos].label}
                 </Tag>
-                <Tag
-                  color="orange"
-                  style={{ cursor: 'pointer' }}
-                  onClick={() => handleSwitch(pos)}
-                >
-                  主屏显示
-                </Tag>
+                { !isPlaying && (
+                  <Tag
+                    color="orange"
+                    style={{ cursor: 'pointer' }}
+                    onClick={() => handleSwitch(pos)}
+                  >
+                    主屏显示
+                  </Tag>
+                )}
               </div>
             </div>
           ))}