Video-React 視頻播放組件的使用

安裝：

npm install --save video-react

或者

yarn add video-react

使用示例：

import React, { Component, Fragment } from 'react';
import path from './guide.mp4'
import {
  Player,
  ControlBar,
  PlayToggle, // PlayToggle 播放/暫停按鈕 若需禁止加 disabled
  ReplayControl, // 后退按鈕
  ForwardControl,  // 前進按鈕
  CurrentTimeDisplay,
  TimeDivider,
  PlaybackRateMenuButton,  // 倍速播放選項
  VolumeMenuButton
} from 'video-react';
import "../node_modules/video-react/dist/video-react.css"; // import css


class AAA extends Component {
  componentDidMount() {
    console.log(this.player)
    this.player.subscribeToStateChange(this.handleStateChange.bind(this));
  }

  handleStateChange(state, prevState) {
    console.log(state)
  }

  render() {
    return (
      <Fragment>
        <div style={{ width: 500, height: 300, margin: 50 }}>
          <Player
            ref={c => {
              this.player = c;
            }}
            poster="https://video-react.js.org/assets/poster.png"
          >
            <source
              src={path}
              type="video/mp4"
            />
            <ControlBar autoHide={false} disableDefaultControls={false}>
              <ReplayControl seconds={10} order={1.1} />
              <ForwardControl seconds={30} order={1.2} />
              <PlayToggle />
              <CurrentTimeDisplay order={4.1} />
              <TimeDivider order={4.2} />
              <PlaybackRateMenuButton rates={[5, 2, 1.5, 1, 0.5]} order={7.1} />
              <VolumeMenuButton />
            </ControlBar>
          </Player>
        </div>
      </Fragment>
    )
  }
}


export default AAA;

參考文檔

https://video-react.js.org/