upp

Code/public/index.html

@@ -9,6 +9,7 @@
     <link rel="shortcut icon" href="./favicon.ico" type="image/x-icon" />
     <script src="./myData/myData.js"></script>
     <script src="./myData/hot.js"></script>
+
     <script src="./myData/jsmpeg.min.js"></script>
     <script src="./myData/f-video.js"></script>
 

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

@@ -2,14 +2,16 @@
   position: relative;
   :global {
     .A22bacImgOk {
-      position: relative;
+      position: absolute;
       z-index: 9;
+      top: 0;
+      left: 0;
       width: 100%;
       height: 100%;
       img {
         width: 100%;
         height: 100%;
-        object-fit: fill;
+        object-fit: cover !important;
       }
     }
 

Code/src/pages/A2visit2/index.tsx

@@ -22,7 +22,12 @@ function A2visit2() {
 
   const [videoOk, setVideoOk] = useState(false)
 
+  const vv2Ref = useRef(window.location.href.includes('?v=v2'))
+
+  const renRef = useRef(window.location.href.includes('r=ren'))
+
   // 背景图加载完毕之后在加载---- 微信浏览器不让自动播放视频 转为画布
+  const playerRef = useRef<any>(null)
   useEffect(() => {
     if (bacImgOk) {
       const params = {
@@ -34,14 +39,11 @@ function A2visit2() {
         onEnded: () => {}, // 触发播放结束事件
         onSourceEstablished: () => {
           setVideoOk(true)
-          setTimeout(() => {
-            player.play()
-          }, 200)
         } //有足够的数据可以播放了
       }
-      const player = F_Video('./myData/play.ts', params)
+      playerRef.current = F_Video('./myData/play.ts', params)
       const dom = document.querySelector('.A22video')!
-      dom.append(player.domElement)
+      dom.append(playerRef.current.domElement)
     }
   }, [bacImgOk])
 
@@ -54,6 +56,7 @@ function A2visit2() {
       clearInterval(timeRR.current)
       timeRR.current = window.setInterval(() => {
         if (loding >= 100) {
+          playerRef.current.play()
           clearInterval(timeRR.current)
           return
         }
@@ -63,13 +66,13 @@ function A2visit2() {
   }, [videoOk, loding])
 
   //  进入院落 全景图显示
-  const [panoShow, setPanoShow] = useState(window.location.href.includes('?v=v2') ? true : false)
+  const [panoShow, setPanoShow] = useState(vv2Ref.current)
 
   // 点击进入室内
   const [toShi, setToShi] = useState(false)
 
   // 点击观看百戏
-  const [baiXi, setBaiXi] = useState(window.location.href.includes('r=ren') ? true : false)
+  const [baiXi, setBaiXi] = useState(renRef.current)
 
   const [xiAc, setXiAc] = useState('')
 
@@ -81,14 +84,14 @@ function A2visit2() {
 
   return (
     <div className={styles.A2visit2}>
-      {videoOk || window.location.href.includes('?v=v2') ? null : (
+      {videoOk || vv2Ref.current || renRef.current ? null : (
         <div className='A22bacImgOk'>
           <img src={`${baseURL}visit2/base.jpg`} alt='' onLoad={() => setBacImgOk(true)} />
         </div>
       )}
 
       <>
-        {window.location.href.includes('?v=v2') ? null : (
+        {vv2Ref.current ? null : (
           <div
             className='A22imgBox'
             style={{ opacity: panoShow ? '0' : '1', pointerEvents: panoShow ? 'none' : 'auto' }}
@@ -154,6 +157,7 @@ function A2visit2() {
             </div>
 
             {/* 加载进度条 */}
+
             {loding >= 100 ? null : (
               <div className='A22xian'>
                 <div>
@@ -177,7 +181,7 @@ function A2visit2() {
           isGuide={panoShow ? 'Zguide/visit2.mp4' : undefined}
         />
 
-        {window.location.href.includes('?v=v2') ? null : (
+        {vv2Ref.current ? null : (
           <CatVideo
             isShow={panoShow}
             src={baseURL + myData.visit2.进入院落}
@@ -186,122 +190,130 @@ function A2visit2() {
         )}
 
         {/* 全景图页面 */}
-        {window.location.href.includes('r=ren') ? null : (
-          <div className='A22Pano' style={{ opacity: panoShow ? '1' : '0' }}>
-            <A22Pano setAcName={val => setAcName(val)} />
-            {/* 进入室内 */}
-            <NextPage clickSon={() => setToShi(true)} txt='进入室内' />
+        {renRef.current ? null : (
+          <>
+            {loding >= 10 || vv2Ref.current ? (
+              <div className='A22Pano' style={{ opacity: panoShow ? '1' : '0' }}>
+                <A22Pano setAcName={val => setAcName(val)} />
+                {/* 进入室内 */}
+                <NextPage clickSon={() => setToShi(true)} txt='进入室内' />
+
+                {/* 右上角地图 */}
+                <Zmap src='visit2' />
+
+                {/* 底部按钮 */}
+                <div
+                  onClick={() => setBaiXi(true)}
+                  className='A22Pbtn'
+                  style={{ backgroundImage: `url(${baseURL}chef/chuBtn.png)` }}
+                >
+                  观看百戏
+                </div>
+              </div>
+            ) : null}
+          </>
+        )}
 
+        {/* 室外看百戏 */}
+        {loding >= 10 || vv2Ref.current || renRef.current ? (
+          <div
+            className='A22baiXi'
+            style={{
+              opacity: baiXi ? '1' : '0',
+              pointerEvents: baiXi ? 'auto' : 'none',
+              backgroundImage: `url(${baseURL + myData.visit2.baiXiBg})`
+            }}
+          >
             {/* 右上角地图 */}
             <Zmap src='visit2' />
 
-            {/* 底部按钮 */}
-            <div
-              onClick={() => setBaiXi(true)}
-              className='A22Pbtn'
-              style={{ backgroundImage: `url(${baseURL}chef/chuBtn.png)` }}
-            >
-              观看百戏
+            {/* 进入室内 */}
+            <NextPage clickSon={() => setToShi(true)} txt='进入室内' />
+
+            {/* 百戏底部按钮 */}
+            <div className='pvfloor'>
+              {myData.visit2.baixiArr.map((item, index) => (
+                <div
+                  key={index}
+                  onClick={() => {
+                    setXiAc(item)
+                    setTimeout(() => {
+                      const doms: any = document.querySelectorAll('.A22Bvideo')
+                      if (doms) {
+                        doms.forEach((v: HTMLVideoElement, i: number) => {
+                          if (index === i) v.play()
+                          else {
+                            v.pause()
+                            v.currentTime = 0
+                          }
+                        })
+                      }
+                    }, 100)
+                  }}
+                  className={classNames('pvflRow', xiAc === item ? 'pvflRowAc' : '')}
+                >
+                  {/* 蒙版 */}
+                  <div className='pvflR1'></div>
+                  {/* 底图 */}
+                  <div className='pvflR2'>
+                    <img src={`${baseURL}visit2/${item}.png`} alt='' />
+                  </div>
+
+                  {/* 文字 */}
+                  <div className='pvflR3'>{item}</div>
+                </div>
+              ))}
             </div>
-          </div>
-        )}
 
-        {/* 室外看百戏 */}
-        <div
-          className='A22baiXi'
-          style={{
-            opacity: baiXi ? '1' : '0',
-            pointerEvents: baiXi ? 'auto' : 'none',
-            backgroundImage: `url(${baseURL + myData.visit2.baiXiBg})`
-          }}
-        >
-          {/* 右上角地图 */}
-          <Zmap src='visit2' />
-
-          {/* 进入室内 */}
-          <NextPage clickSon={() => setToShi(true)} txt='进入室内' />
-
-          {/* 百戏底部按钮 */}
-          <div className='pvfloor'>
-            {myData.visit2.baixiArr.map((item, index) => (
+            {myData.visit2.baixiArr.map(item => (
+              // 5个视频
               <div
-                key={index}
-                onClick={() => {
-                  setXiAc(item)
-                  setTimeout(() => {
-                    const doms: any = document.querySelectorAll('.A22Bvideo')
-                    if (doms) {
-                      doms.forEach((v: HTMLVideoElement, i: number) => {
-                        if (index === i) v.play()
-                        else {
-                          v.pause()
-                          v.currentTime = 0
-                        }
-                      })
-                    }
-                  }, 100)
+                className='A22BvideoBox'
+                key={item}
+                style={{
+                  opacity: xiAc === item ? '1' : '0',
+                  pointerEvents: xiAc === item ? 'auto' : 'none'
                 }}
-                className={classNames('pvflRow', xiAc === item ? 'pvflRowAc' : '')}
               >
-                {/* 蒙版 */}
-                <div className='pvflR1'></div>
-                {/* 底图 */}
-                <div className='pvflR2'>
-                  <img src={`${baseURL}visit2/${item}.png`} alt='' />
-                </div>
-
-                {/* 文字 */}
-                <div className='pvflR3'>{item}</div>
+                <video
+                  className='A22Bvideo'
+                  playsInline
+                  muted
+                  webkit-playsinline='true'
+                  x5-video-player-type='h5'
+                  loop={true}
+                >
+                  <source type='video/mp4' src={`${baseURL}visit2/${item}.mp4`} />
+                  Your browser does not support the video tag.
+                </video>
               </div>
             ))}
-          </div>
 
-          {myData.visit2.baixiArr.map(item => (
-            // 5个视频
-            <div
-              className='A22BvideoBox'
-              key={item}
-              style={{
-                opacity: xiAc === item ? '1' : '0',
-                pointerEvents: xiAc === item ? 'auto' : 'none'
+            <BtnRight
+              title='返回'
+              clickSon={() => {
+                const txt = renClickPageFu()
+                if (txt) {
+                  txt === '1' ? history.replace('/more?r=ren1') : history.replace('/more?r=ren0')
+                } else {
+                  setBaiXi(false)
+                  setXiAc('')
+                }
               }}
-            >
-              <video
-                className='A22Bvideo'
-                playsInline
-                muted
-                webkit-playsinline='true'
-                x5-video-player-type='h5'
-                loop={true}
-              >
-                <source type='video/mp4' src={`${baseURL}visit2/${item}.mp4`} />
-                Your browser does not support the video tag.
-              </video>
-            </div>
-          ))}
-
-          <BtnRight
-            title='返回'
-            clickSon={() => {
-              const txt = renClickPageFu()
-              if (txt) {
-                txt === '1' ? history.replace('/more?r=ren1') : history.replace('/more?r=ren0')
-              } else {
-                setBaiXi(false)
-                setXiAc('')
-              }
-            }}
-            imgName='back'
-          />
-        </div>
+              imgName='back'
+            />
+          </div>
+        ) : null}
 
         {/* 最后的视频 */}
-        <EndVideo
-          lastVideo={toShi}
-          src={baseURL + myData.visit2.进入室内}
-          path='/banquet'
-          delDom='.A22Pano'
-        />
+        {loding >= 10 ? (
+          <EndVideo
+            lastVideo={toShi}
+            src={baseURL + myData.visit2.进入室内}
+            path='/banquet'
+            delDom='.A22Pano'
+          />
+        ) : null}
       </>
 
       {/* 热点相关 */}