Explorar el Código

fix: 修复进度条定位不准的问题

NeeDaye hace 6 meses
padre
commit
945bc3d704

+ 11 - 3
src/pages/Play/components/SinglePlayer.tsx

@@ -61,7 +61,14 @@ const SyncVideoPlayer: React.FC<SyncVideoPlayerProps> = ({
     }
   };
 
+  // 播放结束处理
+  const handleEnded = () => {
+    videoRef.current?.pause();
+    audioRef.current?.pause();
+  };
+
   const handleSeek = (e: React.ChangeEvent<HTMLInputElement>) => {
+    console.log(e.currentTarget.value);
     const newTime = parseFloat(e.target.value);
     setCurrentTime(newTime);
     syncMedia(newTime);
@@ -136,7 +143,7 @@ const SyncVideoPlayer: React.FC<SyncVideoPlayerProps> = ({
           <video
             ref={videoRef}
             src={videos[currentVideo]}
-            onEnded={togglePlay}
+            onEnded={handleEnded}
             onTimeUpdate={handleTimeUpdate}
             onLoadedMetadata={() => setDuration(videoRef.current?.duration || 0)}
             width="80%"
@@ -157,8 +164,9 @@ const SyncVideoPlayer: React.FC<SyncVideoPlayerProps> = ({
           <input
             type="range"
             min="0"
-            max="100"
-            value={duration ? (currentTime / duration) * 100 : 0}
+            max={Math.floor(duration) || 100}
+            step="1"
+            value={currentTime}
             onChange={handleSeek}
             onMouseDown={handleSeekMouseDown}
             onMouseUp={handleSeekMouseUp}

+ 2 - 2
src/pages/Play/components/SyncPlayer.tsx

@@ -220,8 +220,8 @@ const SyncVideoPlayer: React.FC<SyncVideoPlayerProps> = ({
         <input
           type="range"
           min="0"
-          max="100"
-          value={duration ? (currentTime / duration) * 100 : 0}
+          max={Math.floor(duration) || 100}
+          value={currentTime}
           onChange={handleSeek}
           onMouseDown={handleSeekMouseDown}
           onMouseUp={handleSeekMouseUp}