有跳转的动画增加3秒延时；增加返回，主页按钮。

src/pages/FertilizeByGround/Acid/AddAlkalineBtn.js

-import React from 'react';
 import styled from 'styled-components';
 import bg from '../../../磷肥施用技术切图/默认状态/画面a-1-assets/施用碱性肥料.png';
 import bgActive from '../../../磷肥施用技术切图/按下状态/画面a-1-按下-assets/施用碱性肥料.png';

src/pages/FertilizeByGround/Acid/AddOrganicBtn.js

-import React from 'react';
 import styled from 'styled-components';
 import bg from '../../../磷肥施用技术切图/默认状态/画面a-1-assets/增施有机肥.png';
 import bgActive from '../../../磷肥施用技术切图/按下状态/画面a-1-按下-assets/增施有机肥.png';

src/pages/FertilizeByGround/index.js

@@ -9,6 +9,7 @@ import AlkalineGroundBg from '../../磷肥施用技术切图/默认状态/画面
 import AcidVideoSrc from '../../动画/因土施肥/画面a酸性土壤.mp4';
 import NeutralVideoSrc from '../../动画/因土施肥/画面b中性土壤.mp4';
 import AlkalineVideoSrc from '../../动画/因土施肥/画面c石灰性土壤.mp4';
+import VideoDiy from '../Video';
 
 const Container = styled(WheatBg)`
 	display: flex;
@@ -63,26 +64,20 @@ const videoSrcs = {
 }
 
 function FertilizeByGround({ history, match }) {
-  const videoRef = useRef(null);
-  const [isPlay, setIsPlay] = useState(false);
+  const videoRef = useRef({});
   const [currentType, setCurrentType] = useState(); // acid, neutral, alkaline
-  const [isRedirect, setIsRedirect] = useState(true);
-  function handleClick(e, type, noRedirect) {
-    e.preventDefault();
-    setIsPlay(true);
-    setCurrentType(type);
-    setIsRedirect( noRedirect ? false : true);
-  }
-  useEffect(() => {
-    videoRef.current.src=videoSrcs[currentType]
-    videoRef.current.play();
-  }, [currentType]);
 
-  function handleEnded() {
-    setIsPlay(false);
-    if (isRedirect) {
-      history.push(`${match.url}/${currentType}`);
+  function getRedirectPath() {
+    if (currentType === 'acid' || currentType === 'alkaline' ) {
+      return `${match.url}/${currentType}`;
+    }
+    return null;
   }
+
+  function handleClick(e, type) {
+    e.preventDefault();
+    videoRef.current.play(videoSrcs[type]);
+    setCurrentType(type);
   }
 
   return (
@@ -90,14 +85,12 @@ function FertilizeByGround({ history, match }) {
       <PositionedFertilizeByGround as="div" />
       <RowBtn>
         <AcidGroundBtn to='#' onClick={e => handleClick(e, 'acid')} />
-        <NeutralGroundBtn to='#' onClick={e => handleClick(e, 'neutral', true)}  />
+        <NeutralGroundBtn to='#' onClick={e => handleClick(e, 'neutral')}  />
         <AlkalineGroundBtn to='#' onClick={e => handleClick(e, 'alkaline')} />
       </RowBtn>
       <BackBtn />
       <HomeBtn />
-      <VideoWrapper show={isPlay}>
-        <StyledVideo ref={videoRef} onEnded={handleEnded} />
-      </VideoWrapper>
+      <VideoDiy wrappedComponentRef={c => videoRef.current = c}  to={getRedirectPath()} />
     </Container>
   );
 }

src/pages/FertilizeConcentrated.js

@@ -68,8 +68,7 @@ export default function ({ match }) {
   const videoRef = useRef();
 
   function handleClick(name) {
-    videoRef.current.src = videoSrcs[name+'VideoSrc'];
-    videoRef.current.play();
+    videoRef.current.play(videoSrcs[name+'VideoSrc']);
   }
   return (
     <StyledWheatBg>
@@ -88,7 +87,7 @@ export default function ({ match }) {
       </Container>
       <BackBtn />
       <HomeBtn />
-      <Video ref={videoRef} />
+      <Video wrappedComponentRef={c => videoRef.current = c} />
     </StyledWheatBg>
   );
 }

src/pages/FertilizeControl.js

@@ -62,8 +62,7 @@ export default function ({ match }) {
   const videoRef = useRef();
 
   function handleClick(name) {
-    videoRef.current.src = videoSrcs[name+'VideoSrc'];
-    videoRef.current.play();
+    videoRef.current.play(videoSrcs[name+'VideoSrc']);
   }
   return (
     <StyledWheatBg>
@@ -82,7 +81,7 @@ export default function ({ match }) {
       </Container>
       <BackBtn />
       <HomeBtn />
-      <Video ref={videoRef} />
+      <Video wrappedComponentRef={c => videoRef.current = c} />
     </StyledWheatBg>
   );
 }

src/pages/FertilizeEarly/Corn/lifetime.js

-import React, { useState, useRef } from 'react';
-import { Link, withRouter } from 'react-router-dom';
+import React, { useRef } from 'react';
 import styled from 'styled-components';
 import WheatBg from '../../WheatBg';
 import ContainerBg from '../../../磷肥施用技术切图/默认状态/玉米02-assets/玉米.png';
 import { BackBtn, HomeBtn } from '../../SubHome';
-import Video from '../../Video';
+import VideoDiy from '../../Video';
 
 import SeedlingBg from '../../../磷肥施用技术切图/默认状态/玉米02-assets/苗期.png'
 import JointingBg from '../../../磷肥施用技术切图/默认状态/玉米02-assets/拔节期.png'
@@ -70,12 +69,11 @@ const videoSrcs = {
   TasselVideoSrcs,
   MaturityVideoSrcs,
 };
-export default withRouter(({ match, history }) => {
+export default () => {
   const videoRef = useRef();
 
   function handleClick(name) {
-    videoRef.current.src = videoSrcs[name+'VideoSrcs'];
-    videoRef.current.play();
+    videoRef.current.play(videoSrcs[name+'VideoSrcs']);
   }
 
   return (
@@ -95,7 +93,7 @@ export default withRouter(({ match, history }) => {
 
       <BackBtn />
       <HomeBtn />
-      <Video ref={videoRef} />
+      <VideoDiy wrappedComponentRef={c => videoRef.current = c} />
     </WheatBg>
   );
-});
\ No newline at end of file
+};
\ No newline at end of file

src/pages/FertilizeEarly/Rape/lifetime.js

-import React, { useState, useRef } from 'react';
-import { Link, withRouter } from 'react-router-dom';
+import React, { useRef } from 'react';
+import { withRouter } from 'react-router-dom';
 import styled from 'styled-components';
 import WheatBg from '../../WheatBg';
 import ContainerBg from '../../../磷肥施用技术切图/默认状态/油菜02-assets/油菜.png';
@@ -69,8 +69,7 @@ export default withRouter(({ match, history }) => {
 
   function handleClick(name) {
     if (name === 'Flowering') return;
-    videoRef.current.src = videoSrcs[name+'VideoSrcs'];
-    videoRef.current.play();
+    videoRef.current.play(videoSrcs[name+'VideoSrcs']);
   }
 
   return (
@@ -90,7 +89,7 @@ export default withRouter(({ match, history }) => {
 
       <BackBtn />
       <HomeBtn />
-      <Video ref={videoRef} />
+      <Video wrappedComponentRef={c => videoRef.current = c} />
     </WheatBg>
   );
 });
\ No newline at end of file

src/pages/FertilizeEarly/Wheat/lifetime.js

 import React, { useState, useRef } from 'react';
-import { Link, withRouter } from 'react-router-dom';
+import { withRouter } from 'react-router-dom';
 import styled from 'styled-components';
 import WheatBg from '../../WheatBg';
 import ContainerBg from '../../../磷肥施用技术切图/默认状态/冬小麦02 -assets/冬小麦.png';
@@ -91,14 +91,14 @@ export default withRouter(({ match, history }) => {
   function handleClick(name) {
     setName(name);
     if (name === 'Tiller') return;
-    videoRef.current.src = videoSrcs[name+'VideoSrcs'];
-    videoRef.current.play();
+    videoRef.current.play(videoSrcs[name+'VideoSrcs']);
   }
 
-  function handleEnded() {
+  function getRedirectPath() {
     if (name === 'Seedling') {
-      history.push(`${match.url}/Seedling`);
+      return `${match.url}/Seedling`;
     }
+    return null;
   }
 
   return (
@@ -118,7 +118,7 @@ export default withRouter(({ match, history }) => {
 
       <BackBtn />
       <HomeBtn />
-      <Video ref={videoRef} onEnded={handleEnded} />
+      <Video wrappedComponentRef={c => videoRef.current = c} to={getRedirectPath} />
     </WheatBg>
   );
 });
\ No newline at end of file

src/pages/FertilizeEarly/select.js

@@ -32,7 +32,7 @@ const bgs = {
   WheatBtnBg, WheatBtnBgActive, RapeBtnBg, RapeBtnBgActive, CornBtnBg, CornBtnBgActive,
 };
 
-['Wheat', 'Rape', 'Corn'].map(name => {
+['Wheat', 'Rape', 'Corn'].forEach(name => {
   Btns[name] = styled(Btn)`
     margin-top: 79px;
     background-image: url(${bgs[name+'BtnBg']});
