package.json

@@ -49,7 +49,7 @@
     "pubsub-js": "^1.9.4",
     "react": "18.2.0",
     "react-countup": "^6.5.3",
-    "react-dom": "^19.1.1",
+    "react-dom": "18.2.0",
     "react-i18next": "^14.1.0",
     "react-icons": "^5.2.1",
     "react-markdown": "8.0.0",

src/components/Option/VideoPlayer/index.tsx

@@ -1,7 +1,6 @@
 import React, { useEffect, useMemo, useRef, useState } from "react"
 import iodVideo from "@/public/video.mp4"
 import { useOptionLayoutContext } from "@/components/Layouts/Layout.tsx"
-import { createPortal } from "react-dom"
 import {
   ExpandOutlined,
   PauseCircleOutlined,
@@ -186,6 +185,7 @@ const VideoPlayer = () => {
       }
     }
 
+
     video.addEventListener("loadedmetadata", handleLoadedMetadata)
     video.addEventListener("timeupdate", handleTimeUpdate)
     video.addEventListener("waiting", handleWaiting)
@@ -326,7 +326,7 @@ const VideoPlayer = () => {
       onMouseLeave={handleMouseLeave}>
       <video
         ref={videoRef}
-        className="w-full h-full bg-black  [&::-webkit-media-controls]:hidden [&::-webkit-media-controls-start-playback-button]:hidden"
+        className="w-full h-full bg-black"
         onClick={togglePlayPause}
         playsInline
         preload="auto">
@@ -351,9 +351,8 @@ const VideoPlayer = () => {
       )}
 
       {/* 控制栏 - 使用与原始HTML相同的类名和行为 */}
-      {createPortal(
       <div
-          className={`fixed left-0 w-full bg-gradient-to-t from-black to-transparent p-4 transition-all duration-300 ease-in-out flex flex-col gap-2.5 z-50 ${showControls ? "bottom-0" : "-bottom-40"}`}>
+        className={`absolute left-0 w-full bg-gradient-to-t from-black to-transparent p-4 transition-all duration-300 ease-in-out flex flex-col gap-2.5 ${showControls ? "bottom-0" : "-bottom-40"}`}>
         <div
           className="flex items-center justify-end gap-2 cursor-pointer"
           onClick={handleEnded}>
@@ -409,9 +408,7 @@ const VideoPlayer = () => {
             <ExpandOutlined className="text-2xl" />
           </button>
         </div>
-        </div>,
+      </div>
-        document.body
-      )}
     </div>
   )
 }