feat: 获取播放地址

src/pages/Play/components/Player.tsx

@@ -22,6 +22,7 @@ const VideoPlayer: React.FC<VideoPlayerProps> = ({
   const leftVideoRef = useRef<HTMLVideoElement>(null);
   const rightVideoRef = useRef<HTMLVideoElement>(null);
   const audioRef = useRef<HTMLAudioElement>(null);
+  const [isReady, setIsReady] = useState(false);
   const [isPlaying, setIsPlaying] = useState(false);
   const [currentTime, setCurrentTime] = useState(0);
   const [duration, setDuration] = useState(0);
@@ -106,7 +107,12 @@ const VideoPlayer: React.FC<VideoPlayerProps> = ({
     setIsFullscreen(!isFullscreen);
   };
 
+
+
   useEffect(() => {
+    // 验证所有资源URL有效性
+    const urls = [topVideoSrc, leftVideoSrc, rightVideoSrc, audioSrc];
+    const allValid = urls.every(url => url && url.startsWith('http'));
     const topVideo = topVideoRef.current;
     const handleLoadedMetadata = () => {
       if (topVideo) {
@@ -118,14 +124,16 @@ const VideoPlayer: React.FC<VideoPlayerProps> = ({
       topVideo.addEventListener('loadedmetadata', handleLoadedMetadata);
       topVideo.addEventListener('timeupdate', handleTimeUpdate);
     }
-
+    setIsReady(allValid);
     return () => {
       if (topVideo) {
         topVideo.removeEventListener('loadedmetadata', handleLoadedMetadata);
         topVideo.removeEventListener('timeupdate', handleTimeUpdate);
       }
     };
-  }, []);
+  }, [topVideoSrc, leftVideoSrc, rightVideoSrc, audioSrc]);
+
+  if (!isReady) return <div>资源加载中...</div>;
 
   return (
     <div className={`video-container ${isFullscreen ? 'fullscreen' : ''}`}>

src/pages/Play/index.tsx

@@ -1,17 +1,43 @@
 import {
   PageContainer,
 } from '@ant-design/pro-components';
-import React, { useState } from 'react';
+import React, { useEffect, useState } from 'react';
 import './style/index.less';
 import { Button, Card, Flex } from 'antd';
 import { ArrowLeftOutlined } from '@ant-design/icons';
 import dayjs from 'dayjs';
 import './style/index.less'
 import VideoPlayer from '@/pages/Play/components/Player';
-// import ReactPlayer from 'react-player'
+import { useLocation } from '@@/exports';
+import { getCourseVideos } from '@/services/play/PlayController';
 
 const TableList: React.FC<unknown> = () => {
   const [selected, setSelected] = useState<string>('sync');
+  const location = useLocation();
+  const [fullClassRoom, setFullClassRoom] = useState<string>('');
+  const [closeUpTeacher, setCloseUpTeacher] = useState<string>('');
+  const [blackWriting, setBlackWriting] = useState<string>('');
+  const [audioClass, setAudioClass] = useState<string>('');
+
+  useEffect(() => {
+    if(location.search) {
+      const searchParams = new URLSearchParams(location.search);
+      const onData = async () => {
+        const data: API.PlayRes = await getCourseVideos({
+          isPreview: false,
+          teacherCourseId: searchParams.get('courseId') as string,
+        })
+        if (data.code === 200) {
+          setFullClassRoom(data.data.find(item => item.fileType === 1)?.fileUrl as string);
+          setCloseUpTeacher(data.data?.find(item => item.fileType === 2)?.fileUrl as string);
+          setBlackWriting(data.data.find(item => item.fileType === 3)?.fileUrl as string);
+          setAudioClass(data.data.find(item => item.fileType === 4)?.fileUrl as string);
+        }
+      }
+      onData()
+    }
+  }, [location.search]);
+
   return (
     <PageContainer className="play-page-box">
       <Card style={{ marginInline: 20, marginTop: 10 }}>
@@ -57,10 +83,10 @@ const TableList: React.FC<unknown> = () => {
           <div style={{ flex: 1 }}>
             <VideoPlayer
               syncPlay={selected === 'sync'}
-              topVideoSrc={'http://player.alicdn.com/video/aliyunmedia.mp4'}
-              leftVideoSrc={'http://player.alicdn.com/video/aliyunmedia.mp4'}
-              rightVideoSrc={'http://player.alicdn.com/video/aliyunmedia.mp4'}
-              audioSrc={''}
+              topVideoSrc={fullClassRoom}
+              leftVideoSrc={closeUpTeacher}
+              rightVideoSrc={blackWriting}
+              audioSrc={audioClass}
             />
           </div>
         </div>

src/services/play/PlayController.ts

@@ -0,0 +1,19 @@
+
+import { request } from '@umijs/max';
+
+/**
+ * login
+ * @returns
+ * @param params
+ * @param options
+ */
+export async function getCourseVideos(
+  params?: API.PlayParams,
+  options?: { [key: string]: any },
+) {
+  return request<API.PlayRes>('/api/courseFile/getPreviewFiles', {
+    method: 'GET',
+    params: params,
+    ...(options || {}),
+  });
+}

src/services/play/index.ts

@@ -0,0 +1,5 @@
+
+import * as PlayController from './PlayController';
+export default {
+  PlayController,
+};

src/services/play/typings.d.ts

@@ -0,0 +1,21 @@
+declare namespace API {
+  // 参数接口
+  interface PlayParams {
+    isPreview: boolean;
+    teacherCourseId?: string;
+  }
+
+  // 响应接口
+  interface PlayRes {
+    code: number;
+    data: VideoInfo[];
+    message: string;
+    timestamp: number;
+  }
+
+  interface VideoInfo {
+    fileType: number;
+    fileUrl: string;
+    fileStatus: number;
+  }
+}