@@ -41,9 +41,6 @@ const bgs = {
     }
   `;
 });
-const Row = styled.div`
-  
-`;
 const Col = styled.div`
   display: inline-block;
   text-align: center;

src/pages/SubHome.js

@@ -52,12 +52,12 @@ const FertilizeControl = styled(FertilizeBtn)`
   background-image: url(${FertilizeControlBg});
   margin-right: 0;
 `;
-export const BackBtn = withRouter((props) => {
+export const BackBtn = withRouter(({ onClick, history }) => {
   function handleClick(e) {
     e.preventDefault();
-    props.history.goBack();
+    history.goBack();
   }
-  return <StyledBackBtn to="#" onClick={handleClick} />
+  return <StyledBackBtn to="#" onClick={onClick || handleClick} />
 });
 
 export function HomeBtn() {

src/pages/Video.js

-import React, { useRef, useState, useEffect } from 'react';
+import React from 'react';
 import styled from 'styled-components';
+import { withRouter } from 'react-router-dom';
+import { HomeBtn, BackBtn } from './SubHome';
 
 const VideoWrapper = styled.div`
   position: absolute;
@@ -14,17 +16,125 @@ const VideoWrapper = styled.div`
 const StyledVideo = styled.video`
   height: 100%;
 `;
-export default React.forwardRef(({ onEnded }, ref) => {
-  const [show, setShow] = useState(false);
-  function handleEnded() {
-    setShow(false);
-    if (onEnded && typeof onEnded === 'function') {
-      onEnded();
+class VideoDiy extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      show: false,
+      timer: null,
+    };
+    this.videoEle = null;
+  }
+  
+  play = (src) => {
+    if (!this.videoEle || !src) return;
+    this.videoEle.src = src;
+    this.videoEle.oncanplay = () => {
+      var playPromise = this.videoEle.play();
+      if (!playPromise) return;
+      playPromise
+        .then(_ => {
+          console.log("video played");
+        })
+        .catch(err => {
+          console.log(err);
+        });
+    }
+  }
+
+  handleVideoBack = (e) => {
+    e.preventDefault();
+    if (this.videoEle) this.videoEle.pause();
+    this.setState({ show: false });
+    if (this.state.timer) clearTimeout(this.state.timer);
+  }
+
+  handleEnded = () => {
+    const { to, history } = this.props;
+    if (this.props.to) {
+      const timer = setTimeout(() => {
+        this.setState({ show: false });
+        history.push(to);
+      }, 3000);
+      this.setState({ timer });
+    } else {
+      this.setState({ show: false });
     }
   }
+
+  render() {
+    const { show } = this.state;
     return (
       <VideoWrapper show={show} >
-      <StyledVideo ref={ref} onPlay={() => setShow(true)} onEnded={handleEnded} />
+        <StyledVideo ref={node => this.videoEle = node} onPlay={() => this.setState({ show: true })} onEnded={this.handleEnded} />
+        <BackBtn onClick={this.handleVideoBack} />
+        <HomeBtn />
       </VideoWrapper>
     );
-});
+  }
+}
+
+// const VideoDiy = React.forwardRef(({ to }, ref) => {
+//   const WithRouterVideo = withRouter(({ history }) => {
+//     const [show, setShow] = useState(false);
+//     const [timer, setTimer] = useState(null);
+  
+//     const videoRef = useRef();
+  
+//     if (ref.current) {
+//       ref.current.play = play;
+//     }
+  
+//     function play(src) {
+//       const videoEle = videoRef.current;
+//       if (!videoEle || !src) return;
+//       console.log('play: ', src, videoEle);
+
+//       videoEle.src = src;
+//       videoEle.oncanplay = () => {
+//         var playPromise = videoEle.play();
+//         if (!playPromise) return;
+//         playPromise
+//           .then(d => {
+//             console.log("video played", d);
+//           })
+//           .catch(err => {
+//             console.log(err);
+//           });
+//       }
+//     }
+  
+//     function handleVideoBack(e) {
+//       e.preventDefault();
+//       const videoEle = videoRef.current;
+//       if (videoEle) videoEle.pause();
+//       setShow(false);
+
+//       if (timer) clearTimeout(timer);
+//     }
+  
+//     function handleEnded() {
+//       if (to) {
+//         setTimer(
+//           setTimeout(() => {
+//             setShow(false);
+//             history.push(to);
+//           }, 3000)
+//         );
+//       } else {
+//         setShow(false);
+//       }
+//     }
+  
+//     return (
+//       <VideoWrapper show={show} >
+//         <StyledVideo ref={videoRef} onPlay={() => setShow(true)} onEnded={handleEnded} />
+//         <BackBtn onClick={handleVideoBack} />
+//         <HomeBtn />
+//       </VideoWrapper>
+//     );
+//   });
+//   return <WithRouterVideo />
+// });
+
+export default withRouter(VideoDiy);
\ No newline at end of file