7.12 视频播放

config/router.config.ts

@@ -43,6 +43,11 @@ export default [
   //   path: '/Calendar',
   //   component: './MainPage/ProjectManager/components/CalendarForm',
   // },
+  //视频播放-视频播放列表（暂时用）
+  {
+    path: '/ElecEvaluation/Monitor/videoplay',
+    component: './ElecEvaluation/Monitor/RoomDetail/videoplay',
+  },
   //富文本组件
   // {
   //   path: '/editor',

src/pages/ElecEvaluation/Monitor/RoomDetail/videoplay.tsx

@@ -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>
+                                        &nbsp;&nbsp;
+                                        <i className="ico ico-quanping" onClick={() => fullscreen()}></i>
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </ProCard>
+            </ProCard>
+        </div >
+    )
+}
+export default viewOfTenderDocuments