upp

Code/public/index.html

@@ -7,7 +7,15 @@
     <meta name="description" content="Web site created using create-react-app" />
     <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
     <link rel="shortcut icon" href="./favicon.ico" type="image/x-icon" />
-    <script src="./myData.js"></script>
+    <script src="./myData/myData.js"></script>
+
+    <style>
+      @font-face {
+        font-family: 'qfk';
+        src: url('./myData/qfk.TTF');
+      }
+    </style>
+
     <!--
       manifest.json provides metadata used when your web app is installed on a
       user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/

Code/public/myData.js

@@ -1,58 +0,0 @@
-// 本地开发静态资源目录
-const baseUrlLoc = 'http://192.168.20.55:8080/staticData/'
-
-// Build开发资源目录
-const baseUrlAtl = 'xxxxxxxxxxxxxxxxx/staticData/'
-
-// 一些动态配置的数据
-const myDataTemp = {
-  // HH:横屏  SS:竖屏
-
-  // 如果横屏竖屏用同样的数据，只需要在HH(横屏中放一份就可以了)
-
-  // 首页(静态资源目录位置：staticData/（HH或者SS）/home)
-  home: {
-    // 开场动画视频名字
-    videoSta: 'base.mp4',
-    // 5个动画名字（这里暂时写3个，后面自己加/减）
-    // 倒数第二个 是5个动画播放完之后的动画
-    // 最后一个 是点击开始之后的过度长动画
-    video: [
-      {
-        sort: 1, //排序
-        name: '1.mp4' //名字
-      },
-      {
-        sort: 2, //排序
-        name: '2.mp4' //名字
-      },
-      {
-        sort: 3, //排序
-        name: '3.mp4' //名字
-      },
-      // 倒数第二个
-      {
-        sort: 4, //排序
-        name: 'lastButOne.mp4' //名字
-      },
-      // 最后一个
-      {
-        sort: 5, //排序
-        name: 'end.mp4' //名字
-      }
-    ]
-  },
-
-  // 车骑拜谒
-  visit: {
-    // 开场动画视频名字
-    videoSta: 'base.mp4',
-    // 视频数组
-    video: [
-      {
-        sort: 1, //排序
-        name: '1.mp4' //名字
-      }
-    ]
-  }
-}

Code/public/myData/myData.js

@@ -0,0 +1,37 @@
+// 本地开发静态资源目录
+const baseUrlLoc = 'http://192.168.20.55:8080/staticData/'
+
+// Build开发资源目录
+const baseUrlAtl = 'xxxxxxxxxxxxxxxxx/staticData/'
+
+// 一些动态配置的数据
+const myDataTemp = {
+  // HH:横屏  SS:竖屏
+
+  // 如果横屏竖屏用同样的数据，只需要在HH(横屏中放一份就可以了)
+
+  // 首页(静态资源目录位置：staticData/（HH或者SS）/home)
+  home: {
+    // 背景图路径+名字
+    bgImg: 'home/bg.jpg',
+    // 开场序列帧路径+名字
+    moveImg: 'home/move.png',
+    // 5个动画路径+名字（这里暂时写4个，后面自己加/减）
+    videos: ['home/1.mp4', 'home/2.mp4', 'home/3.mp4', 'home/4.mp4'],
+    // 最后的过长动画路径+名字
+    lastVideo: 'home/end.mp4'
+  },
+
+  // 车骑拜谒(静态资源目录位置：staticData/（HH或者SS）/visit)
+  visit: {
+    // 开场动画视频名字
+    videoSta: 'visit/base.mp4',
+    // 视频数组
+    video: [
+      {
+        sort: 1, //排序
+        name: 'visit/1.mp4' //名字
+      }
+    ]
+  }
+}

Code/src/App.tsx

@@ -8,33 +8,39 @@ import SpinLoding from './components/SpinLoding'
 import NotFound from '@/components/NotFound'
 import store, { RootState } from './store'
 import { useSelector } from 'react-redux'
+import { isLoc } from './utils/http'
 const A1home = React.lazy(() => import('./pages/A1home'))
 const A2visit = React.lazy(() => import('./pages/A2visit'))
