安装：

  1. npm install --save video-react
  3. 或者
  5. yarn add video-react

使用示例：

  1. import React, { Component, Fragment } from 'react';
  2. import path from './guide.mp4'
  3. import {
  4.   Player,
  5.   ControlBar,
  6.   PlayToggle, // PlayToggle 播放/暂停按钮 若需禁止加 disabled
  7.   ReplayControl, // 后退按钮
  8.   ForwardControl,  // 前进按钮
  9.   CurrentTimeDisplay,
  10.   TimeDivider,
  11.   PlaybackRateMenuButton,  // 倍速播放选项
  12.   VolumeMenuButton
  13. } from 'video-react';
  14. import "../node_modules/video-react/dist/video-react.css"; // import css
  17. class AAA extends Component {
  18.   componentDidMount() {
  19.     console.log(this.player)
  20.     this.player.subscribeToStateChange(this.handleStateChange.bind(this));
  21.   }
  23.   handleStateChange(state, prevState) {
  24.     console.log(state)
  25.   }
  27.   render() {
  28.     return (
  29.       <Fragment>
  30.         <div style={{ width: 500, height: 300, margin: 50 }}>
  31.           <Player
  32.             ref={c => {
  33.               this.player = c;
  34.             }}
  35.             poster="https://video-react.js.org/assets/poster.png"
  36.           >
  37.             <source
  38.               src={path}
  39.               type="video/mp4"
  40.             />
  41.             <ControlBar autoHide={false} disableDefaultControls={false}>
  42.               <ReplayControl seconds={10} order={1.1} />
  43.               <ForwardControl seconds={30} order={1.2} />
  44.               <PlayToggle />
  45.               <CurrentTimeDisplay order={4.1} />
  46.               <TimeDivider order={4.2} />
  47.               <PlaybackRateMenuButton rates={[5, 2, 1.5, 1, 0.5]} order={7.1} />
  48.               <VolumeMenuButton />
  49.             </ControlBar>
  50.           </Player>
  51.         </div>
  52.       </Fragment>
  53.     )
  54.   }
  55. }
  58. export default AAA;

——————————————————————————————————————————————
https://video-react.js.org/
MongoDB
Python/Django
Webpack
MySQL
R