import React from 'react';
import 'rc-banner-anim/assets/index.css';


const videos = ['https://zx-oss-dev.oss-cn-hangzhou.aliyuncs.com/mp4D2BD31130FF64BDE8FE16411943EE96E.mp4', 'https://zx-oss-dev.oss-cn-hangzhou.aliyuncs.com/mp4401C85BB09084B2EB823B337946E099C.mp4']
function Banner(props) {
  const { isMobile, ...prop } = props;
  const [curr, setCurr] = React.useState(0)  // 播放的哪条视频

  const refVideo = React.useRef(null)

  const endenHandle = React.useCallback(()=>{
    if(curr + 1 >= videos.length) {
      setCurr(0)
    }else{
      setCurr(curr + 1)
    }
    console.log(refVideo);
  },[curr, refVideo])

  return (
    <div {...prop} className="Banner2_0_sty">
      <div className='home-header__video-bg'>
        {/* <video id="pc-video" muted="muted" autoPlay playsInline="playsinline" loop="loop" controls={true} webkit-playsinline="webkit-playsinline" x5-playsinline="x5-playsinline">
          <source src={videos[curr]} type="video/mp4" />
        </video> */}
        {
          curr === 0 && <video id="pc-video1" muted="muted" ref={refVideo} autoPlay="autoplay" controls={true} onEnded={endenHandle}  webkit-playsinline="webkit-playsinline" x5-playsinline="x5-playsinline">
            <source src={videos[curr]} type="video/mp4" />
          </video>
        }
        {
          curr === 1 && <video id="pc-video2" muted="muted" ref={refVideo} autoPlay="autoplay" controls={true} onEnded={endenHandle}  webkit-playsinline="webkit-playsinline" x5-playsinline="x5-playsinline">
            <source src={videos[curr]} type="video/mp4" />
          </video>
        }
        {/* {
          curr === 2 && <video id="pc-video" muted="muted" ref={refVideo} autoPlay="autoplay" controls={true} onEnded={endenHandle}  webkit-playsinline="webkit-playsinline" x5-playsinline="x5-playsinline">
            <source src={'http://questnet.cn/image/2.mp4'} type="video/mp4" />
          </video>
        } */}
      </div>
      <div className="home-header-content">
        <h1>为世界创造快乐</h1>
        <p>激情青春敢为梦想，用科技创新赋予生活更多精彩</p>
      </div>
    </div>
  );
}

export default Banner;