+const Text = React.lazy(() => import('./pages/Text'))
 
 export default function App() {
+  useEffect(() => {
+    // 打包环境 刷新页面从 首页 开始
+    if (!isLoc) {
+      if (window.location.hash !== '#/') {
+        window.location.href = window.location.origin
+      }
+    }
+  }, [])
+
   // 根元素
   const rootRef = useRef<any>(null)
 
   // 是否是横屏，默认是false
   const isHH = useSelector((state: RootState) => state.A0Layout.isHH)
 
-  // 移动端存下来 最小屏幕数据 防止打开输入框的时候压缩高度
-  const moBaseObj = useRef(0)
-
-  useEffect(() => {
-    // 横竖屏变化的时候存 初始高度
-    moBaseObj.current = document.documentElement.clientHeight
-  }, [isHH])
+  useEffect(() => {}, [isHH])
 
   const timeRef = useRef(-1)
 
   const pageFullChangeFu = useCallback(() => {
     let width = document.documentElement.clientWidth
     let height = document.documentElement.clientHeight
-    let isHH = false
+    let isHHTemp = false
+
     if (width >= height) {
       //横屏
-      isHH = true
+      isHHTemp = true
       // 最大宽度1200px
       // if (width >= 1200) {
       //   width = 1200
@@ -42,17 +48,12 @@ export default function App() {
       // }
     } else {
       // 竖屏
-      width = width >= 800 ? 800 : width
-      isHH = false
+      // width = width >= 800 ? 800 : width
+      isHHTemp = false
     }
-    store.dispatch({ type: 'layout/isHH', payload: isHH })
+    store.dispatch({ type: 'layout/isHH', payload: isHHTemp })
     clearTimeout(timeRef.current)
     timeRef.current = window.setTimeout(() => {
-      // && width < 1200
-      if (height < moBaseObj.current) {
-        // 打开了键盘
-        height = moBaseObj.current
-      }
       rootRef.current.style.width = width + 'px'
       rootRef.current.style.height = height + 'px'
     }, 100)
@@ -75,6 +76,7 @@ export default function App() {
           <Switch>
             <Route path='/' component={A1home} exact />
             <Route path='/visit' component={A2visit} exact />
+            <Route path='/text' component={Text} exact />
             <Route path='*' component={NotFound} />
           </Switch>
         </React.Suspense>

Code/src/assets/styles/base.css

@@ -4,6 +4,7 @@
   box-sizing: border-box;
   word-wrap: break-word;
   -webkit-tap-highlight-color: transparent;
+  font-family: qfk;
 }
 /* 全局css变量 */
 :root {
@@ -21,7 +22,6 @@ body {
   height: 100%;
   color: black;
   overflow: auto;
-  background-color: rgba(0, 0, 0, 0.8);
 }
 #root {
   overflow: hidden;

Code/src/assets/styles/base.less

@@ -4,6 +4,7 @@
   box-sizing: border-box;
   word-wrap: break-word;
   -webkit-tap-highlight-color: transparent;
+  font-family: qfk;
 }
 
 /* 全局css变量 */
@@ -25,7 +26,7 @@ body {
   height: 100%;
   color: black;
   overflow: auto;
-  background-color: rgba(0, 0, 0, 0.8);
+  // background-color: rgba(0, 0, 0, 0.8);
 }
 
 #root {

Code/src/components/ownUse/UseDataUrl.tsx

@@ -3,7 +3,7 @@ import { baseURLTemp } from '@/utils/http'
 import { useCallback, useEffect, useState } from 'react'
 import { useSelector } from 'react-redux'
 
-export default function useDataUrl(url: string) {
+export default function useDataUrl() {
   // 是否是横屏，默认是false
   const isHH = useSelector((state: RootState) => state.A0Layout.isHH)
 
@@ -11,8 +11,8 @@ export default function useDataUrl(url: string) {
 
   const baseUrlChangeFu = useCallback(() => {
     const temp = isHH ? 'HH/' : 'SS/'
-    setDataUrl(baseURLTemp + temp + url)
-  }, [isHH, url])
+    setDataUrl(baseURLTemp + temp)
+  }, [isHH])
 
   useEffect(() => {
     baseUrlChangeFu()
@@ -22,8 +22,8 @@ export default function useDataUrl(url: string) {
   const [dataUrlSame, setDataUrlSame] = useState('')
 
   useEffect(() => {
-    setDataUrlSame(baseURLTemp + 'HH/' + url)
-  }, [url])
+    setDataUrlSame(baseURLTemp + 'HH/')
+  }, [])
 
   return {
     dataUrl,

Code/src/pages/A1home/index copy.tsx

@@ -0,0 +1,230 @@
+import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react'
+import styles from './index.module.scss'
+import { myData } from '@/utils/http'
+import { domDelOwnFu, videoLodingNumFu } from '@/utils/xhrVideo'
+import classNames from 'classnames'
+import useMove from '@/components/ownUse/useMove'
+import useDataUrl from '@/components/ownUse/useDataUrl'
+import history from '@/utils/history'
+
+function A1home() {
+  const { dataUrlSame } = useDataUrl()
+
+  const { touchstart, touchmove, touchend } = useMove()
+
+  // 动画视频的ref
+  const videoRef = useRef<HTMLVideoElement>(null)
+
+  // 当前视频索引
+  const [videoInd, setVideoInd] = useState(-1)
+
+  useEffect(() => {
+    if (videoInd > -1) {
+      setTimeout(() => {
+        if (videoRef.current) {
+          videoRef.current.currentTime = 0
+          videoRef.current.play()
+        }
+      }, 100)
+    }
+  }, [videoInd])
+
+  const [loding, setLoding] = useState(0)
+
+  const lodingRef = useRef(0)
+
+  useEffect(() => {
+    lodingRef.current = loding
+  }, [loding])
+
+  useEffect(() => {
+    if (loding >= 100) {
+      setVideoInd(0)
+      // 0.5s之后删除自己
+      setTimeout(() => {
+        domDelOwnFu('.A1base')
+      }, 500)
+    }
+  }, [loding])
+
+  const lodingIng = useRef(0)
+
+  // 5个动画视频的总长度
+  const lodingNumRef = useRef(0)
+
+  // 加载完成之后的bolo地址
+  const videoSrcArrRef = useRef<{ sort: number; name: string }[]>([])
+
+  const [videoSrcArr, setVideoSrcArr] = useState<string[]>([])
+
+  // 通过blob预加载 src为原视频的视频地址
+  const videoLodingFu = useCallback((src: string, sort: number) => {
+    return new Promise((resolve, reject) => {
+      const req = new XMLHttpRequest()
+      req.open('GET', src, true)
+      req.responseType = 'blob'
+
+      req.onprogress = function (event) {
+        if (lodingNumRef.current) {
+          const num = lodingIng.current + event.loaded
+
+          let percent = (num / lodingNumRef.current) * 100
+
+          percent = Number(percent.toFixed(0))
+
+          if (lodingRef.current < percent) setLoding(percent)
+        }
+      }
+
+      req.onload = function (event) {
+        lodingIng.current += event.total
+        if (this.status === 200) {
+          const videoBlob = this.response
+          const blobSrc = URL.createObjectURL(videoBlob)
+          videoSrcArrRef.current.push({ sort, name: blobSrc })
+          if (videoSrcArrRef.current.length === myData.home.videos.length) {
+            videoSrcArrRef.current = videoSrcArrRef.current.sort((a, b) => a.sort - b.sort)
+            setVideoSrcArr(videoSrcArrRef.current.map(v => v.name))
+
+            // 存到仓库
+          }
+        }
+      }
+      req.send()
+    })
+  }, [])
+
+  const getVideoNum = useCallback(() => {
+    // const aaaa = [
+    //   { sort: 1, name: 'https://houseoss.4dkankan.com/project/henan/1.mp4' },
+    //   { sort: 2, name: 'https://houseoss.4dkankan.com/project/henan/2.mp4' },
+    //   { sort: 3, name: 'https://houseoss.4dkankan.com/project/henan/3.mp4' },
+    //   { sort: 4, name: 'https://houseoss.4dkankan.com/project/henan/2.mp4' },
+    //   { sort: 5, name: 'https://houseoss.4dkankan.com/project/henan/1.mp4' }
+    // ]
+    // aaaa.forEach(async v => {
+    //   const temp = await videoLodingNumFu(`${v.name}`)
+    //   lodingNumRef.current += temp
+    //   await videoLodingFu(`${v.name}`, v.sort)
+    // })
+    // myData.home.videos.forEach(async v => {
+    //   const temp = await videoLodingNumFu(`${dataUrlSame}/${v.name}`)
+    //   lodingNumRef.current += temp
+    //   await videoLodingFu(`${dataUrlSame}/${v.name}`, v.sort)
+    // })
+  }, [dataUrlSame, videoLodingFu])
+
+  useEffect(() => {
+    if (dataUrlSame) {
+      getVideoNum()
+    }
+  }, [dataUrlSame, getVideoNum])
+
+  // 视频播完 或者 点击下一步
+  const videoEndFu = useCallback(
+    (num: number) => {
+      // 这个页面只能往下滑
+      if (num === -1) return
+
+      if (videoInd === myData.home.videos.length - 2 && num === 1) return
+      if (videoInd === 0 && num === -1) return
+      setVideoInd(videoInd + num)
+    },
+    [videoInd]
+  )
+  const onSwipeChange = useCallback(
+    (val: number) => {
+      videoEndFu(val)
+    },
+    [videoEndFu]
+  )
+
+  // 是否滑到了倒数第二个
+  const isLastButOne = useMemo(() => {
+    let flag = false
+    if (videoInd === myData.home.videos.length - 2) flag = true
+    return flag
+  }, [videoInd])
+
+  // 是否到了最后一个
+  const isLastVideo = useMemo(() => {
+    let flag = false
+    if (videoInd === myData.home.videos.length - 1) flag = true
+    return flag
+  }, [videoInd])
+
+  return (
+    <div className={styles.A1home}>
+      {/* 加载页面 */}
+      <div className={classNames('A1base', videoInd < 0 ? '' : 'A1baseHide')}>
+        <img src={`${dataUrlSame}/logo.png`} alt='' />
+
+        <div className='A1loding'>{loding}%</div>
+      </div>
+
+      {/* 5个视频动画页面 */}
+      {videoInd > -1 && videoSrcArr.length ? (
+        <>
+          {isLastVideo ? (
+            <div className='A1videoLast'>
+              <video
+                ref={videoRef}
+                src={videoSrcArr[videoSrcArr.length - 1]}
+                playsInline
+                muted
+                webkit-playsinline='true'
+                x5-video-player-type='h5'
+                onEnded={() => history.push('/visit')}
+              />
+              <div
+                className='A1videoLastBtn'
+                style={{ backgroundImage: `url(${dataUrlSame}/quan.png)` }}
+                onClick={() => history.push('/visit')}
+              >
+                跳 过
+              </div>
+            </div>
+          ) : (
+            <div
+              className='A1video'
+              onTouchStart={e => touchstart(e.touches[0].pageY)}
+              onTouchMove={e => touchmove(e.touches[0].pageY)}
+              onTouchEnd={() => touchend(val => onSwipeChange(val), 'mobile')}
+              onMouseDown={e => touchstart(e.pageY)}
+              onMouseMove={e => touchmove(e.pageY)}
+              onMouseUp={() => touchend(val => onSwipeChange(val), 'pc')}
+            >
+              <video
+                ref={videoRef}
+                src={videoSrcArr[videoInd]}
+                playsInline
+                muted
+                webkit-playsinline='true'
+                x5-video-player-type='h5'
+                // onEnded={() => videoEndFu(1)}
+                loop={videoInd === videoSrcArr.length - 2}
+              />
+              {isLastButOne ? (
+                <>
+                  <img className='A1videoBtnLogo' src={`${dataUrlSame}/logo.png`} alt='' />
+                  <img
+                    className='A1videoBtn'
+                    onClick={() => setVideoInd(videoSrcArr.length - 1)}
+                    src={`${dataUrlSame}/nextLast.png`}
+                    alt=''
+                  />
+                </>
+              ) : (
+                <img onClick={() => videoEndFu(1)} src={`${dataUrlSame}/next.png`} alt='' />
+              )}
+            </div>
+          )}
+        </>
+      ) : null}
+    </div>
+  )
+}
+
+const MemoA1home = React.memo(A1home)
+
+export default MemoA1home

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

@@ -9,9 +9,10 @@
       width: 100%;
       height: 100%;
       position: absolute;
-      z-index: 10;
+      z-index: 20;
       opacity: 1;
       transition: opacity 0.5s;
+      background-size: 100% 100%;
       & > img {
         position: absolute;
         top: 56px;
@@ -20,70 +21,133 @@
         transform: translateX(-50%);
       }
       .A1loding {
+        font-size: 18px;
         position: absolute;
+        z-index: 10;
         bottom: 20px;
         left: 50%;
         transform: translateX(-50%);
         color: #733c00;
       }
+      .A1lodingBtn {
+        width: 100px;
+        height: auto;
+        bottom: 40px;
+        & > img {
+          width: 100px;
+          height: auto;
+        }
+        & > div {
+          position: absolute;
+          top: 0;
+          left: 0;
+          width: 100%;
+          height: 100%;
+          display: flex;
+          justify-content: center;
+          align-items: center;
+          color: #fffddc;
+          font-size: 16px;
+        }
+      }
     }
     .A1baseHide {
       opacity: 0;
       pointer-events: none;
     }
 
-    .A1video {
+    .A1videoBox {
       width: 100%;
-      height: 100%;
+      overflow: hidden;
       position: relative;
-      & > img {
+      z-index: 10;
+      opacity: 1;
+      transition: all 0.5s;
+      & > div {
+        width: 100%;
+        position: relative;
+      }
+    }
+    .A1videoBoxHide {
+      opacity: 0;
+      pointer-events: none;
+    }
+
+    // 操作按钮
+    .A1btnBox {
+      width: 100%;
+      height: 100%;
+      z-index: 18;
+      position: absolute;
+      top: 0;
+      left: 0;
+      & > div {
+        position: relative;
+        width: 100%;
+        height: 100%;
+        opacity: 0;
+        transition: opacity 1s;
+        .A1videoBtnLogo {
+          position: absolute;
+          pointer-events: none;
+          top: 56px;
+          width: 280px;
+          height: auto;
+          left: 50%;
+          transform: translateX(-50%);
+        }
+
+        .A1videoBtnNext {
+          cursor: pointer;
+          position: absolute;
+          z-index: 10;
+          bottom: 20px;
+          left: 50%;
+          transform: translateX(-50%);
+          color: #fffddc;
+          font-size: 16px;
+          text-align: center;
+          width: 100px;
+          & > img {
+            width: 60px;
+            height: auto;
+          }
+        }
+      }
+      .A1videoBtnBoxShow {
+        opacity: 1;
+      }
+
+      .A1videoBtn {
         cursor: pointer;
         position: absolute;
         z-index: 10;
         bottom: 20px;
         left: 50%;
         transform: translateX(-50%);
-        width: 30px;
-        height: 30px;
-      }
-      .A1videoBtnLogo {
-        position: absolute;
-        pointer-events: none;
-        top: 56px;
-        width: 280px;
+        width: 40px;
         height: auto;
-        left: 50%;
-        transform: translateX(-50%);
-      }
-      .A1videoBtn {
-        position: absolute;
-        width: 50px;
-        height: 50px;
-        bottom: 30px;
-        left: 50%;
-        transform: translateX(-50%);
-        cursor: pointer;
       }
     }
 
-    .A1videoLast {
+    .A1last {
       width: 100%;
       height: 100%;
       position: relative;
       .A1videoLastBtn {
-        bottom: 20px;
-        right: 20px;
         position: absolute;
         width: 50px;
         height: 50px;
         cursor: pointer;
+        bottom: 20px;
+        right: 20px;
         display: flex;
         justify-content: center;
         align-items: center;
         color: #733c00;
-        background-image: url();
         background-size: 100% 100%;
-        font-weight: 700;
+        font-size: 20px;
+        padding-bottom: 4px;
       }
     }
 

Code/src/pages/A1home/index.tsx

@@ -1,213 +1,196 @@
-import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react'
+import React, { useCallback, useEffect, useRef, useState } from 'react'
 import styles from './index.module.scss'
+import useDataUrl from '@/components/ownUse/useDataUrl'
+import useMove from '@/components/ownUse/useMove'
 import { myData } from '@/utils/http'
-import { domDelOwnFu, videoLodingNumFu } from '@/utils/xhrVideo'
 import classNames from 'classnames'
-import useMove from '@/components/ownUse/useMove'
-import useDataUrl from '@/components/ownUse/useDataUrl'
+import { domDelOwnFu } from '@/utils/xhrVideo'
 import history from '@/utils/history'
 
 function A1home() {
-  const { dataUrlSame } = useDataUrl('home')
+  const { dataUrlSame } = useDataUrl()
 
   const { touchstart, touchmove, touchend } = useMove()
 
   // 动画视频的ref
   const videoRef = useRef<HTMLVideoElement>(null)
 
-  // 当前视频索引
-  const [videoInd, setVideoInd] = useState(-1)
+  const [loding, setLoding] = useState(100)
 
-  useEffect(() => {
-    if (videoInd > -1) {
-      setTimeout(() => {
-        if (videoRef.current) {
-          videoRef.current.currentTime = 0
-          videoRef.current.play()
-        }
-      }, 100)
-    }
-  }, [videoInd])
-
-  const [loding, setLoding] = useState(0)
+  const timeRR = useRef(-1)
 
   useEffect(() => {
-    if (loding >= 100) {
-      setVideoInd(0)
-      // 0.5s之后删除自己
-      setTimeout(() => {
-        domDelOwnFu('.A1base')
-      }, 500)
-    }
+    clearInterval(timeRR.current)
+    timeRR.current = window.setInterval(() => {
+      if (loding >= 100) {
+        clearInterval(timeRR.current)
+        return
+      }
+      setLoding(loding + 1)
+    }, 50)
   }, [loding])
 
-  const lodingIng = useRef(0)
+  // 点击开始
+  const btnStartFu = useCallback(() => {
+    setLoding(110)
+    // 自动播放视频
+    setTimeout(() => {
+      if (videoRef.current) {
+        videoRef.current.play()
+      }
+    }, 100)
 
-  // 5个动画视频的总长度
-  const lodingNumRef = useRef(0)
+    // 0.5s之后删除自己
+    setTimeout(() => {
+      domDelOwnFu('.A1base')
+    }, 500)
+  }, [])
 
-  // 加载完成之后的bolo地址
-  const videoSrcArrRef = useRef<{ sort: number; name: string }[]>([])
+  const [ind, setInd] = useState(0)
 
-  const [videoSrcArr, setVideoSrcArr] = useState<string[]>([])
+  // 向上滑动
+  const videoEndFu = useCallback(
+    (num: number) => {
+      // 这个页面只能向上滑
+      if (num === -1) return
+      if (ind === myData.home.videos.length - 1 && num === 1) return
 
-  // 通过blob预加载 src为原视频的视频地址
-  const videoLodingFu = useCallback((src: string, sort: number) => {
-    return new Promise((resolve, reject) => {
-      const req = new XMLHttpRequest()
-      req.open('GET', src, true)
-      req.responseType = 'blob'
+      setInd(ind + num)
+    },
+    [ind]
+  )
 
-      req.onprogress = function (event) {
-        if (lodingNumRef.current) {
-          const num = lodingIng.current + event.loaded
+  useEffect(() => {
+    if (ind !== 0) {
+      setTimeout(() => {
+        const domAll: any = document.querySelectorAll('.A1videoBoxSon video')
+        if (domAll && domAll.length) {
+          domAll.forEach((v: HTMLVideoElement, i: number) => {
+            if (ind === i) v.play()
+            else v.pause()
+          })
+        }
+      }, 100)
+    }
+  }, [ind])
 
-          let percent = (num / lodingNumRef.current) * 100
+  // 最后一个过长动画
+  const [lastVideo, setLastVideo] = useState(false)
 
-          percent = Number(percent.toFixed(0))
+  const videoRefLast = useRef<HTMLVideoElement>(null)
 
-          setLoding(percent)
-        }
-      }
+  const lastVideoFu = useCallback(() => {
+    setLastVideo(true)
 
-      req.onload = function (event) {
-        lodingIng.current += event.total
-        if (this.status === 200) {
-          const videoBlob = this.response
-          const blobSrc = URL.createObjectURL(videoBlob)
-          videoSrcArrRef.current.push({ sort, name: blobSrc })
-          if (videoSrcArrRef.current.length === myData.home.video.length) {
-            videoSrcArrRef.current = videoSrcArrRef.current.sort((a, b) => a.sort - b.sort)
-            setVideoSrcArr(videoSrcArrRef.current.map(v => v.name))
-          }
-        }
+    setTimeout(() => {
+      if (videoRefLast.current) {
+        videoRefLast.current.play()
       }
-      req.send()
-    })
-  }, [])
-
-  const getVideoNum = useCallback(() => {
-    myData.home.video.forEach(async v => {
-      const temp = await videoLodingNumFu(`${dataUrlSame}/${v.name}`)
-      lodingNumRef.current += temp
-
-      await videoLodingFu(`${dataUrlSame}/${v.name}`, v.sort)
-    })
-  }, [dataUrlSame, videoLodingFu])
+    }, 100)
 
-  useEffect(() => {
-    if (dataUrlSame) {
-      getVideoNum()
-    }
-  }, [dataUrlSame, getVideoNum])
+    // 0.5s之后删除自己
+    setTimeout(() => {
+      domDelOwnFu('.A1videoBox')
+    }, 500)
+  }, [])
 
-  // 视频播完 或者 点击下一步
-  const videoEndFu = useCallback(
-    (num: number) => {
-      if (videoInd === myData.home.video.length - 2 && num === 1) return
-      if (videoInd === 0 && num === -1) return
-      setVideoInd(videoInd + num)
-    },
-    [videoInd]
-  )
-  const onSwipeChange = useCallback(
-    (val: number) => {
-      videoEndFu(val)
-    },
-    [videoEndFu]
-  )
+  return (
+    <div className={styles.A1home}>
+      {/* 初始加载画面 */}
+      <div
+        className={classNames('A1base', loding === 110 ? 'A1baseHide' : '')}
+        style={{ backgroundImage: `url(${dataUrlSame}${myData.home.bgImg})` }}
+      >
+        <img src={`${dataUrlSame}home/logo.png`} alt='' />
+        {loding >= 100 ? (
+          <div className='A1loding A1lodingBtn' onClick={btnStartFu}>
+            <img src={`${dataUrlSame}visit/btn.png`} alt='' />
+            <div>开始</div>
+          </div>
+        ) : (
+          <div className='A1loding'>{loding}%</div>
+        )}
+      </div>
 
-  // 是否滑到了倒数第二个
-  const isLastButOne = useMemo(() => {
-    let flag = false
-    if (videoInd === myData.home.video.length - 2) flag = true
-    return flag
-  }, [videoInd])
+      {/* 5个动画视频 */}
+      <div
+        className={classNames('A1videoBox', lastVideo || loding !== 110 ? 'A1videoBoxHide' : '')}
+        style={{
+          transform: `translateY(-${(100 / myData.home.videos.length) * ind}%)`,
+          height: `${100 * myData.home.videos.length}%`
+        }}
+      >
+        {myData.home.videos.map((url, index) => (
+          <div
+            key={index}
+            style={{ height: 100 / myData.home.videos.length + '%' }}
+            className='A1videoBoxSon'
+          >
+            <video
+              ref={ind === index ? videoRef : null}
+              playsInline
+              muted
+              webkit-playsinline='true'
+              x5-video-player-type='h5'
+              src={dataUrlSame + url}
+            >
+              <source type='video/mp4' />
+              Your browser does not support the video tag.
+            </video>
+          </div>
+        ))}
+      </div>
 
-  // 是否到了最后一个
-  const isLastVideo = useMemo(() => {
-    let flag = false
-    if (videoInd === myData.home.video.length - 1) flag = true
-    return flag
-  }, [videoInd])
+      {/* 操作按钮 */}
+      {loding !== 110 || lastVideo ? null : (
+        <div
+          className='A1btnBox'
+          onTouchStart={e => touchstart(e.touches[0].pageY)}
+          onTouchMove={e => touchmove(e.touches[0].pageY)}
+          onTouchEnd={() => touchend(val => videoEndFu(val), 'mobile')}
+          onMouseDown={e => touchstart(e.pageY)}
+          onMouseMove={e => touchmove(e.pageY)}
+          onMouseUp={() => touchend(val => videoEndFu(val), 'pc')}
+        >
+          <img
+            hidden={ind === myData.home.videos.length - 1}
+            className='A1videoBtn'
+            onClick={() => videoEndFu(1)}
+            src={`${dataUrlSame}home/next.png`}
+            alt=''
+          />
+          <div className={ind === myData.home.videos.length - 1 ? 'A1videoBtnBoxShow' : ''}>
+            <img className='A1videoBtnLogo' src={`${dataUrlSame}home/logo.png`} alt='' />
+            <div className='A1videoBtnNext' onClick={lastVideoFu}>
+              <img src={`${dataUrlSame}home/nextLast.png`} alt='' />
+              <p>点击开始</p>
+            </div>
+          </div>
+        </div>
+      )}
 
-  return (
-    <div className={styles.A1home}>
-      {/* 加载页面 */}
-      <div className={classNames('A1base', videoInd < 0 ? '' : 'A1baseHide')}>
-        <img src={`${dataUrlSame}/logo.png`} alt='' />
+      {/* 最后一个过长动画 */}
+      <div className='A1last'>
         <video
-          src={`${dataUrlSame}/${myData.home.videoSta}`}
+          ref={videoRefLast}
           playsInline
           muted
           webkit-playsinline='true'
           x5-video-player-type='h5'
-          autoPlay
-          loop
-        />
-
-        <div className='A1loding'>{loding}%</div>
+          src={dataUrlSame + myData.home.lastVideo}
+          onEnded={() => history.push('/visit')}
+        >
+          <source type='video/mp4' />
+          Your browser does not support the video tag.
+        </video>
+        <div
+          className='A1videoLastBtn'
+          style={{ backgroundImage: `url(${dataUrlSame}home/quan.png)` }}
+          onClick={() => history.push('/visit')}
+        >
+          跳过
+        </div>
       </div>
-
-      {/* 5个视频动画页面 */}
-      {videoInd > -1 && videoSrcArr.length ? (
-        <>
-          {isLastVideo ? (
-            <div className='A1videoLast'>
-              <video
-                ref={videoRef}
-                src={videoSrcArr[videoSrcArr.length - 1]}
-                playsInline
-                muted
-                webkit-playsinline='true'
-                x5-video-player-type='h5'
-                onEnded={() => history.push('/visit')}
-              />
-              <div
-                className='A1videoLastBtn'
-                style={{ backgroundImage: `url(${dataUrlSame}/quan.png)` }}
-                onClick={() => history.push('/visit')}
-              >
-                跳 过
-              </div>
-            </div>
-          ) : (
-            <div
-              className='A1video'
-              onTouchStart={e => touchstart(e.touches[0].pageY)}
-              onTouchMove={e => touchmove(e.touches[0].pageY)}
-              onTouchEnd={() => touchend(val => onSwipeChange(val), 'mobile')}
-              onMouseDown={e => touchstart(e.pageY)}
-              onMouseMove={e => touchmove(e.pageY)}
-              onMouseUp={() => touchend(val => onSwipeChange(val), 'pc')}
-            >
-              <video
-                ref={videoRef}
-                src={videoSrcArr[videoInd]}
-                playsInline
-                muted
-                webkit-playsinline='true'
-                x5-video-player-type='h5'
-                onEnded={() => videoEndFu(1)}
-                loop={videoInd === videoSrcArr.length - 2}
-              />
-              {isLastButOne ? (
-                <>
-                  <img className='A1videoBtnLogo' src={`${dataUrlSame}/logo.png`} alt='' />
-                  <img
-                    className='A1videoBtn'
-                    onClick={() => setVideoInd(videoSrcArr.length - 1)}
-                    src={`${dataUrlSame}/nextLast.png`}
-                    alt=''
-                  />
-                </>
-              ) : (
-                <img onClick={() => videoEndFu(1)} src={`${dataUrlSame}/next.png`} alt='' />
-              )}
-            </div>
-          )}
-        </>
-      ) : null}
     </div>
   )
 }

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

@@ -36,7 +36,6 @@
           top: 0;
           left: 0;
           color: #fffddc;
-          font-weight: 700;
           width: 100%;
           height: 100%;
           display: flex;

Code/src/pages/A2visit/index.tsx

@@ -6,7 +6,7 @@ import { myData } from '@/utils/http'
 import { domDelOwnFu, videoLodingNumFu } from '@/utils/xhrVideo'
 
 function A2visit() {
-  const { dataUrlSame } = useDataUrl('visit')
+  const { dataUrlSame } = useDataUrl()
 
   // 动画视频的ref
   const videoRef = useRef<HTMLVideoElement>(null)
@@ -110,9 +110,9 @@ function A2visit() {
     <div className={styles.A2visit}>
       {/* 加载页面 */}
       <div className={classNames('A2base', videoInd < 0 ? '' : 'A2baseHide')}>
-        <img src={`${dataUrlSame}/mulu.png`} alt='' />
+        <img src={`${dataUrlSame}visit/mulu.png`} alt='' />
         <div className='A2baseBtn'>
-          <img src={`${dataUrlSame}/btn.png`} alt='' />
+          <img src={`${dataUrlSame}visit/btn.png`} alt='' />
           <div className='A2Btxt' onClick={btnStart}>
             {loding >= 100 ? '点击开始' : '加载中'}
           </div>

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

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

Code/src/pages/Text/index.tsx

@@ -0,0 +1,47 @@
+import React, { useEffect } from 'react'
+import styles from './index.module.scss'
+function Text() {
+  useEffect(() => {
+    const video: any = document.getElementById('myVideo')
+    // const progressBar: any = document.getElementById('progressBar')
+
+    // video.addEventListener('progress', function () {
+    //   const total = video.duration
+
+    //   console.log('123', total)
+
+    //   if (total > 0) {
+    //     console.log('cccc', video.buffered)
+
+    //     if (video.buffered) {
+    //       const end = video.buffered.end(0)
+    //       const preloadProgress = (end / total) * 100
+
+    //       console.log('----', total, preloadProgress)
+
+    //       progressBar.value = preloadProgress
+    //     }
+
+    //     // const start = video.buffered.start(0)
+    //   }
+    // })
+
+    video.play()
+  }, [])
+
+  return (
+    <div className={styles.Text}>
+      <video id='myVideo' width='320' height='240' muted controls>
+        <source src='https://houseoss.4dkankan.com/project/henan/3.mp4' type='video/mp4' />
+        Your browser does not support the video tag.
+      </video>
+      <div id='progressBarContainer'>
+        <progress id='progressBar' value='0' max='100'></progress>
+      </div>
+    </div>
+  )
+}
+
+const MemoText = React.memo(Text)
+
+export default MemoText

Code/src/types/declaration.d.ts

@@ -15,8 +15,10 @@ declare const myDataTemp: MyDataType
 
 type MyDataType = {
   home: {
-    videoSta: string
-    video: { sort: number; name: string }[]
+    bgImg: string
+    moveImg: string
+    videos: string[]
+    lastVideo: string
   }
   visit: {
     videoSta: string