up

Code/public/myData/f-video.js

@@ -1,32 +1,31 @@
 /* f-video.js */
-let F_Video;
-(function () {
+let F_Video
+;(function () {
   F_Video = function (url, option) {
-    const u = window.navigator.userAgent.toLowerCase();
-    const isAndroid = u.indexOf("android") > -1;
-    let player = new Object();
+    const u = window.navigator.userAgent.toLowerCase()
+    const isAndroid = u.indexOf('android') > -1
+    let player = new Object()
 
+    let newCanvas = document.createElement('canvas')
+    let params = {
+      canvas: newCanvas,
+      loop: option.loop || false,
+      autoplay: option.autoplay || false,
+      onEnded: () => {
+        option.onEnded && option.onEnded()
+        player.currentTime = 0
+      }
+    }
 
- let newCanvas = document.createElement("canvas");
-      let params = {
-        canvas: newCanvas,
-        loop: option.loop || false,
-        autoplay: option.autoplay || false,
-        onEnded: () => {
-          option.onEnded && option.onEnded();
-          player.currentTime = 0;
-        },
-      };
+    newCanvas.style.width = '100%'
+    newCanvas.style.height = '100%'
+    newCanvas.style.objectFit = option.objectFit || 'cover'
 
-      newCanvas.style.width = "100%";
-      newCanvas.style.height = "100%";
-      newCanvas.style.objectFit = option.objectFit || "cover";
-
-      player = new JSMpeg.Player(url.replace(".mp4", ".ts"), {
-        ...option,
-        ...params,
-      });
-      player.domElement = newCanvas;
+    player = new JSMpeg.Player(url.replace('.mp4', '.ts'), {
+      ...option,
+      ...params
+    })
+    player.domElement = newCanvas
 
     // if (isAndroid) {
     //   let newCanvas = document.createElement("canvas");
@@ -76,6 +75,6 @@ let F_Video;
     //   option.onPause && player.addEventListener("pause", option.onPause);
     //   option.onEnded && player.addEventListener("ended", option.onEnded);
     // }
-    return player;
-  };
-})();
+    return player
+  }
+})()

Code/public/myData/myData.js

@@ -3,7 +3,7 @@ window.isHH = document.documentElement.clientWidth >= document.documentElement.c
 const isPcTemp = document.documentElement.clientWidth >= 1200
 
 // 本地开发静态资源目录
-const baseUrlLoc = 'http://192.168.0.18:8080/staticData/'
+const baseUrlLoc = 'http://192.168.20.55:8080/staticData/'
 
 // 发送请求基地址
 const apiUrlTemp = 'https://sit-handaizy.4dage.com/api/'

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

