遮罩层添加

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,6 +51,7 @@ const VideoOperation = ({
       }
 
       console.log(player);
+      videoFront = new moment(); //验证前时间
       player.stop().then((res) => {
          if (resolution == 'sd') {
             player.play({ url: videoObj?.playUrlHd, options: { hd: true } }) 

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(() => {
+         setTimeout(() => {
-            console.log(yingshiPlayer.current);
+            // console.log(yingshiPlayer.current);
-            if (disappear && duration > 4000) {
+            if (disappear || duration > 2000) {
-               // yingshiPlayer.current?.reSize(1, 1)
                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,
    };
 }
 

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, })

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: "" },
+   });
+}

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', //查取指定状态码信息
+
 
 
    //应用管理