up

src/assets/styles/base.css

@@ -6,6 +6,11 @@
   -webkit-tap-highlight-color: transparent;
   font-family: 'SimHei', 'SimSun', 'Microsoft Yahei', 'PingFang SC', 'Avenir', 'Segoe UI', 'Hiragino Sans GB', 'STHeiti', 'Microsoft Sans Serif', 'WenQuanYi Micro Hei', sans-serif;
 }
+video {
+  object-fit: cover;
+  width: 100%;
+  height: 100%;
+}
 /* 全局css变量 */
 :root {
   --themeColor: #733c00;

src/assets/styles/base.less

@@ -8,6 +8,12 @@
     'STHeiti', 'Microsoft Sans Serif', 'WenQuanYi Micro Hei', sans-serif;
 }
 
+video {
+  object-fit: cover;
+  width: 100%;
+  height: 100%;
+}
+
 /* 全局css变量 */
 :root {
   --themeColor: #733c00;

src/pages/A0base/index.tsx

@@ -6,6 +6,10 @@ import { RootState } from '@/store'
 import { Toast } from 'antd-mobile'
 
 function A0base() {
+
+  // 进页面设置unity显示
+  
+
   const { myData, myLangue } = useSelector((state: RootState) => state.A0Layout)
 
   const [currentBase, setCurrentBase] = useState(0)

src/pages/A1home2/index.tsx

@@ -35,8 +35,6 @@ function A1home() {
     }
   }, [baseImg])
 
-  // 开场视频-------------
-  const [videoOk, setVideoOk] = useState(false)
   const [loadOk, setLoadOk] = useState(false)
   const [progress, setProgress] = useState(0)
 
@@ -57,46 +55,8 @@ function A1home() {
     }
   }, [baseFlag])
 
