|
|
@ -18,9 +18,13 @@ const VideoPlay = ({ |
|
|
height, width, containerId = 'myPlayer', |
|
|
height, width, containerId = 'myPlayer', |
|
|
// playUrl, |
|
|
// playUrl, |
|
|
name, |
|
|
name, |
|
|
|
|
|
global, |
|
|
|
|
|
videoStyle, |
|
|
|
|
|
changeData, |
|
|
videoObj, |
|
|
videoObj, |
|
|
|
|
|
sizeWh, |
|
|
|
|
|
slideDown, //视频下方操作是否滑动 |
|
|
|
|
|
IsSize, //是否按照16:9的比例播放 |
|
|
// videoObj = { |
|
|
// videoObj = { |
|
|
// type: 'yingshi', |
|
|
// type: 'yingshi', |
|
|
// audio: false, |
|
|
// audio: false, |
|
|
@ -44,7 +48,8 @@ const VideoPlay = ({ |
|
|
// }, |
|
|
// }, |
|
|
|
|
|
|
|
|
// |
|
|
// |
|
|
iotVideoServer |
|
|
iotVideoServer, |
|
|
|
|
|
local, //是否本地调用视频 |
|
|
}) => { |
|
|
}) => { |
|
|
const [jessibuca, setjessibuca] = useState(null) |
|
|
const [jessibuca, setjessibuca] = useState(null) |
|
|
const [isPlaying, setIsPlaying] = useState(false) |
|
|
const [isPlaying, setIsPlaying] = useState(false) |
|
|
@ -55,7 +60,10 @@ const VideoPlay = ({ |
|
|
const [histroyTime, setHistroyTime] = useState([]) |
|
|
const [histroyTime, setHistroyTime] = useState([]) |
|
|
const [histroyBegain, setHistroyBegain] = useState() |
|
|
const [histroyBegain, setHistroyBegain] = useState() |
|
|
const [roll, setRoll] = useState()//滚动备注 |
|
|
const [roll, setRoll] = useState()//滚动备注 |
|
|
|
|
|
const [size, setSize] = useState(sizeWh) //视频本身和父级尺寸 |
|
|
const [resolution, setResolution] = useState('sd') // 标清 sd 高清 hd |
|
|
const [resolution, setResolution] = useState('sd') // 标清 sd 高清 hd |
|
|
|
|
|
// const [frequency, setFrequency] = useState(true) |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
// 标记萤石操作中，等待ifream返回信息后清空 |
|
|
// 标记萤石操作中，等待ifream返回信息后清空 |
|
|
const [yingshiPrepare, setYingshiPrepare] = useState('') |
|
|
const [yingshiPrepare, setYingshiPrepare] = useState('') |
|
|
@ -69,6 +77,11 @@ const VideoPlay = ({ |
|
|
setRoll(false) |
|
|
setRoll(false) |
|
|
}, [resolution]); |
|
|
}, [resolution]); |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
useEffect(() => { |
|
|
|
|
|
setResolution(changeData?.hdChecked ? 'hd' : 'sd') |
|
|
|
|
|
}, [changeData?.hdChecked]) |
|
|
|
|
|
|
|
|
const changeSelectState = (key) => { |
|
|
const changeSelectState = (key) => { |
|
|
if (videoObj.type == 'yingshi' && yingshiPrepareRef.current) { |
|
|
if (videoObj.type == 'yingshi' && yingshiPrepareRef.current) { |
|
|
return |
|
|
return |
|
|
@ -104,7 +117,8 @@ const VideoPlay = ({ |
|
|
}, { |
|
|
}, { |
|
|
key: 'talk', |
|
|
key: 'talk', |
|
|
hide: !(videoObj.type == 'yingshi'), |
|
|
hide: !(videoObj.type == 'yingshi'), |
|
|
click: () => { |
|
|
click: (e) => { |
|
|
|
|
|
console.log(e); |
|
|
changeSelectState('talk') |
|
|
changeSelectState('talk') |
|
|
} |
|
|
} |
|
|
}, { |
|
|
}, { |
|
|
@ -115,6 +129,7 @@ const VideoPlay = ({ |
|
|
} |
|
|
} |
|
|
changeSelectState('fullScreen') |
|
|
changeSelectState('fullScreen') |
|
|
let player = document.getElementById('vcmp_videoplay') |
|
|
let player = document.getElementById('vcmp_videoplay') |
|
|
|
|
|
console.log(player); |
|
|
if (screenfull.isEnabled) { |
|
|
if (screenfull.isEnabled) { |
|
|
screenfull.toggle(player); |
|
|
screenfull.toggle(player); |
|
|
} |
|
|
} |
|
|
@ -158,7 +173,6 @@ const VideoPlay = ({ |
|
|
// 萤石 ifream 信息监听 |
|
|
// 萤石 ifream 信息监听 |
|
|
const listenYingshiMessage = async (e) => { |
|
|
const listenYingshiMessage = async (e) => { |
|
|
const { data, origin } = e |
|
|
const { data, origin } = e |
|
|
console.log(e); |
|
|
|
|
|
if (origin !== 'https://open.ys7.com') return |
|
|
if (origin !== 'https://open.ys7.com') return |
|
|
if (data.type == "handleSuccess") { |
|
|
if (data.type == "handleSuccess") { |
|
|
setRoll(true) |
|
|
setRoll(true) |
|
|
@ -306,13 +320,48 @@ const VideoPlay = ({ |
|
|
} |
|
|
} |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
useEffect(() => { |
|
|
|
|
|
if (local) { |
|
|
|
|
|
//弹框视频自适应 |
|
|
|
|
|
const VideoLocal = document.getElementById('video_local') |
|
|
|
|
|
setSize({ parentWidth: VideoLocal?.clientWidth, parentHeight: '100%', width: width, height: height }) |
|
|
|
|
|
} else { |
|
|
|
|
|
setSize(sizeWh) |
|
|
|
|
|
} |
|
|
|
|
|
}, [sizeWh]) |
|
|
|
|
|
useEffect(() => { |
|
|
|
|
|
if (size?.width || size?.height) { |
|
|
|
|
|
// if (size?.parentWidth >= size?.width && size?.parentHeight >= size?.height) { |
|
|
|
|
|
if (size?.width && size?.height) { |
|
|
|
|
|
if (size?.height / size?.width < 0.55 || size?.height / size?.width > 0.57) { |
|
|
|
|
|
if (size?.width / 16 > size?.height / 9) { |
|
|
|
|
|
setSize({ ...size, width: (size?.height / 9) * 16, }) |
|
|
|
|
|
} else { |
|
|
|
|
|
setSize({ ...size, height: (size?.width / 16) * 9 }) |
|
|
|
|
|
} |
|
|
|
|
|
} |
|
|
|
|
|
} else if (size?.width) { |
|
|
|
|
|
setSize({ ...size, height: (size?.width / 16) * 9, }) |
|
|
|
|
|
} else if (size?.height) { |
|
|
|
|
|
setSize({ ...size, width: (size?.height / 9) * 16, }) |
|
|
|
|
|
} |
|
|
|
|
|
// } else { |
|
|
|
|
|
// setSize({ ...size, width: size?.parentWidth, height: size?.parentHeight }) |
|
|
|
|
|
// } |
|
|
|
|
|
} else { |
|
|
|
|
|
if (size && size?.width / 16 > size?.height / 9) { |
|
|
|
|
|
setSize({ ...size, height: size?.parentHeight }) |
|
|
|
|
|
} else { |
|
|
|
|
|
setSize({ ...size, width: size?.parentWidth, }) |
|
|
|
|
|
} |
|
|
|
|
|
} |
|
|
|
|
|
}, [size]) |
|
|
return ( |
|
|
return ( |
|
|
<> |
|
|
<> |
|
|
<div className="vcmp_videoplay" style={{ height: height ? height : '100%', width: width || '100%', overflow: 'hidden' }}> |
|
|
<div className="vcmp_videoplay" style={{ width: IsSize == 'true' ? size?.parentWidth : width || '100%', height: IsSize == 'true' ? size?.parentHeight : height || '100%', backgroundColor: 'black', overflow: 'hidden', display: 'flex', alignItems: 'center', justifyContent: 'center', }}> |
|
|
<div id="vcmp_videoplay" style={{ position: 'relative', display: 'flex', height: '100%', width: '100%' }}> |
|
|
<div id="vcmp_videoplay" style={{ position: 'relative', height: IsSize == 'true' ? size?.height : height || '100%', width: IsSize == 'true' ? size?.width : width || '100%', minWidth: 400, minHeight: 225, overflow: 'hidden' }}> |
|
|
{/* 顶部信息 */} |
|
|
{/* 顶部信息 */} |
|
|
<VideoHeader |
|
|
{<VideoHeader |
|
|
operationState={operationState} changeSelectState={changeSelectState} |
|
|
operationState={operationState} changeSelectState={changeSelectState} |
|
|
histroyTime={histroyTime} |
|
|
histroyTime={histroyTime} |
|
|
setoperationState={setoperationState} name={name} |
|
|
setoperationState={setoperationState} name={name} |
|
|
@ -323,48 +372,52 @@ const VideoPlay = ({ |
|
|
} |
|
|
} |
|
|
setProcessDisX={setProcessDisX} |
|
|
setProcessDisX={setProcessDisX} |
|
|
content={videoObj.content} |
|
|
content={videoObj.content} |
|
|
/> |
|
|
videoStyle={videoStyle} |
|
|
|
|
|
/>} |
|
|
{/* 视频内容 */} |
|
|
{/* 视频内容 */} |
|
|
{ |
|
|
|
|
|
videoObj.type == 'yingshi' ? |
|
|
{videoObj.type == 'yingshi' ? |
|
|
<iframe |
|
|
<iframe |
|
|
frameBorder="0" |
|
|
frameBorder="0" |
|
|
id={containerId} |
|
|
allowFullScreen='true' |
|
|
src={ |
|
|
id={containerId} |
|
|
`${yingshiUrl}?audio=${videoObj.audio && operationState && !operationState.histroy.select ? '1' : '0'}&url=${operationState && operationState.histroy.select && histroyBegain ? `${videoObj.replayUrl}?begin=${moment(histroyBegain).format("YYYYMMDDHHmmss")}&end=${moment(histroyTime[1]).format("YYYYMMDDHHmmss")}` : resolution == 'sd' ? videoObj.playUrlSd : videoObj.playUrlHd}&autoplay=${'1'}&accessToken=${videoObj.yingshiToken}` |
|
|
src={ |
|
|
} |
|
|
`${yingshiUrl}?audio=${videoObj.audio && operationState && !operationState.histroy.select ? '1' : '0'}&url=${operationState && operationState.histroy.select && histroyBegain ? `${videoObj.replayUrl}?begin=${moment(histroyBegain).format("YYYYMMDDHHmmss")}&end=${moment(histroyTime[1]).format("YYYYMMDDHHmmss")}` : resolution == 'sd' ? videoObj.playUrlSd : videoObj.playUrlHd}&autoplay=${'1'}&accessToken=${videoObj.yingshiToken}` |
|
|
// https://open.ys7.com/doc/zh/book/index/live_proto.html |
|
|
} |
|
|
// 单个播放器的长宽比例限制最小为{width: 400px;height: 300px;} |
|
|
// https://open.ys7.com/doc/zh/book/index/live_proto.html |
|
|
width={'100%'} |
|
|
// 单个播放器的长宽比例限制最小为{width: 400px;height: 300px;} |
|
|
height={'100%'} |
|
|
width={'100%'} |
|
|
allowFullScreen |
|
|
height={'100%'} |
|
|
wmode="transparent" |
|
|
wmode="transparent" |
|
|
style={{ pointerEvents: 'none' }} |
|
|
style={{ pointerEvents: 'none' }} |
|
|
/> : |
|
|
/> : |
|
|
<div |
|
|
<div |
|
|
id={containerId} |
|
|
id={containerId} |
|
|
style={{ |
|
|
style={{ |
|
|
height: '100%', width: '100%' |
|
|
height: '100%', width: '100%' |
|
|
}}> |
|
|
}}> |
|
|
|
|
|
</div> |
|
|
</div> |
|
|
|
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
{/* 下方操作栏 */} |
|
|
{/* 下方操作栏 */} |
|
|
<VideoOperation |
|
|
{/* 显示操作功能条件（宽高） */} |
|
|
operationState={operationState} operation={operation} |
|
|
{size?.parentWidth > 400 ? |
|
|
voiceDisY={voiceDisY} setVoiceDisY={setVoiceDisY} |
|
|
<VideoOperation |
|
|
processDisX={processDisX} setProcessDisX={setProcessDisX} |
|
|
operationState={operationState} operation={operation} |
|
|
isAdjustProcess={isAdjustProcess} setIsAdjustProcess={setIsAdjustProcess} |
|
|
voiceDisY={voiceDisY} setVoiceDisY={setVoiceDisY} |
|
|
resolution={resolution} setResolution={setResolution} |
|
|
processDisX={processDisX} setProcessDisX={setProcessDisX} |
|
|
histroyTime={histroyTime} setHistroyTime={setHistroyTime} |
|
|
isAdjustProcess={isAdjustProcess} setIsAdjustProcess={setIsAdjustProcess} |
|
|
histroyBegain={histroyBegain} |
|
|
resolution={resolution} setResolution={setResolution} |
|
|
play={play} pause={pause} closeSound={closeSound} openSound={openSound} |
|
|
histroyTime={histroyTime} setHistroyTime={setHistroyTime} |
|
|
isPlaying={isPlaying} |
|
|
histroyBegain={histroyBegain} |
|
|
videoObj={videoObj} |
|
|
play={play} pause={pause} closeSound={closeSound} openSound={openSound} |
|
|
setYingshiPrepare={setYingshiPrepare} |
|
|
isPlaying={isPlaying} |
|
|
yingshiPrepareRef={yingshiPrepareRef} |
|
|
videoObj={videoObj} |
|
|
/> |
|
|
setYingshiPrepare={setYingshiPrepare} |
|
|
|
|
|
yingshiPrepareRef={yingshiPrepareRef} |
|
|
|
|
|
slideDown={slideDown} |
|
|
|
|
|
/> : "" |
|
|
|
|
|
} |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
</div> |
|
|
</div> |
|
|
@ -374,6 +427,7 @@ const VideoPlay = ({ |
|
|
|
|
|
|
|
|
function mapStateToProps (state) { |
|
|
function mapStateToProps (state) { |
|
|
const { auth, global } = state; |
|
|
const { auth, global } = state; |
|
|
|
|
|
console.log(global); |
|
|
return { |
|
|
return { |
|
|
user: auth.user, |
|
|
user: auth.user, |
|
|
iotVideoServer: global.iotVideoServer, |
|
|
iotVideoServer: global.iotVideoServer, |
|
|
|
