|
|
|
@ -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 == "vcmp_video" + videoObj.id) { |
|
|
|
if (e?.path[0]?.id?.includes("vcmp_videoplay")) { |
|
|
|
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) |
|
|
|
console.log(23154); |
|
|
|
videoAfter = new moment(); //验证后时间 |
|
|
|
}, |
|
|
|
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 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 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" + 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> : ''} |
|
|
|
{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> : ''} |
|
|
|
<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> : ''} |
|
|
|
|
|
|
|
{/* 下方操作栏 */} |
|
|
|
{/* 显示操作功能条件（宽高） */} |
|
|
|
|
