sourcecode/front/project/www/components/Video/index.js

import React, { Component } from 'react';
import './index.less';
import videojs from 'video.js';
import Assets from '@src/components/Assets';

export default class Video extends Component {
  constructor(props) {
    super(props);
    this.ready = false;
    this.state = { playing: false, fulling: false };
  }

  componentDidMount() {
    this.player = videojs(
      this.videoNode,
      {
        controls: false,
        sources: [
          {
            src: this.props.src,
            type: 'video/mp4',
          },
        ],
      },
      () => {
        this.ready = true;
      },
    );
  }

  componentWillUnmount() {
    if (this.player) {
      this.player.dispose();
    }
  }

  onPlay() {
    if (!this.ready) return;
    this.player.play();
    this.setState({ playing: true });
  }

  onPuase() {
    if (!this.ready) return;
    this.player.pause();
    this.setState({ playing: false });
  }

  onSpeed(speed) {
    this.player.playbackRate(speed);
  }

  render() {
    const { action = true, btnList = [], onAction } = this.props;
    const { playing, fulling } = this.state;
    return (
      <div className={`video-item ${action ? 'action' : ''}`}>
        <div className="video-wrapper">
          <video
            ref={node => {
              this.videoNode = node;
            }}
          />
          {!playing && <Assets className="play" name="play" onClick={() => this.onPlay()} />}
          {playing && <Assets className="stop" name="stop" onClick={() => this.onPuase()} />}
        </div>
        <div className="video-bottom">
          <div className="progress" />
          {action && (
            <div className="action-bar">
              <div className="d-i-b m-r-1">
                {!playing && <Assets name="play2" onClick={() => this.onPlay()} />}
                {playing && <Assets name="stop2" onClick={() => this.onPuase()} />}
              </div>
              <div className="d-i-b m-r-1">
                <Assets name="next2" />
              </div>
              <div className="flex-block" />
              {btnList.map(btn => {
                return (
                  <div className="d-i-b m-r-1">
                    <div className="btn" onClick={() => onAction && onAction(btn.key)}>
                      {btn.title}
                    </div>
                  </div>
                );
              })}
              <div className="d-i-b m-r-1">
                <div className="btn">倍速</div>
              </div>
              <div className="d-i-b">
                {!fulling && <Assets name="full2" />}
                {fulling && <Assets name="reduction2" />}
              </div>
            </div>
          )}
        </div>
      </div>
    );
  }
}