BigBg.tsx

import * as React from 'react'
import * as style from './style.scss'

const bgVideo = require('@assets/1547821745560044.mp4');
// import { url } from 'inspector';
// const imgAry: any = []

// for (var i = 0; i <= 23; i++) {
//   var index = i < 10 ? '0' + i : i
//   imgAry.push(require('./zhitu-des/bggif00' + index + '.png'))
// }

export interface BigBgProps { }

class BigBg extends React.Component<BigBgProps, {}> {
  maxIndex = 23

  state = {
    bgIndex: 0
  }

  bgChangeInter: number;

  componentDidMount() {
    this.changeBgInter()
  }

  changeBgInter() {
    var { bgIndex } = this.state
    setTimeout(() => {
      if (bgIndex < this.maxIndex) {
        bgIndex++
      } else {
        bgIndex = 0
      }

      this.changeBgByIndex(bgIndex)
      this.changeBgInter()
    }, 1000)
  }

  changeBgByIndex(bgIndex: number): void {
    this.setState({
      bgIndex
    })
  }

  render() {
    // var { bgIndex } = this.state

    return <div className={style.bg}>
      {
        // imgAry.map((img: string, key: number) => {
        //   return <div key={key} className={style.bgImg} 
        //   style={{
        //     display: key === bgIndex ? 'block' : 'none',
        //     backgroundImage: `url('${img}')`, 
        //     backgroundSize: '100% 100%',
        //   }}></div>
        // })
      }

      <div className={style.videoBgWrapper}>
        <video preload='auto' autoPlay loop >
          <source src={bgVideo} type="video/mp4"/>
        </video>
        <div className={style.videoBgMask}></div>
      </div>
      {/* <Header></Header> */}
      <div className={style.content}>
        {this.props.children}
      </div>
    </div>
  }
}

export default BigBg