diff --git a/code/VideoAccess-VCMP/web/client/src/sections/openness/components/container.jsx b/code/VideoAccess-VCMP/web/client/src/sections/openness/components/container.jsx index 0f335ee..94787bf 100644 --- a/code/VideoAccess-VCMP/web/client/src/sections/openness/components/container.jsx +++ b/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 (