HeNan_HanJia/Code/src/components/BaseVideo/index.tsx

import React, { useCallback, useEffect, useRef, useState } from 'react'
import styles from './index.module.scss'
import classNames from 'classnames'
import { baseURL, myData } from '@/utils/http'
import { domDelOwnFu } from '@/utils/utilsSome'

type Props = {
  isShow: boolean //是否显示
  imgSrc: string //标题图片的路径
  videoSrc: string //视频路径
  parentFu: () => void //点击继续的方法（调用父亲）
}

function BaseVideo({ isShow, imgSrc, videoSrc, parentFu }: Props) {
  const baseVideoRef = useRef<HTMLVideoElement>(null)

  useEffect(() => {
    setTimeout(() => {
      if (baseVideoRef.current) {
        baseVideoRef.current.play()
      }
    }, 100)
  }, [])

  const [loding, setLoding] = useState(myData.isLdong ? 0 : 100)

  const timeRR = useRef(-1)

  useEffect(() => {
    clearInterval(timeRR.current)
    timeRR.current = window.setInterval(() => {
      if (loding >= 100) {
        clearInterval(timeRR.current)
        return
      }
      setLoding(loding + 1)
    }, 30)
  }, [loding])

  const btnStartFu = useCallback(() => {
    if (loding >= 100) {
      parentFu()
      // 0.5s之后删除初始视频
      setTimeout(() => {
        domDelOwnFu('#BaseVideo')
      }, 500)
    }
  }, [loding, parentFu])

  return (
    <div
      id='BaseVideo'
      className={classNames(styles.BaseVideo, isShow ? '' : styles.BaseVideoHide)}
    >
      <img className='BaseVideoIcon' src={imgSrc} alt='' />
      <div className='BVbaseBtn' onClick={btnStartFu}>
        {/* anpg动图 */}
        <div className='BVBIcon'>
          <img src={`${baseURL}visit/arrow.png`} alt='' />
        </div>

        <img src={`${baseURL}visit/btn.png`} alt='' />

        <div className='BVBtxt'>{loding >= 100 ? '点击继续' : '加载中'}</div>
        {loding >= 100 ? null : (
          <div className='BVBxian'>
            <div>
              <div style={{ width: loding + '%' }}></div>
            </div>
          </div>
        )}
      </div>

      <video
        ref={baseVideoRef}
        src={videoSrc}
        playsInline
        muted
        webkit-playsinline='true'
        x5-video-player-type='h5'
        loop
      />
    </div>
  )
}

const MemoBaseVideo = React.memo(BaseVideo)

export default MemoBaseVideo