mt-fe-group/xuchang-screen
9
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

update video play

Browse Source
This commit is contained in:
lb
2023-11-07 10:30:15 +08:00
parent b0e492f066
commit 709008c3a3
5 changed files with 133 additions and 125 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -4,6 +4,7 @@ import EnterToFloorTwo from './videoComponents/EnterToFloor2';
import FloorOneToTwo from './videoComponents/Floor1To2';
import FloorTwoToOne from './videoComponents/Floor2To1';
import { useRef, useEffect, useReducer } from 'react';
import { AnimatePresence } from 'framer-motion';
const initOpacity = {
enterVideo: 1,
@@ -86,16 +87,17 @@ function VideoContainer(props) {
}
return (
<>
<AnimatePresence>
<EnterVideo
key="enter"
onVideoEnd={handleEnterVideoEnd}
opacity={opacity.enterVideo}
/>
<EnterToFloorOne opacity={opacity.enterToFloorOne} />
<EnterToFloorTwo opacity={opacity.enterToFloorTwo} />
<FloorOneToTwo opacity={opacity.floorOneToTwo} />
<FloorTwoToOne opacity={opacity.floorTwoToOne} />
</>
<EnterToFloorOne key="enter-to-1" opacity={opacity.enterToFloorOne} />
<EnterToFloorTwo key="enter-to-2" opacity={opacity.enterToFloorTwo} />
<FloorOneToTwo key="1-to-2" opacity={opacity.floorOneToTwo} />
<FloorTwoToOne key="2-to-1" opacity={opacity.floorTwoToOne} />
</AnimatePresence>
);
}

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

@@ -1,44 +1,57 @@
import { motion } from 'framer-motion';
import { useRef, useEffect } from 'react';
import { motion, AnimatePresence } from 'framer-motion';
import { useRef, useEffect, useMemo } from 'react';
function EnterToFloorOne(props) {
const vd = useRef(null);
const opacity = props.opacity || 0;
if (opacity == 1) {
setTimeout(() => {
vd.current.play();
}, 100);
}
const show = props.opacity || 0;
useEffect(() => {
vd.current.addEventListener('ended', () => {
setTimeout(() => {
vd.current.currentTime = 0;
}, 1000);
});
}, []);
if (show) vd.current.play();
}, [show]);
// const show = useMemo(
// () => ({
// opacity: 1,
// display: 'block',
// duration: 0,
// }),
// [],
// );
// const hide = useMemo(
// () => ({
// opacity: 0,
// transitionEnd: {
// display: 'none',
// },
// }),
// [],
// );
return (
<motion.div
className="video-wrapper"
style={{
position: 'fixed',
top: 0,
left: 0,
width: '100%',
height: '100%',
zIndex: -1000,
opacity: opacity,
zIndex: -999,
}}
transition={{ type: 'tween', duration: 1 }}
>
<video ref={vd} muted width={'100%'}>
<source src="/video/floor1.webm" type="video/mp4" />
</video>
</motion.div>
<AnimatePresence>
{show && (
<motion.div
className="video-wrapper"
style={{
position: 'fixed',
top: 0,
left: 0,
width: '100%',
height: '100%',
zIndex: -999,
}}
initial={{ opacity: 0 }}
animate={{ opacity: 1 }}
exit={{ opacity: [1, 1, 0], transition: { duration: 0.5 } }}
>
<video ref={vd} muted width={'100%'}>
<source src="/video/floor1.webm" type="video/mp4" />
</video>
</motion.div>
)}
</AnimatePresence>
);
+66;
}
export default EnterToFloorOne;

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

