遮罩层添加

3 years ago · 6ab833d407
5 changed files with 54 additions and 15 deletions
--- a/code/VideoAccess-VCMP/web/client/src/components/videoPlayer/videoOperation.jsx
+++ b/code/VideoAccess-VCMP/web/client/src/components/videoPlayer/videoOperation.jsx
@ -30,6 +30,8 @@ const VideoOperation = ({
   player,
   // setPlayer,
   playState,
+   videoFront,
+   videoAfter
 }) => {
   const [showTimeSelect, setShowTimeSelect] = useState(false)

@ -49,11 +51,12 @@ const VideoOperation = ({
      }

      console.log(player);
+      videoFront = new moment(); //验证前时间
      player.stop().then((res) => {
         if (resolution == 'sd') {
-            player.play({ url: videoObj?.playUrlHd, options: { hd: true } })
+            player.play({ url: videoObj?.playUrlHd, options: { hd: true } }) 
         } else {
-            player.play({ url: videoObj?.playUrlSd, options: { hd: false } })
+            player.play({ url: videoObj?.playUrlSd, options: { hd: false } } )
         }
         playState = false
      })
--- a/code/VideoAccess-VCMP/web/client/src/components/videoPlayer/videoPlay.jsx
+++ b/code/VideoAccess-VCMP/web/client/src/components/videoPlayer/videoPlay.jsx
@ -16,11 +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 = ({
+const VideoPlay = ({ dispatch, actions,
   height, width, containerId = 'myPlayer',
   // playUrl,
   name,
@ -68,6 +67,7 @@ const VideoPlay = ({
   iotVideoServer,
   local, //是否本地调用视频
 }) => {
+   // console.log(videoObj);
   if (videoObj.type == 'yingshi') {
      videoObj = {
         ...videoObj,
@ -77,7 +77,7 @@ const VideoPlay = ({
      }
   }

-
+   const { openness } = actions;
   const [jessibuca, setjessibuca] = useState(null)
   const [player, setPlayer] = useState(null)
   const [isPlaying, setIsPlaying] = useState(false)
@ -93,7 +93,9 @@ const VideoPlay = ({
   const [resolution, setResolution] = useState('sd') // 标清 sd  高清 hd
   const [videoMask, setVideoMask] = useState(true) // 视频遮罩
   const [disappear, setDisappear] = useState(false) // 视频消失
-   const [disappears, setDisappears] = useState(false) // 视频消失
+   const [numbers, setNumbers] = useState(false)
+   const [written, setWritten] = useState('')
+


   // 标记萤石操作中，等待ifream返回信息后清空
@ -118,27 +120,37 @@ const VideoPlay = ({

   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)
+         setTimeout(() => {
+            // console.log(yingshiPlayer.current);
+            if (disappear || duration > 2000) {
               setVideoMask(true)
+               console.log(numbers);
+               dispatch(openness.getErrorCode({ status: numbers, platform: videoObj.type})).then((res) => {
+                  console.log(res);
+                  if (res.payload.data) {
+                     setWritten(res.payload.data.describe)
+                  } else {
+                     setWritten('视频异常，问题处理中...')
+                  }
+
+               });
            }

-         }, duration > 4000 ? 0 : 4000 - duration)
+         }, duration > 2000 ? 0 : 2000 - duration)

      }

   }, [disappear, videoMask])

+
+
   useEffect(() => {
      setResolution(changeData?.hdChecked ? 'hd' : 'sd')
      if (player) {
+         videoFront = new moment(); //验证前时间
         player.stop().then(() => {
            player.play({ url: changeData?.hdChecked ? videoObj.playUrlHd : videoObj.playUrlSd })
         })
@ -209,6 +221,7 @@ const VideoPlay = ({
      hide: !Boolean(videoObj.replayUrl),
      click: () => {
         changeSelectState('histroy')
+         videoFront = new moment(); //验证前时间
         player.stop().then(() => {
            if (operationRef.current?.histroy?.select && Begain.current) {
               player.play({ url: `${videoObj.replayUrl}?begin=${moment(Begain.current).format("YYYYMMDDHHmmss")}&end=${moment(playBackTime.current[1]).format("YYYYMMDDHHmmss")}` })
@ -308,6 +321,7 @@ const VideoPlay = ({
                  // setYingshiPrepare('play')
               }
            }, 300)
+            videoFront = new moment(); //验证前时间
            player.stop().then(() => {
               player.play({ url: `${videoObj.replayUrl}?begin=${moment(Begain.current).format("YYYYMMDDHHmmss")}&end=${moment(playBackTime.current[1]).format("YYYYMMDDHHmmss")}` })
               playState.current = false
@ -372,6 +386,7 @@ const VideoPlay = ({
            },
            handleError: (e) => {    //播放失败
               console.log(e, '播放失败');
+               setNumbers(e.retcode)
               videoAfter = new moment();  //验证后时间
               setDisappear(true)
            },
@ -477,6 +492,8 @@ const VideoPlay = ({
                  player={player}
                  resolution={resolution}
                  playState={playState.current}
+                  videoFront={videoFront}
+                  videoAfter={videoFront}
               />
               {/* 视频内容 */}
               {
@ -496,7 +513,7 @@ const VideoPlay = ({
                  // />
               }
               <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: 'black' }}></div> : ''}
+               {videoMask ? <div style={{ height: '100%', width: '100%', position: 'absolute', top: '0', left: '0', zIndex: 99, backgroundColor: 'black', color: "red", }}><div style={{ position: 'absolute', top: 'calc(60%)', left: 0, zIndex: 99, textAlign: 'center', width: '100%' }}>{written}</div></div> : ''}

               {/* 下方操作栏 */}
               {/* 显示操作功能条件（宽高） */}
@ -517,6 +534,8 @@ const VideoPlay = ({
                     slideDown={slideDown}
                     setPlayer={setPlayer}
                     player={player}
+                     videoFront={videoFront}
+                     videoAfter={videoFront}
                     playState={playState.current}
                  /> : ""
               }
@ -532,6 +551,7 @@ function mapStateToProps (state) {
   return {
      user: auth.user,
      iotVideoServer: global.iotVideoServer,
+      actions: global.actions,
   };
 }

--- a/code/VideoAccess-VCMP/web/client/src/components/videoPlayer/voiceHeader.jsx
+++ b/code/VideoAccess-VCMP/web/client/src/components/videoPlayer/voiceHeader.jsx
@ -55,7 +55,7 @@ const VideoHeader = ({ operationState, changeSelectState, setProcessDisX, name,
   }, [showTime])

   const vcmp_videoplay = document.getElementById("vcmp_videoplay" + videoObj.id)?.clientHeight
-   const vcmp_videopla = document.getElementById("vcmp_videoplay" + videoObj.id)?.clientWidth
+   const vcmp_videopla = document.getElementById('vcmp_videoplay' + videoObj.id)?.clientWidth

   return (
      <div>
@ -78,6 +78,7 @@ const VideoHeader = ({ operationState, changeSelectState, setProcessDisX, name,
                              <IconReply style={{ marginRight: 12, cursor: 'pointer' }} onClick={() => {
                                 changeSelectState('histroy')
                                 if (playState) {
+                                    videoFront = new moment(); //验证前时间
                                    player.stop().then(() => {
                                       if (resolution == 'sd') {
                                          player.play({ url: videoObj?.playUrlSd, })
--- a/code/VideoAccess-VCMP/web/client/src/sections/openness/actions/mirroring.js
+++ b/code/VideoAccess-VCMP/web/client/src/sections/openness/actions/mirroring.js
@ -96,3 +96,16 @@ export function putMirror(data) { //编辑推送配置
        reducer: {},
    });
 }
+
+export function getErrorCode(query) {//查取指定状态码信息
+   return (dispatch) =>
+     basicAction({
+       type: "get",
+       dispatch: dispatch,
+       query,
+       actionType: "GET_ERRORCODE",
+       url: `${ApiTable.getErrorCode}`,
+       msg: { option: "" }, 
+       reducer: { name: "" },
+   });
+}
--- a/code/VideoAccess-VCMP/web/client/src/utils/webapi.js
+++ b/code/VideoAccess-VCMP/web/client/src/utils/webapi.js
@ -60,6 +60,8 @@ export const ApiTable = {
   putPushBanned: 'status/push/banned',//禁用推送配置
   getPushCopy: 'status/push/{configId}/copy',//复制推送配置
   getPushLog: 'status/push/{configId}/log',//获取推送记录
+   getErrorCode: '/status/check', //查取指定状态码信息
+


   //应用管理