封装初始视频

Code/public/myData/myData.js

@@ -790,6 +790,8 @@ const myDataTemp = {
   ],
   // 后厨备宴(静态资源目录位置：staticData/HH/chef)
   chef: {
+    // 最后的过长动画路径+名字
+    lastVideo: 'chef/end.mp4',
     // 初始背景图路径+名字
     baseImg: 'chef/bg.jpg',
     // 后厨群像图路径+名字

Code/src/components/BaseVideo/index.module.scss

@@ -0,0 +1,4 @@
+.BaseVideo {
+  :global {
+  }
+}

Code/src/components/BaseVideo/index.tsx

@@ -0,0 +1,84 @@
+import React, { useCallback, useEffect, useRef, useState } from 'react'
+import styles from './index.module.scss'
+import classNames from 'classnames'
+import { myData } from '@/utils/http'
+import useDataUrl from '../ownUse/useDataUrl'
+
+type Props = {
+  isShow: boolean
+  imgSrc: string
+  videoSrc: string
+  parentFu: () => void
+}
+
+function BaseVideo({ isShow, imgSrc, videoSrc, parentFu }: Props) {
+  const { dataUrlSame } = useDataUrl()
+
+  const baseVideoRef = useRef<HTMLVideoElement>(null)
+
+  useEffect(() => {
+    setTimeout(() => {
+      if (baseVideoRef.current) {
+        baseVideoRef.current.play()
+      }
+    }, 100)
+  }, [])
+
+  const [loding, setLoding] = useState(myData.isLdong ? 0 : 100)
+
+  const timeRR = useRef(-1)
+
+  useEffect(() => {
+    clearInterval(timeRR.current)
+    timeRR.current = window.setInterval(() => {
+      if (loding >= 100) {
+        clearInterval(timeRR.current)
+        return
+      }
+      setLoding(loding + 1)
+    }, 30)
+  }, [loding])
+
+  const btnStartFu = useCallback(() => {
+    if (loding >= 100) {
+      parentFu()
+    }
+  }, [loding, parentFu])
+
+  return (
+    <div className={classNames(styles.BaseVideo, isShow ? '' : styles.A2baseHide)}>
+      <img src={imgSrc} alt='' />
+      <div className='A2baseBtn' onClick={btnStartFu}>
+        {/* anpg动图 */}
+        <div className='A2BIcon'>
+          <img src={`${dataUrlSame}visit/arrow.png`} alt='' />
+        </div>
+
+        <img src={`${dataUrlSame}visit/btn.png`} alt='' />
+
+        <div className='A2Btxt'>{loding >= 100 ? '点击继续' : '加载中'}</div>
+        {loding >= 100 ? null : (
+          <div className='A2Bxian'>
+            <div>
+              <div style={{ width: loding + '%' }}></div>
+            </div>
+          </div>
+        )}
+      </div>
+
+      <video
+        ref={baseVideoRef}
+        src={videoSrc}
+        playsInline
+        muted
+        webkit-playsinline='true'
+        x5-video-player-type='h5'
+        loop
+      />
+    </div>
+  )
+}
+
+const MemoBaseVideo = React.memo(BaseVideo)
+
+export default MemoBaseVideo

Code/src/components/EndVideo/index.module.scss

@@ -2,7 +2,7 @@
   width: 100%;
   height: 100%;
   position: absolute;
-  z-index: 40;
+  z-index: 100;
   top: 0;
   left: 0;
   opacity: 0;

Code/src/components/EndVideo/index.tsx

@@ -7,13 +7,14 @@ import useDataUrl from '../ownUse/useDataUrl'
 
 type Props = {
   lastVideo: boolean
-  delDom: string
   src: string
   path: string
+  delDom?: string
+  noBtn?: boolean
 }
 
 // 页面结尾的视频
-function EndVideo({ lastVideo, delDom, src, path }: Props) {
+function EndVideo({ lastVideo, delDom, src, path, noBtn }: Props) {
   const { dataUrlSame } = useDataUrl()
 
   const videoRefLast = useRef<HTMLVideoElement>(null)
@@ -27,9 +28,11 @@ function EndVideo({ lastVideo, delDom, src, path }: Props) {
       }, 100)
 
       // 0.5s之后删除自己
-      setTimeout(() => {
-        domDelOwnFu(delDom)
-      }, 500)
+      if (delDom) {
+        setTimeout(() => {
+          domDelOwnFu(delDom)
+        }, 500)
+      }
     }
   }, [delDom, lastVideo])
 
