react封装一个公用的video组件（video-react）

预览：


1、cnpm install --save video-react react react-dom
2、js代码（复制即用）

import React, { Component } from 'react';
import { Player, ControlBar  } from 'video-react';
import './index.less';
/**
 * 视频播放组件
 */
class Video extends Component {
  static defaultProps = {
    prefixCls: 'antui-video'
  };

  constructor(props, context) {
    super(props, context);

    this.state = {
      source: "",
      isStart: 0,
    };

    this.play = this.play.bind(this);
    this.pause = this.pause.bind(this);
    this.load = this.load.bind(this);
    this.changeCurrentTime = this.changeCurrentTime.bind(this);
    this.seek = this.seek.bind(this);
    this.changePlaybackRateRate = this.changePlaybackRateRate.bind(this);
    this.changeVolume = this.changeVolume.bind(this);
    this.setMuted = this.setMuted.bind(this);
  }

  componentDidMount() {
    // subscribe state change
    this.player.subscribeToStateChange(this.handleStateChange.bind(this));
  }

  setMuted(muted) {
    return () => {
      this.player.muted = muted;
    };
  }

  handleStateChange(state) {
    // copy player state to this component's state
    this.setState({
      player: state
    });
  }

  play() {
    this.setState({ isStart:1 })
    this.player.play();
  }

  pause() {
    this.player.pause();
  }

  load() {
    this.player.load();
  }

  changeCurrentTime(seconds) {
    return () => {
      const { player } = this.player.getState();
      this.player.seek(player.currentTime + seconds);
    };
  }

  seek(seconds) {
    return () => {
      this.player.seek(seconds);
    };
  }

  changePlaybackRateRate(steps) {
    return () => {
      const { player } = this.player.getState();
      this.player.playbackRate = player.playbackRate + steps;
    };
  }

  changeVolume(steps) {
    return () => {
      const { player } = this.player.getState();
      this.player.volume = player.volume + steps;
    };
  }

  changeSource(name) {
    return () => {
      this.setState({
        source: sources[name]
      });
      this.player.load();
    };
  }

  render() {
    const { src, imageUrl } = this.props
    const { isStart } = this.state
    return (
      <div className="myplayer-container">
        {
          isStart === 0 ?
          imageUrl && imageUrl!=="" ?
          <div className="myplayer-mask" >
            <img src={imageUrl} />
            <button className="myplayer-button" type="button" onClick={this.play.bind(this)}><span>Play Video</span></button>
          </div>
          : null
          : null
          

        }
        <Player
          ref={player => {
            this.player = player;
          }}
          autoPlay
          className="myplayer"
        >
          <source src={src} />
          <ControlBar autoHide={false} />
        </Player>
      </div>
    );
  }
}

export default Video;

3、css 样式
（1）引入video_react.css（直接cdn引入）

（2）自定义样式 ```

.myplayer-container {
width: 100%;
height: 100%;
overflow: hidden;
position: relative;
>.myplayer {
padding-top: 0 !important;
height: 100%;
}
>.myplayer-mask {
display: flex;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 99;
background: rgba(0, 0, 0, 1);
justify-content: center;
align-items: center;
>img {
max-width: 100%;
max-height: 100%;
}
>.myplayer-button {
position: absolute;
margin: auto;
left: 0;
right: 0;
top: 0;
bottom: 0;
z-index: 100;
width: 90px;
height: 40px;
display: flex;
justify-content: center;
align-items: center;
border: 2px solid #fff;
border-radius: 2px;
overflow: hidden;
background: #1e242c;
cursor: pointer;
>span {
width: 0;
height: 0;
overflow: hidden;
}
}
>.myplayer-button:before {
content: " ";
position: absolute;
width: 0;
height: 0;
border: 10px solid;
margin-left: 5px;
border-color: transparent transparent #fff;
transform: rotate(90deg);
}
}
}