|
|
|
@ -4,16 +4,19 @@ import screenfull from 'screenfull'; |
|
|
|
import moment from "moment"; |
|
|
|
import request from 'superagent' |
|
|
|
import { VideoServeApi, IotVideoServerRequest, checkAudioVideo } from '$utils' |
|
|
|
import { ToastFactory, } from '@douyinfe/semi-ui'; |
|
|
|
import { Button, ToastFactory, } from '@douyinfe/semi-ui'; |
|
|
|
import VideoHeader from './voiceHeader' |
|
|
|
import VideoOperation from './videoOperation' |
|
|
|
import './videoPlay.less'; |
|
|
|
import EZUIKit from 'ezuikit-js' |
|
|
|
import { done } from "nprogress"; |
|
|
|
|
|
|
|
const timeFormat = 'YYYY-MM-DD HH:mm:ss' |
|
|
|
const yingshiUrl = 'https://open.ys7.com/ezopen/h5/iframe' |
|
|
|
const yingshiCloseSoundKey = 'closeSound' |
|
|
|
const yingshiOpenSoundKey = 'openSound' |
|
|
|
|
|
|
|
|
|
|
|
const VideoPlay = ({ |
|
|
|
height, width, containerId = 'myPlayer', |
|
|
|
// playUrl, |
|
|
|
@ -26,32 +29,45 @@ const VideoPlay = ({ |
|
|
|
slideDown, //视频下方操作是否滑动 |
|
|
|
IsSize, //是否按照16:9的比例播放 |
|
|
|
// videoObj = { |
|
|
|
// type: 'yingshi', |
|
|
|
// audio: false, |
|
|
|
// serialNo: 'G75922040', // 设备序列号 必须 |
|
|
|
// channelNo: 1, // |
|
|
|
// yingshiToken: 'at.3j6eyqbn0g5xvcut73v0rzdu1nh0gnxx-4ua03m82o9-12u1t9g-rtzndpyds', // 萤石必须 |
|
|
|
// playUrlSd: 'ezopen://open.ys7.com/G75922040/1.live', // 必须 |
|
|
|
// // playUrl: 'ws://221.230.55.27:8081/jessica/34020000001110000077/34020000001310000003', |
|
|
|
// playUrlHd: 'ezopen://open.ys7.com/G75922040/1.hd.live', |
|
|
|
// // replayUrl: 'ezopen://open.ys7.com/G75922040/1.rec', |
|
|
|
// type: 'yingshi', |
|
|
|
// audio: false, |
|
|
|
// serialNo: 'G75922040', // 设备序列号 必须 |
|
|
|
// channelNo: 1, // |
|
|
|
// yingshiToken: 'at.6nn6duwz8g8gbd919as9a6ea82bmn31x-709fnp7s3k-13q3v7e-mlov7lysf', // 萤石必须 |
|
|
|
// playUrlSd: 'ezopen://open.ys7.com/G75922040/1.live', // 必须 |
|
|
|
// // playUrl: 'ws://221.230.55.27:8081/jessica/34020000001110000077/34020000001310000003', |
|
|
|
// playUrlHd: 'ezopen://open.ys7.com/G75922040/1.hd.live', |
|
|
|
// replayUrl: 'ezopen://open.ys7.com/G75922040/1.hd.local.rec', |
|
|
|
// }, |
|
|
|
// videoObj = { |
|
|
|
// type: 'yingshi', |
|
|
|
// audio: false, |
|
|
|
// serialNo: 'G56385051', // 设备序列号 必须 |
|
|
|
// channelNo: 1, // |
|
|
|
// yingshiToken: 'at.6nn6duwz8g8gbd919as9a6ea82bmn31x-709fnp7s3k-13q3v7e-mlov7lysf', // 萤石必须 |
|
|
|
// playUrlSd: 'ezopen://open.ys7.com/G56384814/1.live', // 必须 |
|
|
|
// // playUrl: 'ws://221.230.55.27:8081/jessica/34020000001110000077/34020000001310000003', |
|
|
|
// playUrlHd: 'ezopen://open.ys7.com/G56384814/1.hd.live', |
|
|
|
// replayUrl: 'ezopen://open.ys7.com/G56384814/1.hd.local.rec', |
|
|
|
// }, |
|
|
|
|
|
|
|
// videoObj = { |
|
|
|
// type: 'cascade', |
|
|
|
// audio: false, |
|
|
|
// serialNo: '34020000001310000001', // 设备序列号 必须 |
|
|
|
// topSerialNo: '34020000001110000077', // 设备顶级序列号 必须 |
|
|
|
// playUrlSd: 'ws://221.230.55.27:8081/jessica/34020000001110000077/34020000001310000001', // 必须 |
|
|
|
// // playUrlHd: 'ezopen://open.ys7.com/G75922040/1.hd.live', |
|
|
|
// // replayUrl: 'ezopen://open.ys7.com/G75922040/1.rec', |
|
|
|
// type: 'cascade', |
|
|
|
// audio: false, |
|
|
|
// serialNo: '34020000001310000001', // 设备序列号 必须 |
|
|
|
// topSerialNo: '34020000001110000077', // 设备顶级序列号 必须 |
|
|
|
// playUrlSd: 'ws://221.230.55.27:8081/jessica/34020000001110000077/34020000001310000001', // 必须 |
|
|
|
// // playUrlHd: 'ezopen://open.ys7.com/G75922040/1.hd.live', |
|
|
|
// // replayUrl: 'ezopen://open.ys7.com/G75922040/1.rec', |
|
|
|
// }, |
|
|
|
|
|
|
|
// |
|
|
|
iotVideoServer, |
|
|
|
local, //是否本地调用视频 |
|
|
|
}) => { |
|
|
|
console.log(sizeWh); |
|
|
|
const [jessibuca, setjessibuca] = useState(null) |
|
|
|
const [player, setPlayer] = useState(null) |
|
|
|
const [isPlaying, setIsPlaying] = useState(false) |
|
|
|
const [operationState, setoperationState] = useState() |
|
|
|
const [voiceDisY, setVoiceDisY] = useState(0) |
|
|
|
@ -60,22 +76,27 @@ const VideoPlay = ({ |
|
|
|
const [histroyTime, setHistroyTime] = useState([]) |
|
|
|
const [histroyBegain, setHistroyBegain] = useState() |
|
|
|
const [roll, setRoll] = useState()//滚动备注 |
|
|
|
const [size, setSize] = useState(sizeWh) //视频本身和父级尺寸 |
|
|
|
const [photo, setPhoto] = useState(1)//滚动备注 |
|
|
|
const [size, setSize] = useState({ parentWidth: sizeWh?.parentWidth, parentHeight: sizeWh?.parentHeight, width: width || sizeWh?.parentWidth, height: height || sizeWh?.parentHeight }) //视频本身和父级尺寸 |
|
|
|
const [resolution, setResolution] = useState('sd') // 标清 sd 高清 hd |
|
|
|
// const [frequency, setFrequency] = useState(true) |
|
|
|
const [videoMask, setVideoMask] = useState(true) // 标清 sd 高清 hd |
|
|
|
|
|
|
|
|
|
|
|
// 标记萤石操作中，等待ifream返回信息后清空 |
|
|
|
const [yingshiPrepare, setYingshiPrepare] = useState('') |
|
|
|
|
|
|
|
const operationRef = useRef(null) |
|
|
|
const Begain = useRef() |
|
|
|
const playBackTime = useRef([]) |
|
|
|
const quanp = useRef() |
|
|
|
const processChangeTimeoutRef = useRef(null) |
|
|
|
// 标记萤石操作中，等待ifream返回信息后清空 |
|
|
|
const yingshiPrepareRef = useRef(null) |
|
|
|
const playState = useRef(false) //播放状态 |
|
|
|
|
|
|
|
useEffect(() => { |
|
|
|
setRoll(false) |
|
|
|
}, [resolution]); |
|
|
|
}, [resolution,]); |
|
|
|
|
|
|
|
|
|
|
|
useEffect(() => { |
|
|
|
@ -83,14 +104,15 @@ const VideoPlay = ({ |
|
|
|
}, [changeData?.hdChecked]) |
|
|
|
|
|
|
|
const changeSelectState = (key) => { |
|
|
|
if (videoObj.type == 'yingshi' && yingshiPrepareRef.current) { |
|
|
|
return |
|
|
|
} |
|
|
|
// if (videoObj.type == 'yingshi' && yingshiPrepareRef.current) { |
|
|
|
// return |
|
|
|
// } |
|
|
|
const nextOperationState = JSON.parse(JSON.stringify(operationRef.current)) |
|
|
|
if (key == 'histroy' && nextOperationState.histroy.select) { |
|
|
|
// 取消历史播放 |
|
|
|
setProcessDisX(0) |
|
|
|
setHistroyTime([]) |
|
|
|
playBackTime.current = [] |
|
|
|
} |
|
|
|
|
|
|
|
for (let k in nextOperationState) { |
|
|
|
@ -104,6 +126,7 @@ const VideoPlay = ({ |
|
|
|
|
|
|
|
if (operationRef.current.histroy.select && histroyTime.length == 0) { |
|
|
|
setHistroyTime([moment().subtract(72, 'hours').format(timeFormat), moment().format(timeFormat)]) |
|
|
|
playBackTime.current = [moment().subtract(72, 'hours').format(timeFormat), moment().format(timeFormat)] |
|
|
|
} |
|
|
|
setoperationState(nextOperationState) |
|
|
|
} |
|
|
|
@ -124,14 +147,20 @@ const VideoPlay = ({ |
|
|
|
}, { |
|
|
|
key: 'fullScreen', |
|
|
|
click: () => { |
|
|
|
if (yingshiPrepareRef.current) { |
|
|
|
return |
|
|
|
} |
|
|
|
changeSelectState('fullScreen') |
|
|
|
let player = document.getElementById('vcmp_videoplay') |
|
|
|
console.log(player); |
|
|
|
let videoplay = document.getElementById('vcmp_videoplay') |
|
|
|
if (screenfull.isEnabled) { |
|
|
|
screenfull.toggle(player); |
|
|
|
screenfull.toggle(videoplay); |
|
|
|
if (videoObj?.type == 'yingshi') { |
|
|
|
console.log(operationRef.current); |
|
|
|
if (operationRef.current?.fullScreen.select) { |
|
|
|
player.reSize(screen.width, screen.height); |
|
|
|
} else { |
|
|
|
player.reSize(size?.width, size?.height); |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
} |
|
|
|
} |
|
|
|
}, { |
|
|
|
@ -139,18 +168,21 @@ const VideoPlay = ({ |
|
|
|
hide: !Boolean(videoObj.replayUrl), |
|
|
|
click: () => { |
|
|
|
changeSelectState('histroy') |
|
|
|
yingshiPrepareRef.current = 'play' |
|
|
|
setYingshiPrepare('play') |
|
|
|
player.stop().then(() => { |
|
|
|
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")}` }) |
|
|
|
} |
|
|
|
playState.current = false |
|
|
|
}) |
|
|
|
} |
|
|
|
},] |
|
|
|
|
|
|
|
// useEffect(() => { |
|
|
|
// createPlay() |
|
|
|
// }, [quanp.current]) |
|
|
|
|
|
|
|
useEffect(() => { |
|
|
|
if (videoObj.type == 'yingshi') { |
|
|
|
yingshiPrepareRef.current = 'play' |
|
|
|
setYingshiPrepare('play') |
|
|
|
} else { |
|
|
|
createJessibuca() |
|
|
|
} |
|
|
|
createPlay() |
|
|
|
let nextOperationState = {} |
|
|
|
for (let p of operation) { |
|
|
|
nextOperationState[p.key] = { |
|
|
|
@ -169,46 +201,40 @@ const VideoPlay = ({ |
|
|
|
changeSelectState('fullScreen') |
|
|
|
} |
|
|
|
}); |
|
|
|
|
|
|
|
// 萤石 ifream 信息监听 |
|
|
|
const listenYingshiMessage = async (e) => { |
|
|
|
const { data, origin } = e |
|
|
|
if (origin !== 'https://open.ys7.com') return |
|
|
|
if (data.type == "handleSuccess") { |
|
|
|
setRoll(true) |
|
|
|
if (yingshiPrepareRef.current == 'play') { |
|
|
|
setIsPlaying(true) |
|
|
|
} |
|
|
|
} else if (data.type == yingshiOpenSoundKey && data.code == 0) { |
|
|
|
if (yingshiPrepareRef.current == yingshiOpenSoundKey) { |
|
|
|
setVoiceDisY(30) |
|
|
|
} |
|
|
|
} if (data.type == yingshiCloseSoundKey && data.code == 0) { |
|
|
|
if (yingshiPrepareRef.current == yingshiCloseSoundKey) { |
|
|
|
setVoiceDisY(0) |
|
|
|
} |
|
|
|
} |
|
|
|
yingshiPrepareRef.current = null |
|
|
|
setYingshiPrepare(null) |
|
|
|
} |
|
|
|
if (videoObj.type == 'yingshi') { |
|
|
|
window.addEventListener('message', listenYingshiMessage); |
|
|
|
} |
|
|
|
// const resize_ = () => { |
|
|
|
// const VideoLocal = document.getElementById('vcmp_videoplay') |
|
|
|
// setSize({ parentWidth: VideoLocal?.clientWidth, parentHeight: VideoLocal?.clientHeight, width: VideoLocal?.clientWidth, height: VideoLocal?.clientHeight }) |
|
|
|
|
|
|
|
// } |
|
|
|
// if (local) { |
|
|
|
// window.addEventListener('resize', resize_); //只要窗口殴大小发生像素变化就会触发 |
|
|
|
// } |
|
|
|
return () => { |
|
|
|
window.removeEventListener('message', listenYingshiMessage); |
|
|
|
if (jessibuca) { |
|
|
|
jessibuca.destroy() |
|
|
|
} |
|
|
|
if (player && videoObj.type == 'yingshi' && player) { |
|
|
|
console.log(11111111111); |
|
|
|
player.stop() |
|
|
|
} |
|
|
|
// if (local) { |
|
|
|
// window.removeEventListener('resize', resize_); |
|
|
|
// } |
|
|
|
} |
|
|
|
}, []) |
|
|
|
|
|
|
|
useEffect(() => { |
|
|
|
if (histroyTime.length) { |
|
|
|
setHistroyBegain(histroyTime[0]) |
|
|
|
Begain.current = histroyTime[0] |
|
|
|
document.getElementById('process_point').style.left = 0 + 'px'; // 重置进度条的位置 |
|
|
|
if (videoObj.type == 'yingshi') { |
|
|
|
yingshiPrepareRef.current = 'play' |
|
|
|
setYingshiPrepare('play') |
|
|
|
// yingshiPrepareRef.current = 'play' |
|
|
|
// setYingshiPrepare('play') |
|
|
|
} |
|
|
|
} else { |
|
|
|
setHistroyBegain(null) |
|
|
|
Begain.current == null |
|
|
|
} |
|
|
|
}, [histroyTime]) |
|
|
|
useEffect(() => { |
|
|
|
@ -227,19 +253,32 @@ const VideoPlay = ({ |
|
|
|
) |
|
|
|
.format(timeFormat) |
|
|
|
) |
|
|
|
Begain.current = moment(histroyTime[0]) |
|
|
|
.add( |
|
|
|
Math.abs(moment(histroyTime[0]).diff(moment(histroyTime[1]), 'seconds')) * (processDisX / document.getElementById('process_point').parentElement.offsetWidth), |
|
|
|
'second' |
|
|
|
) |
|
|
|
.format(timeFormat) |
|
|
|
if (videoObj.type == 'yingshi') { |
|
|
|
yingshiPrepareRef.current = 'play' |
|
|
|
setYingshiPrepare('play') |
|
|
|
// yingshiPrepareRef.current = 'play' |
|
|
|
// setYingshiPrepare('play') |
|
|
|
} |
|
|
|
}, 300) |
|
|
|
|
|
|
|
player.stop().then(() => { |
|
|
|
player.play({ url: `${videoObj.replayUrl}?begin=${moment(Begain.current).format("YYYYMMDDHHmmss")}&end=${moment(playBackTime.current[1]).format("YYYYMMDDHHmmss")}` }) |
|
|
|
playState.current = false |
|
|
|
}) |
|
|
|
} else { |
|
|
|
// 随播放时间变化更新进度条 |
|
|
|
document.getElementById('process_point').style.left = processDisX - 4.5 + 'px' |
|
|
|
} |
|
|
|
|
|
|
|
} |
|
|
|
}, [processDisX]) |
|
|
|
|
|
|
|
const createJessibuca = async () => { |
|
|
|
const createPlay = async () => { |
|
|
|
console.log(size); |
|
|
|
if (videoObj.type != 'yingshi') { |
|
|
|
try { |
|
|
|
// const inviteRes = await IotVideoServerRequest.get(VideoServeApi.invite, { |
|
|
|
@ -247,11 +286,11 @@ const VideoPlay = ({ |
|
|
|
// channel: '36011200581314002900' |
|
|
|
// }).then(res => { |
|
|
|
// console.log(res); |
|
|
|
// }, err => { |
|
|
|
// }, err => {. |
|
|
|
// console.log(err); |
|
|
|
// }) |
|
|
|
|
|
|
|
const inviteRes_ = await request.get(`${iotVideoServer}/api/gb28181/invite?id=${videoObj.topSerialNo}&channel=${videoObj.serialNo}`) |
|
|
|
const inviteRes_ = await request.get(`${iotVideoServer}/api/gb28181/invite?id=${videoObj.topSerialNo}&channel=${videoObj.serialNo}`) |
|
|
|
} catch (error) { |
|
|
|
console.log(error.response); |
|
|
|
} |
|
|
|
@ -277,17 +316,29 @@ const VideoPlay = ({ |
|
|
|
}); |
|
|
|
setjessibuca(jessibuca) |
|
|
|
play({ jessibuca }) |
|
|
|
} else { |
|
|
|
const player = new EZUIKit.EZUIKitPlayer({ |
|
|
|
id: containerId, // 视频容器ID |
|
|
|
accessToken: videoObj?.yingshiToken, |
|
|
|
url: videoObj.playUrlSd, |
|
|
|
width: size?.width, |
|
|
|
height: size?.height, |
|
|
|
handleSuccess: () => { //播放成功 |
|
|
|
setRoll(true) |
|
|
|
setVideoMask(false) |
|
|
|
playState.current = true |
|
|
|
}, |
|
|
|
handleError: (e) => { //播放失败 |
|
|
|
console.log(e, '播放失败'); |
|
|
|
}, |
|
|
|
}) |
|
|
|
setPlayer(player) |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
const yingshiOperation = (operation) => { |
|
|
|
document.getElementById(containerId).contentWindow.postMessage(operation, yingshiUrl) |
|
|
|
// setIsPlaying(operation == 'play') |
|
|
|
} |
|
|
|
|
|
|
|
const play = (params) => { |
|
|
|
if (videoObj.type == 'yingshi') { |
|
|
|
yingshiOperation('play') |
|
|
|
|
|
|
|
} else if ((params.jessibuca || jessibuca) && videoObj.playUrlSd) { |
|
|
|
const jes = params.jessibuca || jessibuca |
|
|
|
jes.play(videoObj.playUrlSd); |
|
|
|
@ -296,8 +347,8 @@ const VideoPlay = ({ |
|
|
|
} |
|
|
|
|
|
|
|
const pause = () => { |
|
|
|
if (videoObj.type == 'yingshi') { |
|
|
|
// yingshiOperation('stop') |
|
|
|
if (videoObj.type == 'yingshi' && player) { |
|
|
|
5 |
|
|
|
} else if (jessibuca) { |
|
|
|
jessibuca.pause(); |
|
|
|
setIsPlaying(false) |
|
|
|
@ -308,7 +359,7 @@ const VideoPlay = ({ |
|
|
|
if (videoObj.type == 'yingshi') { |
|
|
|
yingshiPrepareRef.current = yingshiCloseSoundKey |
|
|
|
setYingshiPrepare(yingshiCloseSoundKey) |
|
|
|
yingshiOperation(yingshiCloseSoundKey) |
|
|
|
// yingshiOperation(yingshiCloseSoundKey) |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
@ -316,92 +367,94 @@ const VideoPlay = ({ |
|
|
|
if (videoObj.type == 'yingshi') { |
|
|
|
yingshiPrepareRef.current = yingshiOpenSoundKey |
|
|
|
setYingshiPrepare(yingshiOpenSoundKey) |
|
|
|
yingshiOperation(yingshiOpenSoundKey) |
|
|
|
// yingshiOperation(yingshiOpenSoundKey) |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
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, }) |
|
|
|
if (!operationRef.current?.fullScreen.select) { |
|
|
|
setSize({ parentWidth: sizeWh?.parentWidth, parentHeight: sizeWh?.parentHeight, width: width || sizeWh?.parentWidth, height: height || sizeWh?.parentHeight }) |
|
|
|
if (videoObj.type == 'yingshi' && player && IsSize == !'true') { |
|
|
|
console.log(11111111111); |
|
|
|
player.stop().then(() => { |
|
|
|
player.play().then(() => { |
|
|
|
player.reSize(width || sizeWh?.parentWidth, height || sizeWh?.parentHeight) |
|
|
|
}) |
|
|
|
|
|
|
|
}) |
|
|
|
|
|
|
|
} |
|
|
|
} |
|
|
|
}, [size]) |
|
|
|
}, [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: 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', height: IsSize == 'true' ? size?.height : height || '100%', width: IsSize == 'true' ? size?.width : width || '100%', minWidth: 400, minHeight: 225, 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" style={{ position: 'relative', height: size?.height || '100%', width: size?.width || '100%', minWidth: 240, minHeight: 135, overflow: 'hidden' }}> |
|
|
|
{/* 顶部信息 */} |
|
|
|
{<VideoHeader |
|
|
|
{size?.parentWidth > 320 ? <VideoHeader |
|
|
|
operationState={operationState} changeSelectState={changeSelectState} |
|
|
|
histroyTime={histroyTime} |
|
|
|
setoperationState={setoperationState} name={name} |
|
|
|
roll={roll} |
|
|
|
showTime={ |
|
|
|
videoObj.type == 'yingshi' && yingshiPrepare == 'play' ? |
|
|
|
null : (histroyBegain || moment()) |
|
|
|
} |
|
|
|
videoObj={videoObj} |
|
|
|
showTime={histroyBegain || moment()} |
|
|
|
setProcessDisX={setProcessDisX} |
|
|
|
content={videoObj.content} |
|
|
|
videoStyle={videoStyle} |
|
|
|
/>} |
|
|
|
player={player} |
|
|
|
resolution={resolution} |
|
|
|
playState={playState.current} |
|
|
|
/> : ""} |
|
|
|
{/* 视频内容 */} |
|
|
|
|
|
|
|
{videoObj.type == 'yingshi' ? |
|
|
|
<iframe |
|
|
|
frameBorder="0" |
|
|
|
allowFullScreen='true' |
|
|
|
id={containerId} |
|
|
|
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;} |
|
|
|
width={'100%'} |
|
|
|
height={'100%'} |
|
|
|
wmode="transparent" |
|
|
|
style={{ pointerEvents: 'none' }} |
|
|
|
/> : |
|
|
|
<div |
|
|
|
id={containerId} |
|
|
|
style={{ |
|
|
|
height: '100%', width: '100%' |
|
|
|
}}> |
|
|
|
</div> |
|
|
|
{ |
|
|
|
// <iframe |
|
|
|
// frameBorder="0" |
|
|
|
// allowFullScreen='true' |
|
|
|
// id={containerId} |
|
|
|
// 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;} |
|
|
|
// width={'100%'} |
|
|
|
// height={'100%'} |
|
|
|
// wmode="transparent" |
|
|
|
// style={{ pointerEvents: 'none' }} |
|
|
|
// /> |
|
|
|
} |
|
|
|
<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: 'red' }}>hhktyjr6tyr5</div> : ''} |
|
|
|
|
|
|
|
|
|
|
|
{/* 下方操作栏 */} |
|
|
|
{/* 显示操作功能条件（宽高） */} |
|
|
|
{size?.parentWidth > 400 ? |
|
|
|
{size?.parentWidth > 320 ? |
|
|
|
<VideoOperation |
|
|
|
operationState={operationState} operation={operation} |
|
|
|
voiceDisY={voiceDisY} setVoiceDisY={setVoiceDisY} |
|
|
|
@ -416,6 +469,9 @@ const VideoPlay = ({ |
|
|
|
setYingshiPrepare={setYingshiPrepare} |
|
|
|
yingshiPrepareRef={yingshiPrepareRef} |
|
|
|
slideDown={slideDown} |
|
|
|
setPlayer={setPlayer} |
|
|
|
player={player} |
|
|
|
playState={playState.current} |
|
|
|
/> : "" |
|
|
|
} |
|
|
|
</div> |
|
|
|
|
