Insertar video (video-react) en React y reproducir automáticamente

1. Introducido en react

1. Instalar complemento

npm install –save video-react

2. Introducir en el archivo

import {
  Player,
  ControlBar,
  PlayToggle, // PlayToggle 播放/暂停按钮 若需禁止加 disabled
  ReplayControl, // 后退按钮
  ForwardControl,  // 前进按钮
  CurrentTimeDisplay,
  TimeDivider,
  PlaybackRateMenuButton,  // 倍速播放选项
  VolumeMenuButton
} from 'video-react';
import "video-react/dist/video-react.css"; // import css

2. Atributo de complemento
1. Dirección de atributo de complemento

El problema encontrado, el video requiere reproducción automática, configure la reproducción automática en true. En la prueba, se descubrió que cuando se cambia la pestaña Tab, no se reproduce automáticamente.
Solución: llame al método de carga cuando cambie los datos.

 this.player.subscribeToStateChange(this.handleStateChange.bind(this));
 this.player.load();//  更改视频源并重新加载视频

Parte del código:

 this.player.subscribeToStateChange(this.handleStateChange.bind(this));
 this.player.load();
 
 handleStateChange(state, prevState) {
    this.setState({
      player: state,
      currentTime: state.currentTime,
      duration:state.duration,
    });
  }

interfaz

         <Player
            ref={c => {
              this.player = c;
            }}
            autoPlay='true'
            playsInline ='true'
            src={this.state.videoUrl}
            poster="https://video-react.js.org/assets/poster.png"
          >
            
            <ControlBar autoHide={false} disableDefaultControls={source == 0?false :true}>
              <ReplayControl seconds={10} order={1.1} />
              <PlayToggle />
              <CurrentTimeDisplay order={4.1} />
              <TimeDivider order={4.2} />
              <PlaybackRateMenuButton rates={[5, 2, 1.5, 1, 0.5]} order={7.1} />
              <VolumeMenuButton />
            </ControlBar>
          </Player>