镜像全屏播放画面变化

code/VideoAccess-VCMP/web/client/src/sections/openness/components/container.jsx

@@ -8,6 +8,7 @@ import { useState } from 'react';
 const Container = ({ videoObj, pageSize, showHeader, videoPlay, mould }) => {
    const [videoWidth, setVideoWidth] = useState()
    const [videoHeight, setVideoHeight] = useState()
+   const [fullscreen, setFullscreen] = useState(false);
    // console.log(videoObj);
    useEffect(() => {
 
@@ -28,18 +29,36 @@ const Container = ({ videoObj, pageSize, showHeader, videoPlay, mould }) => {
       //    window.removeEventListener('resize', resize_);
       // }
 
+
+      const div = document.getElementById('rearProjection');
+      const handleFullscreenChange = () => {
+         if (document.fullscreenElement === div) {
+            console.log('div进入全屏状态');
+            setFullscreen(true);
+         } else {
+            console.log('div退出全屏状态');
+            setFullscreen(false);
+         }
+      };
+
+      document.addEventListener('fullscreenchange', handleFullscreenChange);
+      return () => {
+         document.removeEventListener('fullscreenchange', handleFullscreenChange);
+      };
    }, [])
    useEffect(() => {
       try {
-         let video = document.getElementById('video' + videoObj.key)
-         if (video) {
-            setVideoWidth(video.clientWidth)
-            setVideoHeight(video.clientHeight)
-         }
+         setTimeout(() => {
+            let video = document.getElementById('video' + videoObj.key)
+            if (video) {
+               setVideoWidth(video.clientWidth)
+               setVideoHeight(video.clientHeight)
+            }
+         }, 100);
       } catch (error) {
          console.error(error)
       }
-   }, [pageSize, showHeader])
+   }, [pageSize, showHeader, fullscreen])
    // console.log(videoWidth, videoHeight);
    return (
       <div style={{ width: videoWidth || '100%', height: videoHeight || '100%', padding: 5 }}>