Browse Source

遮罩层添加

release_1.3.0
wenlele 3 years ago
parent
commit
6ab833d407
  1. 7
      code/VideoAccess-VCMP/web/client/src/components/videoPlayer/videoOperation.jsx
  2. 44
      code/VideoAccess-VCMP/web/client/src/components/videoPlayer/videoPlay.jsx
  3. 3
      code/VideoAccess-VCMP/web/client/src/components/videoPlayer/voiceHeader.jsx
  4. 13
      code/VideoAccess-VCMP/web/client/src/sections/openness/actions/mirroring.js
  5. 2
      code/VideoAccess-VCMP/web/client/src/utils/webapi.js

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

@ -30,6 +30,8 @@ const VideoOperation = ({
player, player,
// setPlayer, // setPlayer,
playState, playState,
videoFront,
videoAfter
}) => { }) => {
const [showTimeSelect, setShowTimeSelect] = useState(false) const [showTimeSelect, setShowTimeSelect] = useState(false)
@ -49,11 +51,12 @@ const VideoOperation = ({
} }
console.log(player); console.log(player);
videoFront = new moment(); //
player.stop().then((res) => { player.stop().then((res) => {
if (resolution == 'sd') { if (resolution == 'sd') {
player.play({ url: videoObj?.playUrlHd, options: { hd: true } }) player.play({ url: videoObj?.playUrlHd, options: { hd: true } })
} else { } else {
player.play({ url: videoObj?.playUrlSd, options: { hd: false } }) player.play({ url: videoObj?.playUrlSd, options: { hd: false } } )
} }
playState = false playState = false
}) })

44
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 yingshiCloseSoundKey = 'closeSound'
const yingshiOpenSoundKey = 'openSound' const yingshiOpenSoundKey = 'openSound'
let timings
let videoFront let videoFront
let videoAfter let videoAfter
// let duration = moment.duration(videoAfter.diff(videoFront))._data.milliseconds; // let duration = moment.duration(videoAfter.diff(videoFront))._data.milliseconds;
const VideoPlay = ({ const VideoPlay = ({ dispatch, actions,
height, width, containerId = 'myPlayer', height, width, containerId = 'myPlayer',
// playUrl, // playUrl,
name, name,
@ -68,6 +67,7 @@ const VideoPlay = ({
iotVideoServer, iotVideoServer,
local, // local, //
}) => { }) => {
// console.log(videoObj);
if (videoObj.type == 'yingshi') { if (videoObj.type == 'yingshi') {
videoObj = { videoObj = {
...videoObj, ...videoObj,
@ -77,7 +77,7 @@ const VideoPlay = ({
} }
} }
const { openness } = actions;
const [jessibuca, setjessibuca] = useState(null) const [jessibuca, setjessibuca] = useState(null)
const [player, setPlayer] = useState(null) const [player, setPlayer] = useState(null)
const [isPlaying, setIsPlaying] = useState(false) const [isPlaying, setIsPlaying] = useState(false)
@ -93,7 +93,9 @@ const VideoPlay = ({
const [resolution, setResolution] = useState('sd') // sd hd const [resolution, setResolution] = useState('sd') // sd hd
const [videoMask, setVideoMask] = useState(true) // const [videoMask, setVideoMask] = useState(true) //
const [disappear, setDisappear] = useState(false) // const [disappear, setDisappear] = useState(false) //
const [disappears, setDisappears] = useState(false) // const [numbers, setNumbers] = useState(false)
const [written, setWritten] = useState('')
// ifream // ifream
@ -118,27 +120,37 @@ const VideoPlay = ({
useEffect(() => { useEffect(() => {
if (timings) clearInterval(timings)
if (disappear || !videoMask) { if (disappear || !videoMask) {
let duration = moment.duration(videoAfter?.diff(videoFront))._data.milliseconds; let duration = moment.duration(videoAfter?.diff(videoFront))._data.milliseconds;
console.log(duration); 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) 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]) }, [disappear, videoMask])
useEffect(() => { useEffect(() => {
setResolution(changeData?.hdChecked ? 'hd' : 'sd') setResolution(changeData?.hdChecked ? 'hd' : 'sd')
if (player) { if (player) {
videoFront = new moment(); //
player.stop().then(() => { player.stop().then(() => {
player.play({ url: changeData?.hdChecked ? videoObj.playUrlHd : videoObj.playUrlSd }) player.play({ url: changeData?.hdChecked ? videoObj.playUrlHd : videoObj.playUrlSd })
}) })
@ -209,6 +221,7 @@ const VideoPlay = ({
hide: !Boolean(videoObj.replayUrl), hide: !Boolean(videoObj.replayUrl),
click: () => { click: () => {
changeSelectState('histroy') changeSelectState('histroy')
videoFront = new moment(); //
player.stop().then(() => { player.stop().then(() => {
if (operationRef.current?.histroy?.select && Begain.current) { 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")}` }) 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') // setYingshiPrepare('play')
} }
}, 300) }, 300)
videoFront = new moment(); //
player.stop().then(() => { player.stop().then(() => {
player.play({ url: `${videoObj.replayUrl}?begin=${moment(Begain.current).format("YYYYMMDDHHmmss")}&end=${moment(playBackTime.current[1]).format("YYYYMMDDHHmmss")}` }) player.play({ url: `${videoObj.replayUrl}?begin=${moment(Begain.current).format("YYYYMMDDHHmmss")}&end=${moment(playBackTime.current[1]).format("YYYYMMDDHHmmss")}` })
playState.current = false playState.current = false
@ -372,6 +386,7 @@ const VideoPlay = ({
}, },
handleError: (e) => { // handleError: (e) => { //
console.log(e, '播放失败'); console.log(e, '播放失败');
setNumbers(e.retcode)
videoAfter = new moment(); // videoAfter = new moment(); //
setDisappear(true) setDisappear(true)
}, },
@ -477,6 +492,8 @@ const VideoPlay = ({
player={player} player={player}
resolution={resolution} resolution={resolution}
playState={playState.current} playState={playState.current}
videoFront={videoFront}
videoAfter={videoFront}
/> />
{/* 视频内容 */} {/* 视频内容 */}
{ {
@ -496,7 +513,7 @@ const VideoPlay = ({
// /> // />
} }
<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: '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} slideDown={slideDown}
setPlayer={setPlayer} setPlayer={setPlayer}
player={player} player={player}
videoFront={videoFront}
videoAfter={videoFront}
playState={playState.current} playState={playState.current}
/> : "" /> : ""
} }
@ -532,6 +551,7 @@ function mapStateToProps (state) {
return { return {
user: auth.user, user: auth.user,
iotVideoServer: global.iotVideoServer, iotVideoServer: global.iotVideoServer,
actions: global.actions,
}; };
} }

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

@ -55,7 +55,7 @@ const VideoHeader = ({ operationState, changeSelectState, setProcessDisX, name,
}, [showTime]) }, [showTime])
const vcmp_videoplay = document.getElementById("vcmp_videoplay" + videoObj.id)?.clientHeight 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 ( return (
<div> <div>
@ -78,6 +78,7 @@ const VideoHeader = ({ operationState, changeSelectState, setProcessDisX, name,
<IconReply style={{ marginRight: 12, cursor: 'pointer' }} onClick={() => { <IconReply style={{ marginRight: 12, cursor: 'pointer' }} onClick={() => {
changeSelectState('histroy') changeSelectState('histroy')
if (playState) { if (playState) {
videoFront = new moment(); //
player.stop().then(() => { player.stop().then(() => {
if (resolution == 'sd') { if (resolution == 'sd') {
player.play({ url: videoObj?.playUrlSd, }) player.play({ url: videoObj?.playUrlSd, })

13
code/VideoAccess-VCMP/web/client/src/sections/openness/actions/mirroring.js

@ -96,3 +96,16 @@ export function putMirror(data) { //编辑推送配置
reducer: {}, reducer: {},
}); });
} }
export function getErrorCode(query) {//查取指定状态码信息
return (dispatch) =>
basicAction({
type: "get",
dispatch: dispatch,
query,
actionType: "GET_ERRORCODE",
url: `${ApiTable.getErrorCode}`,
msg: { option: "" },
reducer: { name: "" },
});
}

2
code/VideoAccess-VCMP/web/client/src/utils/webapi.js

@ -60,6 +60,8 @@ export const ApiTable = {
putPushBanned: 'status/push/banned',//禁用推送配置 putPushBanned: 'status/push/banned',//禁用推送配置
getPushCopy: 'status/push/{configId}/copy',//复制推送配置 getPushCopy: 'status/push/{configId}/copy',//复制推送配置
getPushLog: 'status/push/{configId}/log',//获取推送记录 getPushLog: 'status/push/{configId}/log',//获取推送记录
getErrorCode: '/status/check', //查取指定状态码信息
//应用管理 //应用管理

Loading…
Cancel
Save