@@ -49,6 +52,7 @@ function EndVideo({ lastVideo, delDom, src, path }: Props) {
       </video>
 
       <div
+        hidden={noBtn}
         title='跳过'
         className='endVdieoBtn'
         style={{ backgroundImage: `url(${dataUrlSame}home/tiao.png)` }}

Code/src/pages/A1home/index.module.scss

@@ -174,32 +174,6 @@
       }
     }
 
-    .A1last {
-      width: 100%;
-      height: 100%;
-      position: absolute;
-      z-index: 40;
-      top: 0;
-      left: 0;
-      opacity: 0;
-      pointer-events: none;
-      transition: all 0.5s;
-      .A1videoLastBtn {
-        position: absolute;
-        width: 50px;
-        height: 50px;
-        background-size: 100% 100%;
-        cursor: pointer;
-        bottom: 20px;
-        right: 20px;
-      }
-    }
-
-    .A1lastAc {
-      opacity: 1;
-      pointer-events: auto;
-    }
-
     // 屏幕>=1200
     @media screen and (min-width: 1200px) {
       .A1base {

Code/src/pages/A1home/index.tsx

@@ -4,7 +4,6 @@ import useDataUrl from '@/components/ownUse/useDataUrl'
 // import useMove from '@/components/ownUse/useMove'
 import { myData } from '@/utils/http'
 import classNames from 'classnames'
-import history from '@/utils/history'
 import { domDelOwnFu } from '@/utils/utilsSome'
 import EndVideo from '@/components/EndVideo'
 
@@ -85,23 +84,6 @@ function A1home() {
   // 最后一个过长动画
   const [lastVideo, setLastVideo] = useState(false)
 
-  const videoRefLast = useRef<HTMLVideoElement>(null)
-
-  const lastVideoFu = useCallback(() => {
-    setLastVideo(true)
-
-    setTimeout(() => {
-      if (videoRefLast.current) {
-        videoRefLast.current.play()
-      }
-    }, 100)
-
-    // 0.5s之后删除自己
-    setTimeout(() => {
-      domDelOwnFu('.A1videoBox')
-    }, 500)
-  }, [])
-
   // 有关序列帧
   const A1BfloorRef = useRef<HTMLImageElement>(null)
 
@@ -223,7 +205,7 @@ function A1home() {
           />
           <div className={ind === myData.home.videos.length - 1 ? 'A1videoBtnBoxShow' : ''}>
             <img className='A1videoBtnLogo' src={`${dataUrlSame}home/logo.png`} alt='' />
-            <div className='A1videoBtnNext' onClick={lastVideoFu}>
+            <div className='A1videoBtnNext' onClick={() => setLastVideo(true)}>
               <img src={`${dataUrlSame}home/nextLast.png`} alt='' />
               <p>点击开始</p>
             </div>
@@ -233,29 +215,12 @@ function A1home() {
 
       {/* 最后一个过长动画 */}
 
-      {/* <EndVideo lastVideo={lastVideo} delDom='.A1videoBox' src={dataUrlSame + myData.home.lastVideo} path='/visit'/> */}
-
-      <div className={classNames('A1last', lastVideo ? 'A1lastAc' : '')}>
-        <video
-          ref={videoRefLast}
-          playsInline
-          muted
-          webkit-playsinline='true'
-          x5-video-player-type='h5'
-          src={dataUrlSame + myData.home.lastVideo}
-          onEnded={() => history.push('/visit')}
-        >
-          <source type='video/mp4' />
-          Your browser does not support the video tag.
-        </video>
-
-        <div
-          title='跳过'
-          className='A1videoLastBtn'
-          style={{ backgroundImage: `url(${dataUrlSame}home/tiao.png)` }}
-          onClick={() => history.push('/visit')}
-        ></div>
-      </div>
+      <EndVideo
+        lastVideo={lastVideo}
+        delDom='.A1videoBox'
+        src={dataUrlSame + myData.home.lastVideo}
+        path='/visit'
+      />
     </div>
   )
 }

Code/src/pages/A2visit/index.module.scss

@@ -160,22 +160,6 @@
       opacity: 0;
     }
 
-    // 最后一个长视频
-    .A2last {
-      width: 100%;
-      height: 100%;
-      position: relative;
-      .A1videoLastBtn {
-        position: absolute;
-        width: 50px;
-        height: 50px;
-        cursor: pointer;
-        bottom: 20px;
-        right: 20px;
-        background-size: 100% 100%;
-      }
-    }
-
     // 屏幕>=1200
     @media screen and (min-width: 1200px) {
       .A2base {

Code/src/pages/A2visit/index.tsx

@@ -7,6 +7,7 @@ import { domDelOwnFu } from '@/utils/utilsSome'
 import PanoVideo from './PanoVideo'
 import history from '@/utils/history'
 import { ArrowRightOutlined } from '@ant-design/icons'
+import EndVideo from '@/components/EndVideo'
 
 function A2visit() {
   const { dataUrlSame } = useDataUrl()
@@ -58,9 +59,6 @@ function A2visit() {
 
   // 点击继续
   const btnStart = useCallback(() => {
-    // 待完善-后面删除
-    setOverVideo(false)
-
     if (loding >= 100) {
       // 播放已经加载好的视频
       setVideoInd(0)
@@ -77,26 +75,8 @@ function A2visit() {
   }, [loding])
 
   // 点击 跳下一个章节
-
   const [lastVideo, setLastVideo] = useState(false)
 
-  const videoRefLast = useRef<HTMLVideoElement>(null)
-
-  const lastVideoFu = useCallback(() => {
-    setLastVideo(true)
-
-    setTimeout(() => {
-      if (videoRefLast.current) {
-        videoRefLast.current.play()
-      }
-    }, 100)
-
-    // 0.5s之后删除自己
-    setTimeout(() => {
-      domDelOwnFu('.pvBox')
-    }, 500)
-  }, [])
-
   return (
     <div className={styles.A2visit}>
       {/* 加载页面 */}
@@ -153,7 +133,7 @@ function A2visit() {
         {/* 跳到下一章 */}
         <div className='pvBtn'>
           <img src={`${dataUrlSame}visit/btn.png`} alt='' />
-          <div onClick={lastVideoFu}>
+          <div onClick={() => setLastVideo(true)}>
             行拜谒礼
             <ArrowRightOutlined />
           </div>
@@ -166,27 +146,13 @@ function A2visit() {
         </div>
       </div>
 
-      {/* 最后一个过长动画 */}
-      <div className='A2last'>
-        <video
-          ref={videoRefLast}
-          playsInline
-          muted
-          webkit-playsinline='true'
-          x5-video-player-type='h5'
-          src={dataUrlSame + myData.visit.lastVideo}
-          onEnded={() => history.push('/banquet')}
-        >
-          <source type='video/mp4' />
-          Your browser does not support the video tag.
-        </video>
-        <div
-          title='跳过'
-          className='A1videoLastBtn'
-          style={{ backgroundImage: `url(${dataUrlSame}home/tiao.png)` }}
-          onClick={() => history.push('/banquet')}
-        ></div>
-      </div>
+      {/* 结尾动画 */}
+      <EndVideo
+        lastVideo={lastVideo}
+        delDom='.pvBox'
+        src={dataUrlSame + myData.visit.lastVideo}
+        path='/banquet'
+      />
     </div>
   )
 }

Code/src/pages/A3banquet/index.module.scss

@@ -172,22 +172,6 @@
       opacity: 0;
     }
 
-    // 最后一个长视频
-    .A3last {
-      width: 100%;
-      height: 100%;
-      position: relative;
-      .A3videoLastBtn {
-        position: absolute;
-        width: 50px;
-        height: 50px;
-        cursor: pointer;
-        bottom: 20px;
-        right: 20px;
-        background-size: 100% 100%;
-      }
-    }
-
     // 屏幕>=1200
     @media screen and (min-width: 1200px) {
       .A3base {

Code/src/pages/A3banquet/index.tsx

@@ -7,6 +7,7 @@ import { myData } from '@/utils/http'
 import PanoImg from './PanoImg'
 import { ArrowRightOutlined } from '@ant-design/icons'
 import history from '@/utils/history'
+import EndVideo from '@/components/EndVideo'
 
 function A3banquet() {
   const { dataUrlSame } = useDataUrl()
@@ -74,26 +75,8 @@ function A3banquet() {
   }, [loding])
 
   // 点击 跳下一个章节
-
   const [lastVideo, setLastVideo] = useState(false)
 
-  const videoRefLast = useRef<HTMLVideoElement>(null)
-
-  const lastVideoFu = useCallback(() => {
-    setLastVideo(true)
-
-    setTimeout(() => {
-      if (videoRefLast.current) {
-        videoRefLast.current.play()
-      }
-    }, 100)
-
-    // 0.5s之后删除自己
-    setTimeout(() => {
-      domDelOwnFu('.pvBox')
-    }, 500)
-  }, [])
-
   return (
     <div className={styles.A3banquet}>
       {/* 加载页面 */}
@@ -156,7 +139,7 @@ function A3banquet() {
         {/* 跳到下一章 */}
         <div className='pvBtn'>
           <img src={`${dataUrlSame}visit/btn.png`} alt='' />
-          <div onClick={lastVideoFu}>
+          <div onClick={() => setLastVideo(true)}>
             乐舞百戏
             <ArrowRightOutlined />
           </div>
@@ -169,27 +152,13 @@ function A3banquet() {
         </div>
       </div>
 
-      {/* 最后一个过长动画 */}
-      <div className='A3last'>
-        <video
-          ref={videoRefLast}
-          playsInline
-          muted
-          webkit-playsinline='true'
-          x5-video-player-type='h5'
-          src={dataUrlSame + myData.visit.lastVideo}
-          onEnded={() => history.push('/dance')}
-        >
-          <source type='video/mp4' />
-          Your browser does not support the video tag.
-        </video>
-        <div
-          title='跳过'
-          className='A3videoLastBtn'
-          style={{ backgroundImage: `url(${dataUrlSame}home/tiao.png)` }}
-          onClick={() => history.push('/dance')}
-        ></div>
-      </div>
+      {/* 结尾动画 */}
+      <EndVideo
+        lastVideo={lastVideo}
+        delDom='.pvBox'
+        src={dataUrlSame + myData.banquet.lastVideo}
+        path='/dance'
+      />
     </div>
   )
 }

Code/src/pages/A4dance/index.module.scss

@@ -267,30 +267,6 @@
       opacity: 0;
     }
 
-    // 最后一个长视频
-    .A4last {
-      width: 100%;
-      height: 100%;
-      position: relative;
-      opacity: 0;
-      pointer-events: none;
-      z-index: 30;
-      transition: all 0.5s;
-      .A3videoLastBtn {
-        position: absolute;
-        width: 50px;
-        height: 50px;
-        cursor: pointer;
-        bottom: 20px;
-        right: 20px;
-        background-size: 100% 100%;
-      }
-    }
-    .A4lastShow {
-      opacity: 1;
-      pointer-events: auto;
-    }
-
     // 中间的8个动画
     .A4floorBox {
       position: absolute;

Code/src/pages/A4dance/index.tsx

@@ -7,6 +7,7 @@ import { domDelOwnFu } from '@/utils/utilsSome'
 import { ArrowRightOutlined } from '@ant-design/icons'
 import history from '@/utils/history'
 import Hot2 from '../A2visit/PanoVideo/Hot2'
+import EndVideo from '@/components/EndVideo'
 
 function A4dance() {
   const { dataUrlSame } = useDataUrl()
@@ -39,26 +40,8 @@ function A4dance() {
   }, [loding])
 
   // 点击 跳下一个章节
-
   const [lastVideo, setLastVideo] = useState(false)
 
-  const videoRefLast = useRef<HTMLVideoElement>(null)
-
-  const lastVideoFu = useCallback(() => {
-    setLastVideo(true)
-
-    setTimeout(() => {
-      if (videoRefLast.current) {
-        videoRefLast.current.play()
-      }
-    }, 100)
-
-    // 0.5s之后删除自己
-    setTimeout(() => {
-      domDelOwnFu('.pvBox')
-    }, 500)
-  }, [])
-
   // 底部选中
   const [floorAc, setFloorAc] = useState(-1)
 
@@ -170,7 +153,7 @@ function A4dance() {
         {/* 跳到下一章 */}
         <div className='pvBtn'>
           <img src={`${dataUrlSame}visit/btn.png`} alt='' />
-          <div onClick={lastVideoFu}>
+          <div onClick={() => setLastVideo(true)}>
             后厨备宴
             <ArrowRightOutlined />
           </div>
@@ -245,28 +228,13 @@ function A4dance() {
           />
         </div>
       ) : null}
-
-      {/* 最后一个过长动画 */}
-      <div className={classNames('A4last', lastVideo ? 'A4lastShow' : '')}>
-        <video
-          ref={videoRefLast}
-          playsInline
-          muted
-          webkit-playsinline='true'
-          x5-video-player-type='h5'
-          src={dataUrlSame + myData.dance.lastVideo}
-          onEnded={() => history.push('/chef')}
-        >
-          <source type='video/mp4' />
-          Your browser does not support the video tag.
-        </video>
-        <div
-          title='跳过'
-          className='A3videoLastBtn'
-          style={{ backgroundImage: `url(${dataUrlSame}home/tiao.png)` }}
-          onClick={() => history.push('/chef')}
-        ></div>
-      </div>
+      {/* 结尾动画 */}
+      <EndVideo
+        lastVideo={lastVideo}
+        delDom='.pvBox'
+        src={dataUrlSame + myData.dance.lastVideo}
+        path='/chef'
+      />
     </div>
   )
 }

Code/src/pages/A5chef/index.module.scss

@@ -298,24 +298,5 @@
       opacity: 1;
       pointer-events: auto;
     }
-
-    // 最后视频
-    .A5last {
-      width: 100%;
-      height: 100%;
-      position: absolute;
-      top: 0;
-      left: 0;
-      width: 100%;
-      height: 100%;
-      z-index: 20;
-      opacity: 0;
-      pointer-events: none;
-      transition: opacity 1s;
-    }
-    .A5lastAc {
-      opacity: 1;
-      pointer-events: auto;
-    }
   }
 }

Code/src/pages/A5chef/index.tsx

@@ -6,6 +6,7 @@ import { myData } from '@/utils/http'
 import { domDelOwnFu } from '@/utils/utilsSome'
 import history from '@/utils/history'
 import { ArrowRightOutlined } from '@ant-design/icons'
+import EndVideo from '@/components/EndVideo'
 
 function A5chef() {
   const { dataUrlSame } = useDataUrl()
@@ -40,17 +41,6 @@ function A5chef() {
 
   // 点击 跳下一个章节
   const [lastVideo, setLastVideo] = useState(false)
-  const videoRefLast = useRef<HTMLVideoElement>(null)
-
-  const lastVideoFu = useCallback(() => {
-    setLastVideo(true)
-
-    setTimeout(() => {
-      if (videoRefLast.current) {
-        videoRefLast.current.play()
-      }
-    }, 100)
-  }, [])
 
   // 点击后厨群像
   const [chuShow, setChuShow] = useState(false)
@@ -156,7 +146,7 @@ function A5chef() {
           {/* 跳到下一章 */}
           <div className='pvBtn'>
             <img src={`${dataUrlSame}visit/btn.png`} alt='' />
-            <div onClick={lastVideoFu}>
+            <div onClick={() => setLastVideo(true)}>
               田间耕作
               <ArrowRightOutlined />
             </div>
@@ -200,21 +190,13 @@ function A5chef() {
         </div>
       ))}
 
-      {/* 最后一个过长动画 */}
-      <div className={classNames('A5last', lastVideo ? 'A5lastAc' : '')}>
-        <video
-          ref={videoRefLast}
-          playsInline
-          muted
-          webkit-playsinline='true'
-          x5-video-player-type='h5'
-          src={dataUrlSame + myData.visit.lastVideo}
-          onEnded={() => history.push('/plow')}
-        >
-          <source type='video/mp4' />
-          Your browser does not support the video tag.
-        </video>
-      </div>
+      {/* 结尾动画 */}
+      <EndVideo
+        lastVideo={lastVideo}
+        src={dataUrlSame + myData.chef.lastVideo}
+        path='/plow'
+        noBtn={true}
+      />
     </div>
   )
 }

Code/src/types/declaration.d.ts

@@ -90,6 +90,7 @@ type MyDataType = {
     txt: string
   }[]
   chef: {
+    lastVideo: string
     baseImg: string
     houChuImg: string
     hot: {