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