更新一波

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

@@ -78,7 +78,11 @@
       height: 100%;
       opacity: 0;
       pointer-events: none;
-      // transition: opacity 1s;
+      transition: opacity 0.5s;
+
+      #BtnRight {
+        bottom: 70px;
+      }
 
       // 热点里面的图文信息
       .A5vTxt {

Code/src/pages/A5chef/index.tsx

@@ -28,45 +28,22 @@ function A5chef() {
   const [hotInd, setHotInd] = useState(-1)
 
   useEffect(() => {
-    setTimeout(() => {
-      const videoDomAll: any = document.querySelectorAll('.A5video video')
-      videoDomAll.forEach((v: HTMLVideoElement) => {
-        if (v.className === `A5videoSon${hotInd}1`) v.play()
-        else {
-          v.currentTime = 0
-          v.pause()
-        }
-      })
-    }, 100)
-  }, [hotInd])
-
-  const videoRef1 = useRef<HTMLVideoElement>(null)
-  const videoRef2 = useRef<HTMLVideoElement>(null)
-  const videoRef3 = useRef<HTMLVideoElement>(null)
-
-  const [videoPlay, setVideoPlay] = useState('1')
-
-  const video3End = useCallback((val: string) => {
-    if (val === '1') {
-      setVideoPlay('2')
+    if (hotInd !== -1) {
       setTimeout(() => {
-        if (videoRef2.current) videoRef2.current.play()
+        const doms: any = document.querySelectorAll('.A5videoDom')
+
+        if (doms && doms.length) {
+          doms.forEach((v: HTMLVideoElement, i: number) => {
+            if (hotInd === i) v.play()
+            else {
+              v.pause()
+              v.currentTime = 0
+            }
+          })
+        }
       }, 100)
-    } else if (val === '3') {
-      setVideoPlay('1')
-      setHotInd(-1)
     }
-  }, [])
-
-  const videoRefRes = useCallback(
-    (index: number, val: string) => {
-      if (hotInd !== index) return null
-      else if (val === '1') return videoRef1
-      else if (val === '2') return videoRef2
-      else if (val === '3') return videoRef3
-    },
-    [hotInd]
-  )
+  }, [hotInd])
 
   // 先加载背景图 序列帧等 在加载视频
   const { imgNow, imgNumFu } = useLoding(2)
@@ -136,29 +113,23 @@ function A5chef() {
       {imgNow
         ? myData.chef.hot.map((item, index) => (
             <div key={index} className={classNames('A5video', hotInd === index ? 'A5videoAc' : '')}>
-              {['1', '2', '3'].map(vv => (
-                <video
-                  className={`A5videoSon${index}${vv}`}
-                  key={vv}
-                  hidden={videoPlay !== vv}
-                  ref={videoRefRes(index, vv)}
-                  playsInline
-                  muted
-                  webkit-playsinline='true'
-                  x5-video-player-type='h5'
-                  loop={vv === '2'}
-                  onEnded={() => video3End(vv)}
-                >
-                  <source type='video/mp4' src={`${baseURL}chef/${item.videoId}_${vv}.mp4`} />
-                  Your browser does not support the video tag.
-                </video>
-              ))}
+              <video
+                className='A5videoDom'
+                key={index}
+                playsInline
+                muted
+                webkit-playsinline='true'
+                x5-video-player-type='h5'
+                loop
+              >
+                <source type='video/mp4' src={`${baseURL}chef/${item.videoId}.mp4`} />
+                Your browser does not support the video tag.
+              </video>
 
               {/* 热点左侧图文信息 */}
               <div
                 className='A5vTxt'
                 style={{
-                  opacity: videoPlay === '2' ? 1 : 0,
                   backgroundImage: `url(${baseURL}chef/hotBg.png)`
                 }}
               >
@@ -167,18 +138,7 @@ function A5chef() {
               </div>
 
               {/* 返回按钮 */}
-              {videoPlay === '2' ? (
-                <BtnRight
-                  imgName='back'
-                  clickSon={() => {
-                    setVideoPlay('3')
-                    setTimeout(() => {
-                      if (videoRef3.current) videoRef3.current.play()
-                    }, 100)
-                  }}
-                  title='返回'
-                />
-              ) : null}
+              <BtnRight imgName='back' clickSon={() => setHotInd(-1)} title='返回' />
             </div>
           ))
         : null}