bug

code/VideoAccess-VCMP/web/client/src/components/videoPlayer/videoOperation.jsx

@@ -55,7 +55,7 @@ const VideoOperation = ({
          } else {
             player.play({ url: videoObj?.playUrlSd, options: { hd: false } })
          }
-            playState=false
+         playState = false
       })
       setResolution(resolution == 'sd' ? 'hd' : 'sd')
       // setPlayer({ url: resolution == 'sd' ? videoObj?.playUrlSd : videoObj?.playUrlHd })

code/VideoAccess-VCMP/web/client/src/components/videoPlayer/videoPlay.jsx

@@ -16,7 +16,10 @@ const yingshiUrl = 'https://open.ys7.com/ezopen/h5/iframe'
 const yingshiCloseSoundKey = 'closeSound'
 const yingshiOpenSoundKey = 'openSound'
 
-
+let timings
+let videoFront
+let videoAfter
+// let duration = moment.duration(videoAfter.diff(videoFront))._data.milliseconds;
 const VideoPlay = ({
    height, width, containerId = 'myPlayer',
    // playUrl,
@@ -65,7 +68,6 @@ const VideoPlay = ({
    iotVideoServer,
    local, //是否本地调用视频
 }) => {
-   // console.log(sizeWh);
    if (videoObj.type == 'yingshi') {
       videoObj = {
          ...videoObj,
@@ -91,6 +93,7 @@ const VideoPlay = ({
    const [resolution, setResolution] = useState('sd') // 标清 sd  高清 hd
    const [videoMask, setVideoMask] = useState(true) // 视频遮罩
    const [disappear, setDisappear] = useState(false) // 视频消失
+   const [disappears, setDisappears] = useState(false) // 视频消失
 
 
    // 标记萤石操作中，等待ifream返回信息后清空
@@ -106,11 +109,33 @@ const VideoPlay = ({
    const playState = useRef(false)  //播放状态
    const yingshiPlayer = useRef(null)
 
+
    useEffect(() => {
       setRoll(false)
    }, [resolution]);
 
 
+
+   useEffect(() => {
+
+      if (timings) clearInterval(timings)
+
+      if (disappear || !videoMask) {
+         let duration = moment.duration(videoAfter?.diff(videoFront))._data.milliseconds;
+         console.log(duration);
+         timings = setInterval(() => {
+            console.log(yingshiPlayer.current);
+            if (disappear && duration > 4000) {
+               // yingshiPlayer.current?.reSize(1, 1)
+               setVideoMask(true)
+            }
+
+         }, duration > 4000 ? 0 : 4000 - duration)
+
+      }
+
+   }, [disappear, videoMask])
+
    useEffect(() => {
       setResolution(changeData?.hdChecked ? 'hd' : 'sd')
       if (player) {
@@ -165,7 +190,7 @@ const VideoPlay = ({
       key: 'fullScreen',
       click: () => {
          changeSelectState('fullScreen')
-         let videoplay = document.getElementsByClassName('vcmp_video' + videoObj.id)
+         let videoplay = document.getElementById("vcmp_videoplay" + videoObj.id)
          if (screenfull.isEnabled) {
             screenfull.toggle(videoplay);
             if (videoObj?.type == 'yingshi' && player) {
@@ -210,13 +235,17 @@ const VideoPlay = ({
 
       // 全屏状态监听
       screenfull.on('change', (e) => {
-         console.log(e?.path[0]?.id);
+         if (e?.path[0]?.id?.includes("vcmp_videoplay")) {
-         if (e?.path[0]?.id == "vcmp_video" + videoObj.id) {
             if (screenfull.isFullscreen && operationRef.current && !operationRef.current['fullScreen'].select) {
                changeSelectState('fullScreen')
             }
             if (!screenfull.isFullscreen && operationRef.current && operationRef.current['fullScreen'].select) {
                changeSelectState('fullScreen')
+               console.log(yingshiPlayer.current);
+               if (yingshiPlayer.current) {
+                  console.log(45648641);
+                  // yingshiPlayer.current.reSize(size?.width, size?.height);
+               }
             }
          }
       });
@@ -301,7 +330,6 @@ const VideoPlay = ({
             // }, err => {.
             //    console.log(err);
             // })
-            console.log(videoObj);
             const inviteRes_ = await request.get(`${iotVideoServer}/api/gb28181/invite?id=${videoObj.topSerialNo}&channel=${videoObj.serialNo}`)
          } catch (error) {
             console.log(error.response);
@@ -329,7 +357,7 @@ const VideoPlay = ({
          setjessibuca(jessibuca)
          play({ jessibuca })
       } else {
-
+         videoFront = new moment(); //验证前时间
          const player = new EZUIKit.EZUIKitPlayer({
             id: containerId, // 视频容器ID
             accessToken: videoObj?.yingshiToken,
@@ -340,11 +368,12 @@ const VideoPlay = ({
                setRoll(true)
                setVideoMask(false)
                playState.current = true
-               // setDisappear(true)
+               videoAfter = new moment();  //验证后时间
-               console.log(23154);
             },
             handleError: (e) => {    //播放失败
                console.log(e, '播放失败');
+               videoAfter = new moment();  //验证后时间
+               setDisappear(true)
             },
          })
          setPlayer(player)
@@ -388,14 +417,11 @@ const VideoPlay = ({
    }
 
    const setupSize = (data) => {
-      console.log(2222);
-      console.log(operationRef.current?.fullScreen.select);
       if (!operationRef.current?.fullScreen.select) {
          let containerWidth = sizeWh?.parentWidth    //容器的宽高和视频的宽高
          let containerHeight = sizeWh?.parentHeight
          let videoWidth = width || sizeWh?.width
          let videoHeight = height || sizeWh?.height
-         console.log(2222);
          if (IsSize == 'true') {
 
             if (containerWidth >= videoWidth && containerHeight >= videoHeight) {
@@ -422,11 +448,7 @@ const VideoPlay = ({
                player.reSize(videoWidth, videoHeight)
             }
          } else {
-            console.log(48978945);
-            console.log(player);
             if (videoObj.type == 'yingshi' && player?.pluginStatus) {
-               console.log(1111111);
-               console.log(videoWidth, videoHeight);
                player.reSize(videoWidth, videoHeight)
             }
          }
@@ -440,8 +462,8 @@ const VideoPlay = ({
 
    return (
       <>
-         <div className={'vcmp_videoplay' + videoObj.id + " my_vcmp_videoplay"} style={{ width: size?.parentWidth || '100%', height: size?.parentHeight || '100%', backgroundColor: 'black', overflow: 'hidden', display: 'flex', alignItems: 'center', justifyContent: 'center', }}>
+         <div className='vcmp_videoplay' style={{ width: size?.parentWidth || '100%', height: size?.parentHeight || '100%', backgroundColor: 'black', overflow: 'hidden', display: 'flex', alignItems: 'center', justifyContent: 'center', }}>
-            <div id="vcmp_videoplay" className={'vcmp_video' + videoObj.id} style={{ position: 'relative', height: size?.height || '100%', width: size?.width || '100%', minWidth: 240, minHeight: 135, overflow: 'hidden' }}>              {/* 顶部信息 */}
+            <div id={"vcmp_videoplay" + videoObj.id} className="vcmp_video" style={{ position: 'relative', height: size?.height || '100%', width: size?.width || '100%', minWidth: 240, minHeight: 135, overflow: 'hidden' }}>
                <VideoHeader
                   operationState={operationState} changeSelectState={changeSelectState}
                   histroyTime={histroyTime}
@@ -473,8 +495,8 @@ const VideoPlay = ({
                   //     style={{ pointerEvents: 'none' }}
                   // />
                }
-               {!disappear ? <div id={containerId} style={{ height: '100%', width: '100%', }}></div> : ''}
+               <div id={containerId} style={{ height: '100%', width: '100%', }}></div>
-               {videoMask ? <div style={{ height: size?.height || '100%', width: size?.width || '100%', minWidth: 400, minHeight: 225, overflow: 'hidden', position: 'absolute', top: '0', left: '0', zIndex: 99, backgroundColor: 'rgba(255,255,255,0.65)' }}></div> : ''}
+               {videoMask ? <div style={{ height: size?.height || '100%', width: size?.width || '100%', minWidth: 400, minHeight: 225, overflow: 'hidden', position: 'absolute', top: '0', left: '0', zIndex: 99, backgroundColor: 'black' }}></div> : ''}
 
                {/* 下方操作栏 */}
                {/* 显示操作功能条件（宽高） */}

code/VideoAccess-VCMP/web/client/src/components/videoPlayer/videoPlay.less

@@ -38,7 +38,7 @@
    display: none;
 }
 
-#vcmp_videoplay:hover{
+.vcmp_video:hover{
     .animation{
         transform: translateY(-40px);
     }

code/VideoAccess-VCMP/web/client/src/components/videoPlayer/voiceHeader.jsx

@@ -54,14 +54,14 @@ const VideoHeader = ({ operationState, changeSelectState, setProcessDisX, name,
       updateTime()
    }, [showTime])
 
-    const vcmp_videoplay = document.getElementsByClassName('vcmp_video'+videoObj.id)?.clientHeigh
+   const vcmp_videoplay = document.getElementById("vcmp_videoplay" + videoObj.id)?.clientHeight
-    const vcmp_videopla = document.getElementsByClassName('vcmp_video'+videoObj.id)?.clientWidth
+   const vcmp_videopla = document.getElementById("vcmp_videoplay" + videoObj.id)?.clientWidth
 
    return (
       <div>
          {roll && vcmp_videopla > 320 ?
             <div style={{
-                    height: '12%', lineHeight: `${vcmp_videoplay * 0.12 > 42 ? 42 : vcmp_videoplay * 0.12 < 30 ? 30 : vcmp_videoplay * 0.12}px`, background: videoStyle == 'true' ? '#467ACD' : '#000000FF', maxHeight: 42, minHeight: 30,
+               height: '12%', lineHeight: `${vcmp_videoplay * 0.12 > 42 ? 42 : vcmp_videoplay * 0.12 < 30 ? 30 : vcmp_videoplay * 0.12}px`, background: videoStyle == 'true' ? content.length > 0 ? '#467ACD' : "" : '#000000FF', maxHeight: 42, minHeight: 30,
                position: 'absolute', width: '100%', zIndex: 80,
                color: '#fff'
             }}>
@@ -96,7 +96,7 @@ const VideoHeader = ({ operationState, changeSelectState, setProcessDisX, name,
                   </Col>
                   <Col span={videoStyle == 'true' ? 24 : 15} style={{}}>
                      <div style={{ paddingRight: 12 }}>
-                                {content ? <TextScroll content={content || []} duration={6} videoObj={videoObj} /> : ""}
+                        {content && content?.length > 0 ? <TextScroll content={content || []} duration={6} videoObj={videoObj} /> : ""}
                      </div>
                   </Col>
                </Row>

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

@@ -12,7 +12,6 @@ const Container = ({ videoObj, pageSize, showHeader, videoPlay, mould }) => {
    useEffect(() => {
 
       const resize_ = async () => {
-         console.log(document.getElementById('video' + videoObj.key).clientWidth);
          await setVideoWidth(document.getElementById('video' + videoObj.key).clientWidth)
          await setVideoHeight(document.getElementById('video' + videoObj.key).clientHeight)
       }

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

@@ -421,6 +421,8 @@ const VideoScreen = ({ treeData, filterGroup, videoPlay, template, headerName, s
                         onChange={(e) => {
                            // console.log(e);
                            setLeftValue(e)
+                           setPage(1)
+                           pageRef.current = 1
                         }}
                         onSelect={(e) => {
                            // console.log(e);