7.12 视频播放
This commit is contained in:
jl-zhoujl2
@ -43,6 +43,11 @@ export default [
|
||||
// path: '/Calendar',
|
||||
// component: './MainPage/ProjectManager/components/CalendarForm',
|
||||
// },
|
||||
//视频播放-视频播放列表（暂时用）
|
||||
{
|
||||
path: '/ElecEvaluation/Monitor/videoplay',
|
||||
component: './ElecEvaluation/Monitor/RoomDetail/videoplay',
|
||||
},
|
||||
//富文本组件
|
||||
// {
|
||||
// path: '/editor',
|
||||
|
||||
226
src/pages/ElecEvaluation/Monitor/RoomDetail/videoplay.tsx
Normal file
226
src/pages/ElecEvaluation/Monitor/RoomDetail/videoplay.tsx
Normal file
@ -0,0 +1,226 @@
|
||||
import React, { useEffect, useRef, useState } from "react";
|
||||
import { List, Spin, Typography } from "antd";
|
||||
import '../../../Evaluation/BiddingDocumentsDecrypt/index.less';
|
||||
import styles from '../../../Evaluation/BiddingDocumentsDecrypt/index.less';
|
||||
import logo from '@/images/opening/logo.svg';
|
||||
import ProCard from "@ant-design/pro-card";
|
||||
import { PlayCircleOutlined } from "@ant-design/icons";
|
||||
import Player from './js/player';
|
||||
import JTimeLine from "./js/JtimeLine";
|
||||
import moment from "moment";
|
||||
import request from '@/utils/request';
|
||||
|
||||
export async function getList() {
|
||||
return request('/api/biz-service-ebtp-evaluation/v1/bizvidouploadtask/list', {
|
||||
method: 'GET',
|
||||
});
|
||||
} export async function getUrl(data: any) {
|
||||
return request('/api/biz-service-ebtp-evaluation/v1/eval/room/jovision/taskGetRecordPlayback', {
|
||||
method: 'POST',
|
||||
data: { ...data },
|
||||
});
|
||||
}
|
||||
|
||||
|
||||
const viewOfTenderDocuments: React.FC<{}> = () => {
|
||||
const [list, setList] = useState<any[]>([]);
|
||||
//播放器ref
|
||||
const playerRefList = useRef<any[]>([]);
|
||||
//回播组件
|
||||
const jTimeLineRef = useRef<any>();
|
||||
//定时时间
|
||||
const timerMsRef = useRef<any>(1000);
|
||||
//回放进度条长度
|
||||
const [recordWidthRef, setRecordWidthRef] = useState<any>(1000);
|
||||
//进度条大小
|
||||
const currentScaleRef = useRef<any>(0);
|
||||
//倍速
|
||||
const [speed, setSpeed] = useState<any>(1);
|
||||
//倍速序号
|
||||
const speedindexRef = useRef<any>(0);
|
||||
//回放定时器
|
||||
const timeLineTimerRef = useRef<any>(null);
|
||||
const fullscreen = () => {
|
||||
playerRefList.current[0].fullscreen();
|
||||
}
|
||||
const mathchDot = (currentScale: any) => {
|
||||
var position = 0;
|
||||
switch (currentScale) {
|
||||
case 0:
|
||||
(position = 0), jTimeLineRef.current.changeSize(0);
|
||||
break;
|
||||
case 1:
|
||||
(position = 30), jTimeLineRef.current.changeSize(1);
|
||||
break;
|
||||
case 2:
|
||||
(position = 60), jTimeLineRef.current.changeSize(2);
|
||||
break;
|
||||
case 3:
|
||||
(position = 100), jTimeLineRef.current.changeSize(3);
|
||||
}
|
||||
document.getElementsByClassName("dot-container-dot")[0].style.left = position + "%";
|
||||
}
|
||||
const onReduce = () => {
|
||||
currentScaleRef.current > 0 && (--currentScaleRef.current, mathchDot(currentScaleRef.current));
|
||||
}
|
||||
const onAdd = () => {
|
||||
currentScaleRef.current < 3 && (++currentScaleRef.current, mathchDot(currentScaleRef.current));
|
||||
}
|
||||
const changeTimer = () => {
|
||||
if (timeLineTimerRef.current) {
|
||||
clearInterval(timeLineTimerRef.current);
|
||||
}
|
||||
|
||||
timeLineTimerRef.current = setInterval(() => {
|
||||
jTimeLineRef.current.run({ time: parseInt(playerRefList.current[0].getCurTimestamp()) });
|
||||
}, timerMsRef.current);
|
||||
}
|
||||
const setSpeedFun = () => {
|
||||
if (playerRefList.current[0].getState() == 2) return;
|
||||
const arr = ["1", "2", "4", "8", "4", "2", "1", "1/2", "1/4", "1/8", "1/4", "1/2"];
|
||||
const arr2 = [1, 2, 4, 8, 4, 2, 1, 0.5, 0.25, 0.125, 0.25, 0.5];
|
||||
speedindexRef.current++;
|
||||
if (speedindexRef.current == 12) {
|
||||
speedindexRef.current = 0;
|
||||
}
|
||||
setSpeed(arr[speedindexRef.current]);
|
||||
|
||||
playerRefList.current[0].setSpeed(arr2[speedindexRef.current] + "");
|
||||
timerMsRef.current = 1000 / arr2[speedindexRef.current];
|
||||
changeTimer();
|
||||
}
|
||||
const handleTimeChange = (nowTime: any) => {
|
||||
playerRefList.current[0].seekTo(nowTime);
|
||||
}
|
||||
const infoPlayer = () => {
|
||||
for (var i = 0; i < 1; i++) {
|
||||
playerRefList.current[i] = new Player(document.getElementById("container" + i), null);
|
||||
}
|
||||
}
|
||||
const jTimeLinePlayer = () => {
|
||||
|
||||
var container = document.getElementById("container0");
|
||||
setRecordWidthRef(container?.clientWidth);
|
||||
|
||||
//初始化回播组件
|
||||
jTimeLineRef.current = new JTimeLine();
|
||||
jTimeLineRef.current.init({
|
||||
id: "canvas",
|
||||
onChange: handleTimeChange,
|
||||
});
|
||||
|
||||
jTimeLineRef.current.run({ time: parseInt(playerRefList.current[0].getCurTimestamp()) });
|
||||
changeTimer();
|
||||
}
|
||||
//播放
|
||||
const toplayer = (url: any, endtime: any, player: any) => {
|
||||
console.log("playerRef.current.getState() :" + player.getState())
|
||||
if (player.getState() != 0) {
|
||||
player.stop();
|
||||
player.talkDestroy();
|
||||
}
|
||||
let options = {
|
||||
url: url,
|
||||
endtime: endtime,
|
||||
isStream: true,
|
||||
encrypted_key: "",
|
||||
encrypted_iv: "",
|
||||
encrypted_type: ""
|
||||
};
|
||||
setTimeout(() => {
|
||||
player.play(options);
|
||||
setTimeout(() => {
|
||||
jTimeLinePlayer();
|
||||
}, 1000);
|
||||
}, 1000);
|
||||
|
||||
}
|
||||
const onGetLiveStream = ({ taskId, createTime }: any) => {
|
||||
var i = 0;
|
||||
playerRefList.current.forEach((element) => {
|
||||
getUrl({ taskId, "protocol": "ws" }).then(res => {
|
||||
toplayer(res.data.url, moment(createTime).format('yyyyMMDDHHmmss'), element);
|
||||
})
|
||||
i++;
|
||||
});
|
||||
}
|
||||
useEffect(() => {
|
||||
if (timeLineTimerRef.current) {
|
||||
clearInterval(timeLineTimerRef.current);
|
||||
}
|
||||
//初始化播放器
|
||||
infoPlayer();
|
||||
getList().then(res => {
|
||||
setList(res.data);
|
||||
});
|
||||
return () => {
|
||||
clearInterval(timeLineTimerRef.current);
|
||||
}
|
||||
}, [])
|
||||
|
||||
|
||||
|
||||
return (
|
||||
<div>
|
||||
<div className={styles.headerView}>
|
||||
<div className={styles.headerAlignView}
|
||||
style={{ position: "absolute", left: "0", fontSize: "16px", fontWeight: 600, top: '15px' }}>
|
||||
<img src={logo} style={{ height: "30px", marginRight: "10px", position: 'relative', top: '-2px' }} />招标采购中心 | 视频播放
|
||||
</div>
|
||||
</div>
|
||||
<ProCard title="视频列表" split="vertical" bordered headerBordered>
|
||||
<ProCard colSpan="300px" bodyStyle={{ height: "calc(100vh - 116px)", padding: "0 16px" }}>
|
||||
<List
|
||||
className="demo-loadmore-list"
|
||||
itemLayout="horizontal"
|
||||
dataSource={list}
|
||||
renderItem={item => (
|
||||
<List.Item
|
||||
actions={[<a key="list-loadmore-edit" style={{ color: "#1890ff" }} onClick={() => onGetLiveStream(item)} hidden={item.status !== 1}>播放<PlayCircleOutlined style={{ marginLeft: 8 }} /></a>]}
|
||||
>
|
||||
<Typography.Text strong>{item.taskName}</Typography.Text>
|
||||
</List.Item>
|
||||
)}
|
||||
/>
|
||||
</ProCard>
|
||||
<ProCard bodyStyle={{ width: "100%", padding: 0 }}>
|
||||
<div style={{ height: "95%", width: '90%' }}>
|
||||
<div id="container0" className="p_container" onDoubleClick={() => fullscreen()}></div>
|
||||
<div className="p_bottom_container">
|
||||
<div id="canvas-container" className="canvas-container">
|
||||
<canvas
|
||||
id="canvas"
|
||||
className="time-line-body"
|
||||
height="48px"
|
||||
width={recordWidthRef}
|
||||
//style="display: inline-block"
|
||||
>
|
||||
该浏览器不支持canvas
|
||||
</canvas>
|
||||
</div>
|
||||
<div className="p_bottom">
|
||||
<div className="scale">
|
||||
<div>
|
||||
<i className="ico ico-jian" onClick={() => onReduce()}></i>
|
||||
<div className="dot-container" >
|
||||
<div className="dot-container-dot"></div>
|
||||
</div>
|
||||
<i className="ico ico-jia" onClick={() => onAdd()}></i>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<div className="item">
|
||||
<button className="speed" onClick={() => setSpeedFun()}>{speed}X</button>
|
||||
|
||||
<i className="ico ico-quanping" onClick={() => fullscreen()}></i>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</ProCard>
|
||||
</ProCard>
|
||||
</div >
|
||||
)
|
||||
}
|
||||
export default viewOfTenderDocuments
|
||||
Reference in New Issue
Block a user