|
|
@ -10,23 +10,42 @@ const VideoPlay = ({ height, width }) => { |
|
|
|
const [playUrl, setPlayUrl] = useState('http://flv.bdplay.nodemedia.cn/live/bbb.flv') |
|
|
|
const [isPlaying, setIsPlaying] = useState(false) |
|
|
|
const [operationState, setoperationState] = useState() |
|
|
|
|
|
|
|
const changeSelectState = (key) => { |
|
|
|
const nextOperationState = JSON.parse(JSON.stringify(operationState)) |
|
|
|
for (let k in nextOperationState) { |
|
|
|
if (k == key) { |
|
|
|
nextOperationState[k].select = !nextOperationState[k].select |
|
|
|
} else if (key !== 'fullScreen') { |
|
|
|
nextOperationState[k].select = false |
|
|
|
} |
|
|
|
} |
|
|
|
return nextOperationState |
|
|
|
} |
|
|
|
|
|
|
|
const operation = [{ |
|
|
|
key: 'control', |
|
|
|
click: () => { |
|
|
|
console.log(object); |
|
|
|
const nextOperationState = JSON.parse(JSON.stringify(operationState)) |
|
|
|
nextOperationState['control'].select = !nextOperationState['control'].select |
|
|
|
let nextOperationState = changeSelectState('control') |
|
|
|
setoperationState(nextOperationState) |
|
|
|
} |
|
|
|
}, { |
|
|
|
key: 'talk', |
|
|
|
click: () => { console.log(121212); } |
|
|
|
click: () => { |
|
|
|
let nextOperationState = changeSelectState('talk') |
|
|
|
setoperationState(nextOperationState) |
|
|
|
} |
|
|
|
}, { |
|
|
|
key: 'fullScreen', |
|
|
|
click: () => { console.log(121212); } |
|
|
|
click: () => { |
|
|
|
let nextOperationState = changeSelectState('fullScreen') |
|
|
|
setoperationState(nextOperationState) |
|
|
|
} |
|
|
|
}, { |
|
|
|
key: 'histroy', |
|
|
|
click: () => { console.log(121212); } |
|
|
|
click: () => { |
|
|
|
|
|
|
|
} |
|
|
|
},] |
|
|
|
useEffect(() => { |
|
|
|
create() |
|
|
@ -88,7 +107,8 @@ const VideoPlay = ({ height, width }) => { |
|
|
|
<> |
|
|
|
<div style={{ height: height || '100%', width: width || '100%' }}> |
|
|
|
|
|
|
|
<div style={{ position: 'relative', }}> |
|
|
|
<div style={{ position: 'relative', display: 'flex' }}> |
|
|
|
{/* 顶部信息 */} |
|
|
|
<div style={{ |
|
|
|
height: 42, lineHeight: '42px', background: '#00000026', |
|
|
|
position: 'absolute', width: '100%', zIndex: 99, |
|
|
@ -108,7 +128,73 @@ const VideoPlay = ({ height, width }) => { |
|
|
|
</Col> |
|
|
|
</Row> |
|
|
|
</div> |
|
|
|
{/* 视频内容 */} |
|
|
|
<div id="container" style={{ height: height || '100%', width: width || '100%' }}></div> |
|
|
|
{/* 云控 对讲 对应操作内容 */} |
|
|
|
{ |
|
|
|
operationState ? |
|
|
|
operationState.control.select ? |
|
|
|
<div style={{ |
|
|
|
position: 'absolute', top: 'calc(50% - 105px)', left: 'calc(50% - 125px)', |
|
|
|
width: 210, height: 250, backgroundColor: '#00000014', borderRadius: 68 |
|
|
|
}}> |
|
|
|
<div style={{ |
|
|
|
height: 148, width: 148, borderRadius: '100%', backgroundColor: '#2F53EA72', margin: '12px auto 18px', |
|
|
|
position: 'relative', |
|
|
|
}}> |
|
|
|
{ |
|
|
|
[{ |
|
|
|
style: { top: 12, left: (148 - 24) / 2, } |
|
|
|
}, { |
|
|
|
style: { right: 12, top: (148 - 24) / 2, } |
|
|
|
}, { |
|
|
|
style: { bottom: 12, left: (148 - 24) / 2, } |
|
|
|
}, { |
|
|
|
style: { left: 12, top: (148 - 24) / 2, } |
|
|
|
}].map((s, i) => { |
|
|
|
return ( |
|
|
|
<img |
|
|
|
src="/assets/images/background/up.png" |
|
|
|
style={Object.assign({ |
|
|
|
height: 24, width: 24, display: 'inline-block', transform: `rotate(${i * 90}deg)`, |
|
|
|
position: 'absolute' |
|
|
|
}, s.style)} |
|
|
|
/> |
|
|
|
) |
|
|
|
}) |
|
|
|
} |
|
|
|
<div style={{ |
|
|
|
height: 32, width: 32, border: '2px solid #ffffff24', borderRadius: '100%', |
|
|
|
position: 'absolute', top: (148 - 34) / 2, left: (148 - 34) / 2 |
|
|
|
}} /> |
|
|
|
</div> |
|
|
|
{ |
|
|
|
[ |
|
|
|
[{ n: '+' }, { n: '焦距' }, { n: '-' }], |
|
|
|
[{ n: '+' }, { n: '缩放' }, { n: '-' }] |
|
|
|
].map(s => { |
|
|
|
return ( |
|
|
|
<div style={{ |
|
|
|
width: 110, height: 22, margin: '0 auto 6px', display: 'flex', alignContent: 'center', justifyContent: 'space-around', |
|
|
|
backgroundColor: '#2F53EA72', color: '#fff' |
|
|
|
}}> |
|
|
|
{ |
|
|
|
s.map((m, mi) => { |
|
|
|
return ( |
|
|
|
<div style={{ textAlign: 'center', display: 'inline-block', cursor: mi != 1 ? 'pointer' : 'auto' }}>{m.n}</div> |
|
|
|
) |
|
|
|
}) |
|
|
|
} |
|
|
|
</div> |
|
|
|
) |
|
|
|
}) |
|
|
|
} |
|
|
|
</div> : |
|
|
|
operationState.talk.select ? |
|
|
|
'2' : |
|
|
|
'' : '' |
|
|
|
} |
|
|
|
{/* 下方操作 */} |
|
|
|
<div style={{ |
|
|
|
height: 42, lineHeight: '42px', background: 'linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.8) 100%)', padding: '0 12px', |
|
|
|
display: 'flex', justifyContent: 'space-between', |
|
|
@ -122,6 +208,7 @@ const VideoPlay = ({ height, width }) => { |
|
|
|
src={`/assets/images/background/video-icon-${p.key}-${operationState[p.key].select ? 'select' : 'unselect'}.png`} |
|
|
|
height={26} |
|
|
|
style={{ marginRight: 24 }} |
|
|
|
onClick={p.click} |
|
|
|
/> |
|
|
|
}) : '' |
|
|
|
} |
|
|
|