一. 在react中引入

1. 安裝插件

npm install –save video-react

2.在文件中引入

import {
  Player,
  ControlBar,
  PlayToggle, // PlayToggle 播放/暫停按鈕 若需禁止加 disabled
  ReplayControl, // 后退按鈕
  ForwardControl,  // 前進(jìn)按鈕
  CurrentTimeDisplay,
  TimeDivider,
  PlaybackRateMenuButton,  // 倍速播放選項(xiàng)
  VolumeMenuButton
} from 'video-react';
import "video-react/dist/video-react.css"; // import css

二. 插件屬性
1.插件屬性地址

遇到的問(wèn)題，視頻要求自動(dòng)播放，設(shè)置autoPlay為true。在測(cè)試時(shí)候發(fā)現(xiàn)，切換Tab標(biāo)簽的時(shí)候，不會(huì)自動(dòng)播放。
解決方案：在更改數(shù)據(jù)的時(shí)候調(diào)用load方法。

 this.player.subscribeToStateChange(this.handleStateChange.bind(this));
 this.player.load();//  更改視頻源并重新加載視頻

部分代碼：

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

界面

         <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>