fix:

1、播放器全屏后esc退出问题修复
2、单路播放切换播放源后播放状态不对问题修复

src/pages/Play/components/SinglePlayer.tsx

@@ -1,5 +1,5 @@
 
-import React, { useRef, useState } from 'react';
+import React, { useEffect, useRef, useState } from 'react';
 import './style/index.less';
 import { Button } from 'antd';
 
@@ -112,9 +112,36 @@ const SyncVideoPlayer: React.FC<SyncVideoPlayerProps> = ({
     if (isPlaying) {
       videoRef.current?.load();
       audioRef.current?.load();
+      setIsPlaying(false);
     }
   };
 
+  useEffect(() => {
+    const handleFullscreenChange = () => {
+      setIsFullscreen(!!document.fullscreenElement);
+    };
+
+    const handleKeyDown = (e) => {
+      if (e.key === 'Escape' && isFullscreen) {
+        toggleFullscreen();
+      }
+    };
+
+    document.addEventListener('fullscreenchange', handleFullscreenChange);
+    document.addEventListener('webkitfullscreenchange', handleFullscreenChange);
+    document.addEventListener('mozfullscreenchange', handleFullscreenChange);
+    document.addEventListener('msfullscreenchange', handleFullscreenChange);
+    document.addEventListener('keydown', handleKeyDown);
+
+    return () => {
+      document.removeEventListener('fullscreenchange', handleFullscreenChange);
+      document.removeEventListener('webkitfullscreenchange', handleFullscreenChange);
+      document.removeEventListener('mozfullscreenchange', handleFullscreenChange);
+      document.removeEventListener('msfullscreenchange', handleFullscreenChange);
+      document.removeEventListener('keydown', handleKeyDown);
+    };
+  }, [isFullscreen]);
+
   return (
     <div style={{ display: 'flex', flexDirection: 'column', gap: '20px' }}>
       <div className="video-switcher">

src/pages/Play/components/SyncPlayer.tsx

@@ -159,6 +159,32 @@ const SyncVideoPlayer: React.FC<SyncVideoPlayerProps> = ({
     };
   }, []);
 
+  useEffect(() => {
+    const handleFullscreenChange = () => {
+      setIsFullscreen(!!document.fullscreenElement);
+    };
+
+    const handleKeyDown = (e) => {
+      if (e.key === 'Escape' && isFullscreen) {
+        toggleFullscreen();
+      }
+    };
+
+    document.addEventListener('fullscreenchange', handleFullscreenChange);
+    document.addEventListener('webkitfullscreenchange', handleFullscreenChange);
+    document.addEventListener('mozfullscreenchange', handleFullscreenChange);
+    document.addEventListener('msfullscreenchange', handleFullscreenChange);
+    document.addEventListener('keydown', handleKeyDown);
+
+    return () => {
+      document.removeEventListener('fullscreenchange', handleFullscreenChange);
+      document.removeEventListener('webkitfullscreenchange', handleFullscreenChange);
+      document.removeEventListener('mozfullscreenchange', handleFullscreenChange);
+      document.removeEventListener('msfullscreenchange', handleFullscreenChange);
+      document.removeEventListener('keydown', handleKeyDown);
+    };
+  }, [isFullscreen]);
+
   return (
     <div className={`video-container ${isFullscreen ? 'fullscreen' : ''}`}>
       <div style={{ flex: 1, display: 'flex', flexDirection: 'column', alignItems: 'center' }}>
@@ -166,7 +192,7 @@ const SyncVideoPlayer: React.FC<SyncVideoPlayerProps> = ({
           <video
             ref={topVideoRef}
             onEnded={togglePlay}
-            width={isFullscreen ? '1310' : '1150'}
+            width={isFullscreen ? '1410' : '1210'}
             height={isFullscreen ? '550' : '380'}
             style={{ objectFit: 'contain',backgroundColor: 'grey' }}
             muted
@@ -182,7 +208,7 @@ const SyncVideoPlayer: React.FC<SyncVideoPlayerProps> = ({
             <div key={pos} className="video-wrapper">
               <video
                 ref={pos === 'left' ? leftVideoRef : rightVideoRef}
-                width={isFullscreen ? '650' : '570'}
+                width={isFullscreen ? '700' : '600'}
                 height={isFullscreen ? '420' : '240'}
                 style={{ objectFit: 'contain', backgroundColor: 'grey' }}
                 muted