@@ -1,6 +1,18 @@
 .A2visit2 {
   position: relative;
   :global {
+    .A22bacImgOk {
+      position: relative;
+      z-index: 9;
+      width: 100%;
+      height: 100%;
+      img {
+        width: 100%;
+        height: 100%;
+        object-fit: fill;
+      }
+    }
+
     video {
       width: 100%;
       height: 100%;

Code/src/pages/A2visit2/index.tsx

@@ -17,23 +17,50 @@ import HotIcon from '@/components/HotIcon'
 import Zmap from '@/components/Zmap'
 
 function A2visit2() {
-  const [loding, setLoding] = useState(myData.isLdong ? 0 : 100)
+  // 先加载背景图
+  const [bacImgOk, setBacImgOk] = useState(false)
 
-  const timeRR = useRef(-1)
+  const [videoOk, setVideoOk] = useState(false)
 
+  // 背景图加载完毕之后在加载---- 微信浏览器不让自动播放视频 转为画布
   useEffect(() => {
-    clearInterval(timeRR.current)
-    timeRR.current = window.setInterval(() => {
-      if (loding >= 100) {
-        clearInterval(timeRR.current)
-        return
+    if (bacImgOk) {
+      const params = {
+        objectFit: 'cover', // 视频的object-fit样式, 默认 cover
+        loop: false, // 是否循环, 默认false
+        autoplay: false, // 自动播放, 默认false
+        onPlay: () => {}, // 触发播放事件
+        onPause: () => {}, // 触发暂停事件
+        onEnded: () => {}, // 触发播放结束事件
+        onSourceEstablished: () => {
+          setVideoOk(true)
+          setTimeout(() => {
+            player.play()
+          }, 200)
+        } //有足够的数据可以播放了
       }
-      setLoding(loding + 2)
-    }, 50)
-  }, [loding])
+      const player = F_Video('./myData/play.ts', params)
+      const dom = document.querySelector('.A22video')!
+      dom.append(player.domElement)
+    }
+  }, [bacImgOk])
 
-  // 底部按钮选中
-  const [btnAc, setBtnAc] = useState('贵宾')
+  const [loding, setLoding] = useState(myData.isLdong ? 0 : 100)
+
+  const timeRR = useRef(-1)
+
+  useEffect(() => {
+    if (videoOk) {
+      clearInterval(timeRR.current)
+      timeRR.current = window.setInterval(() => {
+        if (loding >= 100) {
+          clearInterval(timeRR.current)
+          return
+        }
+        setLoding(loding + 2)
+      }, 50)
+    }
+  }, [videoOk, loding])
 
   //  进入院落 全景图显示
   const [panoShow, setPanoShow] = useState(window.location.href.includes('?v=v2') ? true : false)
@@ -52,258 +79,230 @@ function A2visit2() {
   // 打开其他热点
   const [acName, setAcName] = useState('')
 
-  // 微信浏览器不让自动播放视频 转为画布
-  useEffect(() => {
-    const params = {
-      objectFit: 'cover', // 视频的object-fit样式, 默认 cover
-      loop: false, // 是否循环, 默认false
-      autoplay: true, // 自动播放, 默认false
-      onPlay: () => {}, // 触发播放事件
-      onPause: () => {}, // 触发暂停事件
-      onEnded: () => {} // 触发播放结束事件
-    }
-    const player = F_Video('./myData/play.ts', params)
-    const dom = document.querySelector('.A22video')!
-    dom.append(player.domElement)
-  }, [])
-
   return (
     <div className={styles.A2visit2}>
-      {window.location.href.includes('?v=v2') ? null : (
-        <div
-          className='A22imgBox'
-          style={{ opacity: panoShow ? '0' : '1', pointerEvents: panoShow ? 'none' : 'auto' }}
-        >
-          {/* 底部按钮 */}
+      {videoOk || window.location.href.includes('?v=v2') ? null : (
+        <div className='A22bacImgOk'>
+          <img src={`${baseURL}visit2/base.jpg`} alt='' onLoad={() => setBacImgOk(true)} />
+        </div>
+      )}
+
+      <>
+        {window.location.href.includes('?v=v2') ? null : (
           <div
-            className='A22btn'
-            style={{
-              opacity: loding < 100 ? '0' : '1',
-              pointerEvents: loding < 100 ? 'none' : 'auto'
-            }}
+            className='A22imgBox'
+            style={{ opacity: panoShow ? '0' : '1', pointerEvents: panoShow ? 'none' : 'auto' }}
           >
-            {myData.visit2.btnArr.map((item, index) => (
-              <div
-                onClick={() => {
-                  setBtnAc(item)
-
-                  // 打开热点
-                  setHotShow(true)
+            {/* 底部按钮 */}
+            <div
+              className='A22btn'
+              style={{
+                opacity: loding < 100 ? '0' : '1',
+                pointerEvents: loding < 100 ? 'none' : 'auto'
+              }}
+            >
+              {myData.visit2.btnArr.map((item, index) => (
+                <div
+                  onClick={() => {
+                    setHotShow(true)
+                  }}
+                  key={index}
+                  className='A22btnRow'
+                  style={{ backgroundImage: `url(${baseURL}chef/chuBtn.png)` }}
+                >
+                  周礼九拜
+                </div>
+              ))}
+            </div>
 
-                  // setVideoPlay(true)
-                  // setTimeout(() => {
-                  //   if (videoRef.current) videoRef.current.play()
-                  // }, 100)
-                }}
+            {/* 羊酒贺礼热点 */}
+            {hotInfo.cheQiCove.map((item, index) => (
+              <HotIcon
+                style={{ top: item.locPage.top, left: item.locPage.left }}
+                isModel={item.tubiao === '文物' ? true : false}
                 key={index}
-                className='A22btnRow'
-                style={{ backgroundImage: `url(${baseURL}chef/chuBtn.png)` }}
-              >
-                周礼九拜
-              </div>
-            ))}
-          </div>
-
-          {/* 羊酒贺礼热点 */}
-          {hotInfo.cheQiCove.map((item, index) => (
-            <HotIcon
-              style={{ top: item.locPage.top, left: item.locPage.left }}
-              isModel={item.tubiao === '文物' ? true : false}
-              key={index}
-              index={index}
-              hoverSrc={item.hoverSrc}
-              clickSon={() => setAcName(item.name)}
-              isXiao={0.6}
-            />
-          ))}
-
-          {loding >= 100 ? (
-            <>
-              {/* // 进入院落 */}
-              <NextPage
-                clickSon={() => {
-                  setPanoShow(true)
-                  setTimeout(() => {
-                    domDelOwnFu('.A22imgBox')
-                  }, 500)
-                }}
-                txt='进入院落'
+                index={index}
+                hoverSrc={item.hoverSrc}
+                clickSon={() => setAcName(item.name)}
+                isXiao={0.6}
               />
-            </>
-          ) : null}
+            ))}
 
-          {/* 右上角地图 */}
-          <Zmap src='visit2' />
+            {loding >= 100 ? (
+              <>
+                {/* // 进入院落 */}
+                <NextPage
+                  clickSon={() => {
+                    setPanoShow(true)
+                    setTimeout(() => {
+                      domDelOwnFu('.A22imgBox')
+                    }, 500)
+                  }}
+                  txt='进入院落'
+                />
+              </>
+            ) : null}
+
+            {/* 右上角地图 */}
+            <Zmap src='visit2' />
+
+            {/* ------------微信浏览器不让视频自动播放，用ts的方式*/}
+            <div className='A22videoBox'>
+              {myData.visit2.btnArr.map((item, index) => (
+                <div key={index} className='A22video' style={{ opacity: 1 }}></div>
+              ))}
+            </div>
 
-          {/* ------------微信浏览器不让视频自动播放，用ts的方式*/}
-          <div className='A22videoBox' style={{ zIndex: 2 }}>
-            {myData.visit2.btnArr.map((item, index) => (
-              <div key={index} className='A22video' style={{ opacity: btnAc === item ? 1 : 0 }}>
-                {/* <video
-                  ref={btnAc === item ? videoRef : null}
-                  playsInline
-                  muted
-                  webkit-playsinline='true'
-                  x5-video-player-type='h5'
-                  onEnded={() => setVideoPlay(false)}
-                  // loop
-                >
-                  <source type='video/mp4' src={`${baseURL}visit2/${item}.mp4`} />
-                  Your browser does not support the video tag.
-                </video> */}
+            {/* 加载进度条 */}
+            {loding >= 100 ? null : (
+              <div className='A22xian'>
+                <div>
+                  <div style={{ width: loding + '%' }}></div>
+                </div>
               </div>
-            ))}
+            )}
           </div>
+        )}
+
+        {/* 右下角按钮 */}
+        <FloorBtn
+          gameFu={
+            panoShow
+              ? () => {
+                  history.push('/unend/game3?v=v2')
+                }
+              : undefined
+          }
+          unityEnd={() => history.push('unend/end')}
+          isGuide={panoShow ? 'Zguide/visit2.mp4' : undefined}
+        />
 
-          {/* 加载进度条 */}
-          {loding >= 100 ? null : (
-            <div className='A22xian'>
-              <div>
-                <div style={{ width: loding + '%' }}></div>
-              </div>
+        {window.location.href.includes('?v=v2') ? null : (
+          <CatVideo
+            isShow={panoShow}
+            src={baseURL + myData.visit2.进入院落}
+            parentFu={() => domDelOwnFu('#CatVideo')}
+          />
+        )}
+
+        {/* 全景图页面 */}
+        {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='进入室内' />
+
+            {/* 右上角地图 */}
+            <Zmap src='visit2' />
+
+            {/* 底部按钮 */}
+            <div
+              onClick={() => setBaiXi(true)}
+              className='A22Pbtn'
+              style={{ backgroundImage: `url(${baseURL}chef/chuBtn.png)` }}
+            >
+              观看百戏
             </div>
-          )}
-        </div>
-      )}
+          </div>
+        )}
 
-      {/* 右下角按钮 */}
-      <FloorBtn
-        gameFu={
-          panoShow
-            ? () => {
-                history.push('/unend/game3?v=v2')
-              }
-            : undefined
-        }
-        unityEnd={() => history.push('unend/end')}
-        isGuide={panoShow ? 'Zguide/visit2.mp4' : undefined}
-      />
-
-      {window.location.href.includes('?v=v2') ? null : (
-        <CatVideo
-          isShow={panoShow}
-          src={baseURL + myData.visit2.进入院落}
-          parentFu={() => domDelOwnFu('#CatVideo')}
-        />
-      )}
+        {/* 室外看百戏 */}
+        <div
+          className='A22baiXi'
+          style={{
+            opacity: baiXi ? '1' : '0',
+            pointerEvents: baiXi ? 'auto' : 'none',
+            backgroundImage: `url(${baseURL + myData.visit2.baiXiBg})`
+          }}
+        >
+          {/* 右上角地图 */}
+          <Zmap src='visit2' />
 
-      {/* 全景图页面 */}
-      {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='进入室内' />
 
-          {/* 右上角地图 */}
-          <Zmap src='visit2' />
-
-          {/* 底部按钮 */}
-          <div
-            onClick={() => setBaiXi(true)}
-            className='A22Pbtn'
-            style={{ backgroundImage: `url(${baseURL}chef/chuBtn.png)` }}
-          >
-            观看百戏
+          {/* 百戏底部按钮 */}
+          <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'
+            imgName='back'
+          />
+        </div>
+
+        {/* 最后的视频 */}
+        <EndVideo
+          lastVideo={toShi}
+          src={baseURL + myData.visit2.进入室内}
+          path='/banquet'
+          delDom='.A22Pano'
         />
-      </div>
-
-      {/* 最后的视频 */}
-      <EndVideo
-        lastVideo={toShi}
-        src={baseURL + myData.visit2.进入室内}
-        path='/banquet'
-        delDom='.A22Pano'
-      />
+      </>
 
       {/* 热点相关 */}
       {hotShow ? <ZHot0 closeFu={() => setHotShow(false)} /> : null}