rht

apps/web/package.json

@@ -64,6 +64,7 @@
 		"react-dom": "18.2.0",
 		"react-hook-form": "^7.54.2",
 		"react-hot-toast": "^2.4.1",
+		"react-player": "^2.16.0",
 		"react-resizable": "^3.0.5",
 		"react-router-dom": "^6.24.1",
 		"superjson": "^2.2.1",

apps/web/src/components/models/course/detail/CourseDetailDisplayArea.tsx

@@ -10,7 +10,7 @@ import { Skeleton } from "antd";
 import ResourcesShower from "@web/src/components/common/uploader/ResourceShower";
 import { useNavigate } from "react-router-dom";
 import CourseDetailTitle from "./CourseDetailTitle";
-
+import ReactPlayer from "react-player";
 export const CourseDetailDisplayArea: React.FC = () => {
 	// 创建滚动动画效果
 	const {
@@ -41,7 +41,16 @@ export const CourseDetailDisplayArea: React.FC = () => {
 							}}
 							className="w-full bg-black rounded-lg  ">
 							<div className=" w-full cursor-pointer">
-								<VideoPlayer src={lecture?.meta?.videoUrl} />
+								<ReactPlayer
+									url={lecture?.meta?.videoUrl}
+									controls={true}
+									width="100%"
+									height="100%"
+									onError={(error) => {
+										console.log(error);
+									}}
+								/>
+								{/* <VideoPlayer src={lecture?.meta?.videoUrl} /> */}
 							</div>
 						</motion.div>
 					</div>

pnpm-lock.yaml

@@ -386,6 +386,9 @@ importers:
       react-hot-toast:
         specifier: ^2.4.1
         version: 2.5.1(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
+      react-player:
+        specifier: ^2.16.0
+        version: 2.16.0(react@18.2.0)
       react-resizable:
         specifier: ^3.0.5
         version: 3.0.5(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
@@ -5603,6 +5606,9 @@ packages:
       enquirer:
         optional: true
 
+  load-script@1.0.0:
+    resolution: {integrity: sha512-kPEjMFtZvwL9TaZo0uZ2ml+Ye9HUMmPwbYRJ324qF9tqMejwykJ5ggTyvzmrbBeapCAbk98BSbTeovHEEP1uCA==}
+
   load-tsconfig@0.2.5:
     resolution: {integrity: sha512-IXO6OCs9yg8tMKzfPZ1YmheJbZCiEsnBdcB03l0OcfK9prKnJb96siuHCr5Fl37/yo9DnKU+TLpxzTUspw9shg==}
     engines: {node: ^12.20.0 || ^14.13.1 || >=16.0.0}
@@ -5818,6 +5824,9 @@ packages:
     resolution: {integrity: sha512-UERzLsxzllchadvbPs5aolHh65ISpKpM+ccLbOJ8/vvpBKmAWf+la7dXFy7Mr0ySHbdHrFv5kGFCUHHe6GFEmw==}
     engines: {node: '>= 4.0.0'}
 
+  memoize-one@5.2.1:
+    resolution: {integrity: sha512-zYiwtZUcYyXKo/np96AGZAckk+FWWsUdJ3cHGGmld7+AhvcWmQyGCYUh1hc4Q/pkOhb65dQR/pqCyK0cOaHz4Q==}
+
   meow@8.1.2:
     resolution: {integrity: sha512-r85E3NdZ+mpYk1C6RjPFEMSE+s1iZMuHtsHAqY0DT3jZczl0diWUZ8g6oU7h0M9cD2EL+PzaYghhCLzR0ZNn5Q==}
     engines: {node: '>=10'}
@@ -6645,6 +6654,9 @@ packages:
       react: '>= 16.3.0'
       react-dom: '>= 16.3.0'
 
+  react-fast-compare@3.2.2:
+    resolution: {integrity: sha512-nsO+KSNgo1SbJqJEYRE9ERzo7YtYbou/OqjSQKxV7jcKox7+usiUVZOAC+XnDOABXggQTno0Y1CpVnuWEc1boQ==}
+
   react-hook-form@7.54.2:
     resolution: {integrity: sha512-eHpAUgUjWbZocoQYUHposymRb4ZP6d0uwUnooL2uOybA9/3tPUvoAKqEWK1WaSiTxxOfTpffNZP7QwlnM3/gEg==}
     engines: {node: '>=18.0.0'}
@@ -6664,6 +6676,11 @@ packages:
   react-is@18.3.1:
     resolution: {integrity: sha512-/LLMVyas0ljjAtoYiPqYiL8VWXzUUdThrmU5+n20DZv+a+ClRoevUzw5JxU+Ieh5/c87ytoTBV9G1FiKfNJdmg==}
 
+  react-player@2.16.0:
+    resolution: {integrity: sha512-mAIPHfioD7yxO0GNYVFD1303QFtI3lyyQZLY229UEAp/a10cSW+hPcakg0Keq8uWJxT2OiT/4Gt+Lc9bD6bJmQ==}
+    peerDependencies:
+      react: '>=16.6.0'
+
   react-refresh@0.14.2:
     resolution: {integrity: sha512-jCvmsr+1IUSMUyzOkRcvnVbX3ZYC6g9TDrDbFuFmRDq7PD4yaGbLKNQL6k2jnArV8hjYxh7hVhAZB6s9HDGpZA==}
     engines: {node: '>=0.10.0'}
@@ -13723,6 +13740,8 @@ snapshots:
       rfdc: 1.4.1
       wrap-ansi: 8.1.0
 
+  load-script@1.0.0: {}
+
   load-tsconfig@0.2.5: {}
 
   loader-runner@4.3.0: {}
@@ -13899,6 +13918,8 @@ snapshots:
     dependencies:
       fs-monkey: 1.0.6
 
+  memoize-one@5.2.1: {}
+
   meow@8.1.2:
     dependencies:
       '@types/minimist': 1.2.5
@@ -14774,6 +14795,8 @@ snapshots:
       react: 18.2.0
       react-dom: 18.2.0(react@18.2.0)
 
+  react-fast-compare@3.2.2: {}
+
   react-hook-form@7.54.2(react@18.2.0):
     dependencies:
       react: 18.2.0
@@ -14789,6 +14812,15 @@ snapshots:
 
   react-is@18.3.1: {}
 
+  react-player@2.16.0(react@18.2.0):
+    dependencies:
+      deepmerge: 4.3.1
+      load-script: 1.0.0
+      memoize-one: 5.2.1
+      prop-types: 15.8.1
+      react: 18.2.0
+      react-fast-compare: 3.2.2
+
   react-refresh@0.14.2: {}
 
   react-resizable@3.0.5(react-dom@18.2.0(react@18.2.0))(react@18.2.0):