update

src/components/模块组件/窑炉内部/Center/VideoContainer.jsx

@@ -75,9 +75,9 @@ function VideoContainer(props) {
 
 	const enterToFloorOne = () => {
 		// 更新层数
-		props.onFloorUpdate(2);
+		props.onFloorUpdate(1);
 		// floor1 one 立即显示，enter 延迟点消失
-		dispatch({ type: 'enter-to-2' });
+		dispatch({ type: 'enter-to-1' });
 	};
 
 	function handleEnterVideoEnd() {

src/components/模块组件/窑炉内部/Center/videoComponents/EnterToFloor1.jsx

@@ -1,13 +1,24 @@
 import { motion } from 'framer-motion';
-import { useRef } from 'react';
+import { useRef, useEffect } from 'react';
 
 function EnterToFloorOne(props) {
 	const vd = useRef(null);
 	const opacity = props.opacity || 0;
 
 	if (opacity == 1) {
-		vd.current.play();
+		setTimeout(() => {
+			vd.current.play();
+		}, 100);
 	}
+
+	useEffect(() => {
+		vd.current.addEventListener('ended', () => {
+			setTimeout(() => {
+				vd.current.currentTime = 0;
+			}, 1000);
+		});
+	}, []);
+
 	return (
 		<motion.div
 			className="video-wrapper"
@@ -21,9 +32,9 @@ function EnterToFloorOne(props) {
 				opacity: opacity,
 				zIndex: -999,
 			}}
-			transition={{ type: 'tween', duration: opacity ? 0.2 : 0.5 }}
+			transition={{ type: 'tween', duration: 1 }}
 		>
-			<video ref={vd} muted preload="auto" width={'100%'}>
+			<video ref={vd} muted width={'100%'}>
 				<source src="/video/floor1.webm" type="video/mp4" />
 			</video>
 		</motion.div>

src/components/模块组件/窑炉内部/Center/videoComponents/EnterToFloor2.jsx

@@ -1,14 +1,24 @@
 import { motion } from 'framer-motion';
-import { useRef } from 'react';
+import { useRef, useEffect } from 'react';
 
 function EnterToFloorTwo(props) {
 	const vd = useRef(null);
 	const opacity = props.opacity || 0;
 
 	if (opacity == 1) {
-		vd.current.play();
+		setTimeout(() => {
+			vd.current.play();
+		}, 100);
 	}
 
+	useEffect(() => {
+		vd.current.addEventListener('ended', () => {
+			setTimeout(() => {
+				vd.current.currentTime = 0;
+			}, 1000);
+		});
+	}, []);
+
 	return (
 		<motion.div
 			className="video-wrapper"
@@ -22,9 +32,9 @@ function EnterToFloorTwo(props) {
 				opacity: opacity,
 				zIndex: -999,
 			}}
-			transition={{ type: 'tween', duration: opacity ? 0.2 : 0.5 }}
+			transition={{ type: 'tween', duration: 1 }}
 		>
-			<video ref={vd} muted preload="auto" width={'100%'}>
+			<video ref={vd} muted width={'100%'}>
 				<source src="/video/floor2.webm" type="video/mp4" />
 			</video>
 		</motion.div>

src/components/模块组件/窑炉内部/Center/videoComponents/EnterVideo.jsx

@@ -24,7 +24,7 @@ function EnterVideo(props) {
 			}}
 			transition={{ type: 'tween' }}
 		>
-			<video ref={vd} muted preload="auto" autoPlay={true} width={'100%'}>
+			<video ref={vd} muted autoPlay={true} width={'100%'}>
 				<source src="/video/enter.webm" type="video/mp4" />
 			</video>
 		</motion.div>

src/components/模块组件/窑炉内部/Center/videoComponents/Floor1To2.jsx

@@ -1,14 +1,24 @@
 import { motion } from 'framer-motion';
-import { useRef } from 'react';
+import { useRef, useEffect } from 'react';
 
 function FloorOneToTwo(props) {
 	const vd = useRef(null);
 	const opacity = props.opacity || 0;
 
 	if (opacity == 1) {
-		vd.current.play();
+		setTimeout(() => {
+			vd.current.play();
+		}, 100);
 	}
 
+	useEffect(() => {
+		vd.current.addEventListener('ended', () => {
+			setTimeout(() => {
+				vd.current.currentTime = 0;
+			}, 1000);
+		});
+	}, []);
+
 	return (
 		<motion.div
 			className="video-wrapper"
@@ -18,13 +28,12 @@ function FloorOneToTwo(props) {
 				left: 0,
 				width: '100%',
 				height: '100%',
-				zIndex: -1000,
-				opacity: opacity,
 				zIndex: -998,
+				opacity,
 			}}
-			transition={{ type: 'tween', duration: opacity ? 0.2 : 0.5 }}
+			transition={{ type: 'tween', duration: 1 }}
 		>
-			<video ref={vd} muted preload="auto" width={'100%'}>
+			<video ref={vd} muted width={'100%'}>
 				<source src="/video/1to2.webm" type="video/mp4" />
 			</video>
 		</motion.div>

src/components/模块组件/窑炉内部/Center/videoComponents/Floor2To1.jsx

@@ -1,14 +1,24 @@
 import { motion } from 'framer-motion';
-import { useRef } from 'react';
+import { useEffect, useRef } from 'react';
 
 function FloorTwoToOne(props) {
 	const vd = useRef(null);
 	const opacity = props.opacity || 0;
 
 	if (opacity == 1) {
-		vd.current.play();
+		setTimeout(() => {
+			vd.current.play();
+		}, 100);
 	}
 
+	useEffect(() => {
+		vd.current.addEventListener('ended', () => {
+			setTimeout(() => {
+				vd.current.currentTime = 0;
+			}, 1000);
+		});
+	}, []);
+
 	return (
 		<motion.div
 			className="video-wrapper"
@@ -22,9 +32,9 @@ function FloorTwoToOne(props) {
 				opacity: opacity,
 				zIndex: -998,
 			}}
-			transition={{ type: 'tween', duration: opacity ? 0.2 : 0.5 }}
+			transition={{ type: 'tween', duration: 1 }}
 		>
-			<video ref={vd} muted preload="auto" width={'100%'}>
+			<video ref={vd} muted width={'100%'}>
 				<source src="/video/2to1.webm" type="video/mp4" />
 			</video>
 		</motion.div>