qc-OfficialWebsite/src/pages/StaffStyle/Banner2.jsx

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


const videos = ['http://questnet.cn/image/1.mp4', 'http://questnet.cn/image/2.mp4', 'http://questnet.cn/image/3.mp4']
function Banner(props) {
  const { isMobile, ...prop } = props;
  const [curr, setCurr] = React.useState(0)  // 播放的哪条视频

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

  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" poster={require('../../image/IMG_072912.jpg')}>
          <source src={videos[curr]} type="video/mp4" />
        </video>
        {/* {
          curr === 0 && <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/1.mp4'} type="video/mp4" />
          </video>
        }
        {
          curr === 1 && <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>
        }
        {
          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>
      </div> */}
    </div>
  );
}

export default Banner;