首页中英文流畅切换

src/pages/A1home2/index.module.scss

@@ -6,8 +6,6 @@
 
   :global {
 
-
-
     // 背景图
     .homeImg {
       position: absolute;
@@ -37,8 +35,9 @@
       z-index: 10;
 
       //----------新加的初始视频
-      .A1baseVideo {
-
+      .A1baseVideo,
+      .A1baseVideo2 {
+        background-color: #c7bdab;
         position: absolute;
         top: 0;
         left: 0;
@@ -47,6 +46,7 @@
         z-index: 4;
       }
 
+
       .progress {
         width: 200px;
         height: 30px;

src/pages/A1home2/index.tsx

@@ -17,23 +17,40 @@ function A1home() {
 
   // 开场视频-------------
   const [baseFlag, setBaseFlag] = useState(false)
+  const [baseFlag2, setBaseFlag2] = useState(false)
 
   const moveImg = useRef<any>(null)
+  const moveImg2 = useRef<any>(null)
+
+  // 视频准备
+  const videoCanvasFu = useCallback((val: 'EN' | 'ZH') => {
+    const params = {
+      objectFit: 'cover', // 视频的object-fit样式, 默认 cover
+      loop: true, // 是否循环, 默认false
+      autoplay: false, // 自动播放, 默认false
+      onSourceEstablished: () => {
+        if (val === 'EN') setBaseFlag(true)
+        else setBaseFlag2(true)
+      } //有足够的数据可以播放了
+    }
+
+    if (val === 'EN') {
+      moveImg.current = F_Video(`./myData/baseEN.ts`, params)
+      const dom = document.querySelector(`.A1baseVideo`)!
+      dom.append(moveImg.current.domElement)
+    } else {
+      moveImg2.current = F_Video(`./myData/base.ts`, params)
+      const dom = document.querySelector(`.A1baseVideo2`)!
+      dom.append(moveImg2.current.domElement)
+    }
+  }, [])
+
   useEffect(() => {
     if (baseImg) {
-      const params = {
-        objectFit: 'cover', // 视频的object-fit样式, 默认 cover
-        loop: true, // 是否循环, 默认false
-        autoplay: false, // 自动播放, 默认false
-        onSourceEstablished: () => {
-          setBaseFlag(true)
-        } //有足够的数据可以播放了
-      }
-      moveImg.current = F_Video('./myData/base.ts', params)
-      const dom = document.querySelector('.A1baseVideo')!
-      dom.append(moveImg.current.domElement)
+      videoCanvasFu('EN')
+      videoCanvasFu('ZH')
     }
-  }, [baseImg])
+  }, [baseImg, videoCanvasFu])
 
   const [loadOk, setLoadOk] = useState(false)
   const [progress, setProgress] = useState(0)
@@ -42,18 +59,19 @@ function A1home() {
     if (progress >= 100) {
       // 播放动态视频
       moveImg.current.play()
+      moveImg2.current.play()
     }
   }, [progress])
 
   useEffect(() => {
-    if (baseFlag) {
+    if (baseFlag && baseFlag2) {
       const modalIframe = document.getElementById('modalIframe') as HTMLIFrameElement | null
       if (modalIframe) {
         modalIframe.style.display = 'block'
         modalIframe.src = 'Chenzhebei-ShanxiMuseum/index.html'
       }
     }
-  }, [baseFlag])
+  }, [baseFlag, baseFlag2])
 
   // 过场视频-------------
   const videoRefLast = useRef<HTMLVideoElement>(null)
@@ -62,6 +80,7 @@ function A1home() {
     if (progress >= 100) {
       // 删除第一个动画和封面图
       moveImg.current.destroy()
+      moveImg2.current.destroy()
       domDelOwnFu('.A1baseVideo')
       // domDelOwnFu('.homeImg')
       setLoadOk(true)
@@ -84,12 +103,19 @@ function A1home() {
       <img
         onLoad={() => setBaseImg(true)}
         className='homeImg'
-        src={require('@/assets/sgImg/homeBg.jpg')}
+        src={require(`@/assets/sgImg/homeBg${myLangue === 'EN' ? 'En' : ''}.jpg`)}
         alt=''
       />
 
       <div className='loadingP' style={{ display: loadOk ? 'none' : 'flex' }}>
-        <div className='A1baseVideo' style={{ opacity: progress >= 100 ? 1 : 0 }}></div>
+        <div
+          className='A1baseVideo'
+          style={{ opacity: progress >= 100 ? 1 : 0, zIndex: myLangue === 'EN' ? 4 : 5 }}
+        ></div>
+        <div
+          className='A1baseVideo2'
+          style={{ opacity: progress >= 100 ? 1 : 0, zIndex: myLangue === 'ZH' ? 4 : 5 }}
+        ></div>
 
         <div className='btn' onClick={() => enter()}>
           {progress !== 100 ? (
@@ -109,10 +135,12 @@ function A1home() {
           hidden={progress < 100}
           onClick={() => {
             if (envFlag) {
-              locSetLangue(myLangue === 'ZH' ? 'EN' : 'ZH')
-              setTimeout(() => {
-                window.location.reload()
-              }, 200)
+              const res = myLangue === 'ZH' ? 'EN' : 'ZH'
+              locSetLangue(res)
+
+              // setTimeout(() => {
+              //   window.location.reload()
+              // }, 200)
             } else {
               Toast.show({
                 content: '正在开发中'
@@ -124,7 +152,7 @@ function A1home() {
         </div>
       </div>
       {/* 开场视频 */}
-      {baseFlag ? (
+      {baseFlag && baseFlag2 ? (
         <div className='A1videoBox' style={{ opacity: 1, zIndex: loadOk ? 10 : 0 }}>
           <video
             ref={videoRefLast}
@@ -132,10 +160,9 @@ function A1home() {
             webkit-playsinline='true'
             x5-video-player-type='h5'
             onEnded={() => window.location.replace('#/base')}
-          >
-            <source type='video/mp4' src='./myData/home.mp4' />
-            Your browser does not support the video tag.
-          </video>
+            src={`./myData/home${myLangue === 'EN' ? 'En' : ''}.mp4`}
+          />
+
           {loadOk ? (
             <Skip
               clickFu={() => {

src/utils/history.ts

@@ -29,6 +29,7 @@ export const backPageFu = (path: string) => {
   else window.location.replace(path)
 }
 
+
 // 调用iframe方法
 export const callIframeFu = (fuName: string, params: any,type?:string) => {
   const dom = document.getElementById('modalIframe') as HTMLIFrameElement | null;