-  const playerRef = useRef<any>(null)
-  useEffect(() => {
-    if (baseFlag) {
-      const params = {
-        objectFit: 'cover', // 视频的object-fit样式, 默认 cover
-        loop: false, // 是否循环, 默认false
-        autoplay: false, // 自动播放, 默认false
-        onPlay: () => {}, // 触发播放事件
-        onPause: () => {}, // 触发暂停事件
-        onEnded: () => {
-          // 视频播放完了
-
-          console.log('home结尾视频播放完毕')
-          window.location.replace('#/base')
-        }, // 触发播放结束事件
-        onSourceEstablished: () => {
-          setVideoOk(true)
-        } //有足够的数据可以播放了
-      }
-      playerRef.current = F_Video('./myData/home.ts', params)
-      const dom = document.querySelector('.A1video')!
-      dom.append(playerRef.current.domElement)
-    }
-  }, [baseFlag])
-
-  const timeRR = useRef(-1)
-  useEffect(() => {
-    if (videoOk) {
-      if (progress === 98) setProgress(100)
-      clearInterval(timeRR.current)
-      timeRR.current = window.setInterval(() => {
-        if (loadOk) {
-          console.log('播放视频')
-          playerRef.current.play()
-          clearInterval(timeRR.current)
-          return
-        }
-      }, 50)
-    }
-  }, [loadOk, progress, videoOk])
+  // 过场视频-------------
+  const videoRefLast = useRef<HTMLVideoElement>(null)
 
   const enter = useCallback(() => {
     if (progress >= 100) {
@@ -105,6 +65,8 @@ function A1home() {
       domDelOwnFu('.A1baseVideo')
       domDelOwnFu('.homeImg')
       setLoadOk(true)
+      // 播放过场视频
+      if (videoRefLast.current) videoRefLast.current.play()
     }
   }, [progress])
 
@@ -112,21 +74,9 @@ function A1home() {
     // 1-10
     window.unityLoading = (progress: number) => {
       // console.log('当前进度', progress * 100 + '%')
-      if (progress * 100 >= 98) {
-        setProgress(98)
-        return
-      }
       setProgress(Number((progress * 100).toFixed(0)))
     }
-  }, [setProgress])
-
-  // 判断是否已经加载好了iframe和视频,如果已经加载好了设置对应进度为100
-  useEffect(() => {
-    const iframe = document.getElementById('modalIframe') as HTMLIFrameElement | null
-    if (iframe && iframe.contentWindow && videoOk && baseFlag) {
-      setProgress(100)
-    }
-  }, [baseFlag, loadOk, videoOk])
+  }, [])
 
   return (
     <div className={classNames(styles.A1home, myLangue === 'ZH' ? '' : styles.A1homeEm)}>
@@ -173,17 +123,22 @@ function A1home() {
           <img src={require(`@/assets/sgImg/${myLangue}.png`)} alt='' />
         </div>
       </div>
-      {/* ------------微信浏览器不让视频自动播放，用ts的方式*/}
+      {/* 开场视频 */}
       {baseFlag ? (
-        <div className='A1videoBox'>
-          <div className='A1video' style={{ opacity: 1 ,zIndex: loadOk?10:0}}></div>
-
+        <div className='A1videoBox' style={{ opacity: 1, zIndex: loadOk ? 10 : 0 }}>
+          <video
+            ref={videoRefLast}
+            playsInline
+            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>
           {loadOk ? (
             <Skip
               clickFu={() => {
-                // 删除第二个动画
-                playerRef.current.destroy()
-                domDelOwnFu('.A1video')
                 window.location.replace('#/base')
               }}
             />

src/pages/A6ybwx/index.tsx

@@ -10,8 +10,15 @@ import MenuSider from '@/components/MenuSider'
 import Skip from '@/components/Skip'
 
 function A6ybwx() {
+  // 开场视频-------------
+  const videoRefLast = useRef<HTMLVideoElement>(null)
+
   const [isEnter, setIsEnter] = useState(false)
-  const [videoOk, setVideoOk] = useState(false)
+
+  useEffect(() => {
+    if (videoRefLast.current) videoRefLast.current.play()
+  }, [])
+
   const [gotoTab, setGotoTab] = useState(0)
 
   window.onClickMainHotspot = (hotspotName: string) => {
@@ -51,48 +58,14 @@ function A6ybwx() {
     }
   }, [])
 
-  const playerRef = useRef<any>(null)
-  useEffect(() => {
-    const params = {
-      objectFit: 'cover', // 视频的object-fit样式, 默认 cover
-      loop: false, // 是否循环, 默认false
-      autoplay: false, // 自动播放, 默认false
-      onPlay: () => {}, // 触发播放事件
-      onPause: () => {}, // 触发暂停事件
-      onEnded: () => {
-        setIsEnter(true)
-        playerRef.current.destroy()
-      }, // 触发播放结束事件
-      onSourceEstablished: () => {
-        if (isEnter) setVideoOk(false)
-        setVideoOk(true)
-      } //有足够的数据可以播放了
-    }
-    playerRef.current = F_Video('./myData/ybwx.ts', params)
-    const dom = document.querySelector('.A6videoDom')!
-    dom.append(playerRef.current.domElement)
-  }, [isEnter])
-
-  const timeRR = useRef(-1)
-  useEffect(() => {
-    if (videoOk && !isEnter) {
-      clearInterval(timeRR.current)
-      timeRR.current = window.setInterval(() => {
-        console.log('播放视频')
-        playerRef.current.play()
-        clearInterval(timeRR.current)
-        return
-      }, 50)
-    }
-  }, [isEnter, videoOk])
-
   useEffect(() => {
     if (isEnter) {
+      videoRefLast.current?.pause()
       const A6ybwxIframe = document.getElementById('A6ybwxIframe') as HTMLIFrameElement
       if (A6ybwxIframe) {
         A6ybwxIframe.src = 'Beizhongshijie/index.html'
       }
-    }
+    }  
   }, [isEnter])
 
   // 进度条
@@ -132,15 +105,23 @@ function A6ybwx() {
           <img src={require('@/assets/img/btn_back.png')} alt='' />
         </div>
 
-        {/* ------------微信浏览器不让视频自动播放，用ts的方式*/}
+        {/* ----开场视频----*/}
         <div className='A6video' style={{ opacity: 1 }}>
-          <div className='A6videoDom'></div>
+          <video
+            ref={videoRefLast}
+            playsInline
+            webkit-playsinline='true'
+            x5-video-player-type='h5'
+            onEnded={() => setIsEnter(true)}
+          >
+            <source type='video/mp4' src='./myData/ybwx.mp4' />
+            Your browser does not support the video tag.
+          </video>
 
           {/* 跳过组件 */}
           <Skip
             clickFu={() => {
               setIsEnter(true)
-              playerRef.current.destroy()
             }}
             num={3}
             imgSrc='icon_skip'