@@ -1,8 +1,8 @@
import { motion } from 'framer-motion';
import { useEffect, useRef } from 'react';
import { motion, AnimatePresence } from 'framer-motion';
import { useEffect, useRef, useMemo } from 'react';
function EnterVideo(props) {
const opacity = props.opacity || 0;
const show = props.opacity || 0;
const vd = useRef(null);
useEffect(() => {
@@ -10,24 +10,28 @@ function EnterVideo(props) {
}, []);
return (
<motion.div
className="video-wrapper"
style={{
position: 'fixed',
top: 0,
left: 0,
width: '100%',
height: '100%',
zIndex: -1000,
opacity: opacity,
zIndex: -1000,
}}
transition={{ type: 'tween' }}
>
<video ref={vd} muted autoPlay={true} width={'100%'}>
<source src="/video/enter.webm" type="video/mp4" />
</video>
</motion.div>
<AnimatePresence>
{show && (
<motion.div
className="video-wrapper"
style={{
position: 'fixed',
top: 0,
left: 0,
width: '100%',
height: '100%',
zIndex: -1000,
}}
initial={{ opacity: 0 }}
animate={{ opacity: 1 }}
exit={{ opacity: [1, 1, 0], transition: { duration: 0.5 } }}
>
<video ref={vd} muted autoPlay={true} width={'100%'}>
<source src="/video/enter.webm" type="video/mp4" />
</video>
</motion.div>
)}
</AnimatePresence>
);
}

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

@@ -1,42 +1,37 @@
import { motion } from 'framer-motion';
import { useRef, useEffect } from 'react';
import { motion, AnimatePresence } from 'framer-motion';
import { useRef, useEffect, useMemo } from 'react';
function FloorOneToTwo(props) {
const vd = useRef(null);
const opacity = props.opacity || 0;
if (opacity == 1) {
setTimeout(() => {
vd.current.play();
}, 100);
}
const show = props.opacity || 0;
useEffect(() => {
vd.current.addEventListener('ended', () => {
setTimeout(() => {
vd.current.currentTime = 0;
}, 1000);
});
}, []);
if (show) vd.current.play();
}, [show]);
return (
<motion.div
className="video-wrapper"
style={{
position: 'fixed',
top: 0,
left: 0,
width: '100%',
height: '100%',
zIndex: -998,
opacity,
}}
transition={{ type: 'tween', duration: 1 }}
>
<video ref={vd} muted width={'100%'}>
<source src="/video/1to2.webm" type="video/mp4" />
</video>
</motion.div>
<AnimatePresence>
{show && (
<motion.div
className="video-wrapper"
style={{
position: 'fixed',
top: 0,
left: 0,
width: '100%',
height: '100%',
zIndex: -998,
}}
initial={{ opacity: 0 }}
animate={{ opacity: 1 }}
exit={{ opacity: [1, 1, 0], transition: { duration: 0.5 } }}
>
<video ref={vd} muted width={'100%'}>
<source src="/video/1to2.webm" type="video/mp4" />
</video>
</motion.div>
)}
</AnimatePresence>
);
}

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

@@ -1,43 +1,37 @@
import { motion } from 'framer-motion';
import { useEffect, useRef } from 'react';
import { motion, AnimatePresence } from 'framer-motion';
import { useRef, useEffect, useMemo } from 'react';
function FloorTwoToOne(props) {
const vd = useRef(null);
const opacity = props.opacity || 0;
if (opacity == 1) {
setTimeout(() => {
vd.current.play();
}, 100);
}
const show = props.opacity || 0;
useEffect(() => {
vd.current.addEventListener('ended', () => {
setTimeout(() => {
vd.current.currentTime = 0;
}, 1000);
});
}, []);
if (show) vd.current.play();
}, [show]);
return (
<motion.div
className="video-wrapper"
style={{
position: 'fixed',
top: 0,
left: 0,
width: '100%',
height: '100%',
zIndex: -1000,
opacity: opacity,
zIndex: -998,
}}
transition={{ type: 'tween', duration: 1 }}
>
<video ref={vd} muted width={'100%'}>
<source src="/video/2to1.webm" type="video/mp4" />
</video>
</motion.div>
<AnimatePresence>
{show && (
<motion.div
className="video-wrapper"
style={{
position: 'fixed',
top: 0,
left: 0,
width: '100%',
height: '100%',
zIndex: -998,
}}
initial={{ opacity: 0 }}
animate={{ opacity: 1 }}
exit={{ opacity: [1, 1, 0], transition: { duration: 0.5 } }}
>
<video ref={vd} muted width={'100%'}>
<source src="/video/2to1.webm" type="video/mp4" />
</video>
</motion.div>
)}
</AnimatePresence>
);
}