|
|
|
@ -92,14 +92,20 @@ const VideoPlay = ({ |
|
|
|
// 标记萤石操作中，等待ifream返回信息后清空 |
|
|
|
const yingshiPrepareRef = useRef(null) |
|
|
|
const playState = useRef(false) //播放状态 |
|
|
|
const player_ = useRef(null) |
|
|
|
|
|
|
|
useEffect(() => { |
|
|
|
setRoll(false) |
|
|
|
}, [resolution,]); |
|
|
|
}, [resolution]); |
|
|
|
|
|
|
|
|
|
|
|
useEffect(() => { |
|
|
|
setResolution(changeData?.hdChecked ? 'hd' : 'sd') |
|
|
|
if (player) { |
|
|
|
player.stop().then(() => { |
|
|
|
player.play({ url: changeData?.hdChecked ? videoObj.playUrlHd : videoObj.playUrlSd }) |
|
|
|
}) |
|
|
|
} |
|
|
|
}, [changeData?.hdChecked]) |
|
|
|
|
|
|
|
const changeSelectState = (key) => { |
|
|
|
@ -318,8 +324,8 @@ const VideoPlay = ({ |
|
|
|
id: containerId, // 视频容器ID |
|
|
|
accessToken: videoObj?.yingshiToken, |
|
|
|
url: videoObj.playUrlSd, |
|
|
|
width: size?.width, |
|
|
|
height: size?.height, |
|
|
|
width: setupSize('width'), |
|
|
|
height: setupSize('height'), |
|
|
|
handleSuccess: () => { //播放成功 |
|
|
|
setRoll(true) |
|
|
|
setVideoMask(false) |
|
|
|
@ -330,6 +336,7 @@ const VideoPlay = ({ |
|
|
|
}, |
|
|
|
}) |
|
|
|
setPlayer(player) |
|
|
|
player_.current = player |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
@ -368,52 +375,58 @@ const VideoPlay = ({ |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
useEffect(async () => { |
|
|
|
if (!operationRef.current?.fullScreen.select && player) { |
|
|
|
if (videoObj.type == 'yingshi' && IsSize == 'true') { |
|
|
|
|
|
|
|
} else { |
|
|
|
console.log(11111111111); |
|
|
|
console.log(sizeWh); |
|
|
|
|
|
|
|
await setSize({ parentWidth: sizeWh?.parentWidth, parentHeight: sizeWh?.parentHeight, width: width || sizeWh?.parentWidth, height: height || sizeWh?.parentHeight }) |
|
|
|
player.reSize(width || sizeWh?.parentWidth, height || sizeWh?.parentHeight) |
|
|
|
const setupSize = (data) => { |
|
|
|
if (!operationRef.current?.fullScreen.select) { |
|
|
|
console.log(sizeWh); |
|
|
|
let containerWidth = sizeWh?.parentWidth //容器的宽高和视频的宽高 |
|
|
|
let containerHeight = sizeWh?.parentHeight |
|
|
|
let videoWidth = width || sizeWh?.width |
|
|
|
let videoHeight = height || sizeWh?.height |
|
|
|
|
|
|
|
if (IsSize == 'true') { |
|
|
|
if (containerWidth >= videoWidth && containerHeight >= videoHeight) { |
|
|
|
if (videoHeight / videoWidth >= 0.55 && videoHeight / videoWidth <= 0.57) { |
|
|
|
|
|
|
|
} else { |
|
|
|
console.warn('宽高不符合尺寸要求，故返回合适的尺寸') |
|
|
|
if (videoWidth / 16 > videoHeight / 9) { |
|
|
|
videoWidth = (videoHeight / 9) * 16 |
|
|
|
} else { |
|
|
|
videoHeight = (videoWidth / 16) * 9 |
|
|
|
} |
|
|
|
} |
|
|
|
} else { |
|
|
|
console.warn('传递宽高参数有误，请确认容器大小范围内') |
|
|
|
if (containerWidth / 16 > containerHeight / 9) { |
|
|
|
videoWidth = (containerHeight / 9) * 16 |
|
|
|
} else { |
|
|
|
videoHeight = (containerWidth / 16) * 9 |
|
|
|
} |
|
|
|
} |
|
|
|
setSize({ parentWidth: containerWidth, parentHeight: containerHeight, width: videoWidth, height: videoHeight }) |
|
|
|
if (videoObj.type == 'yingshi' && player) { |
|
|
|
player.reSize(videoWidth, videoHeight) |
|
|
|
} |
|
|
|
} else { |
|
|
|
setSize({ parentWidth: sizeWh?.parentWidth, parentHeight: sizeWh?.parentHeight, width: width || sizeWh?.parentWidth, height: height || sizeWh?.parentHeight }) |
|
|
|
if (videoObj.type == 'yingshi' && player) { |
|
|
|
player.reSize(width || sizeWh?.parentWidth, height || sizeWh?.parentHeight) |
|
|
|
} |
|
|
|
} |
|
|
|
return data == 'width' ? videoWidth : data == 'height' ? videoHeight : '' |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
useEffect(() => { |
|
|
|
setupSize() |
|
|
|
}, [sizeWh]) |
|
|
|
|
|
|
|
// useEffect(() => { |
|
|
|
// if (IsSize == 'true') { |
|
|
|
// console.log(size?.parentWidth >= size?.width && size?.parentHeight >= size?.height); |
|
|
|
// if (size?.parentWidth >= size?.width && size?.parentHeight >= size?.height) { |
|
|
|
// if (size?.height / size?.width >= 0.55 && size?.height / size?.width <= 0.57) { |
|
|
|
|
|
|
|
// } else { |
|
|
|
// console.warn('宽高不符合尺寸要求，故返回合适的尺寸') |
|
|
|
// if (size?.width / 16 > size?.height / 9) { |
|
|
|
// setSize({ ...size, width: (size?.height / 9) * 16, }) |
|
|
|
// } else { |
|
|
|
// setSize({ ...size, height: (size?.width / 16) * 9 }) |
|
|
|
// } |
|
|
|
// } |
|
|
|
// } else { |
|
|
|
// console.warn('传递宽高参数有误，请确认容器大小范围内') |
|
|
|
// if (size?.parentWidth / 16 > size?.parentHeight / 9) { |
|
|
|
// setSize({ ...size, width: (size?.parentHeight / 9) * 16, height: size?.parentHeight }) |
|
|
|
// } else { |
|
|
|
// setSize({ ...size, width: size?.parentWidth, height: (size?.parentWidth / 16) * 9 }) |
|
|
|
// } |
|
|
|
// } |
|
|
|
// } |
|
|
|
// }, [sizeWh]) |
|
|
|
return ( |
|
|
|
<> |
|
|
|
<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" style={{ position: 'relative', height: size?.height || '100%', width: size?.width || '100%', minWidth: 240, minHeight: 135, overflow: 'hidden' }}> |
|
|
|
{/* 顶部信息 */} |
|
|
|
{size?.parentWidth > 320 ? <VideoHeader |
|
|
|
<VideoHeader |
|
|
|
operationState={operationState} changeSelectState={changeSelectState} |
|
|
|
histroyTime={histroyTime} |
|
|
|
setoperationState={setoperationState} name={name} |
|
|
|
@ -426,9 +439,8 @@ const VideoPlay = ({ |
|
|
|
player={player} |
|
|
|
resolution={resolution} |
|
|
|
playState={playState.current} |
|
|
|
/> : ""} |
|
|
|
/> |
|
|
|
{/* 视频内容 */} |
|
|
|
|
|
|
|
{ |
|
|
|
// <iframe |
|
|
|
// frameBorder="0" |
|
|
|
@ -448,7 +460,6 @@ 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: 'rgba(255,255,255,0.65)' }}>hhktyjr6tyr5</div> : ''} |
|
|
|
|
|
|
|
|
|
|
|
{/* 下方操作栏 */} |
|
|
|
{/* 显示操作功能条件（宽高） */} |
|
|
|
{size?.parentWidth > 320 ? |
|
|
|
|
