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

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

function fullScreen(id) {
  const element = document.getElementById(id);
  if (element.requestFullscreen) {
    element.requestFullscreen();
  } else if (element.msRequestFullscreen) {
    element.msRequestFullscreen();
  } else if (element.mozRequestFullScreen) {
    element.mozRequestFullScreen();
  } else if (element.webkitRequestFullscreen) {
    element.webkitRequestFullscreen();
  }
}

function exitFullscreen() {
  if (document.exitFullscreen) {
    document.exitFullscreen();
  } else if (document.msExitFullscreen) {
    document.msExitFullscreen();
  } else if (document.mozCancelFullScreen) {
    document.mozCancelFullScreen();
  } else if (document.webkitExitFullscreen) {
    document.webkitExitFullscreen();
  }
}

let fullAgent = null;

document.addEventListener('fullscreenchange', () => {
  if (fullAgent) fullAgent();
});

/* Firefox */
document.addEventListener('mozfullscreenchange', () => {
  if (fullAgent) fullAgent();
});

/* Chrome, Safari and Opera */
document.addEventListener('webkitfullscreenchange', () => {
  if (fullAgent) fullAgent();
});

/* IE / Edge */
document.addEventListener('msfullscreenchange', () => {
  if (fullAgent) fullAgent();
});

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

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

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

  clearTimeUpdate() {
    if (this.timeInterval) {
      clearInterval(this.timeInterval);
      this.timeInterval = null;
    }
  }

  refreshTimeUpdate() {
    if (this.timeInterval) {
      clearInterval(this.timeInterval);
      this.timeInterval = null;
    }
    this.timeInterval = setInterval(() => {
      const { onTimeUpdate } = this.props;
      if (onTimeUpdate) onTimeUpdate(this.player.currentTime());
      // this.setState({ progress: this.player.currentTime() * 100 / this.player.duration() });
    }, 1000);
  }

  onChangeProgress(value) {
    if (!this.ready) return;
    this.player.currentTime(this.player.duration() * value / 100);
    this.setState({ progress: this.player.currentTime() * 100 / this.player.duration() });
  }

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

  onPause() {
    if (!this.ready) return;
    const { onPause } = this.props;
    this.player.pause();
    this.setState({ playing: false });
    if (onPause) onPause();
    this.clearTimeUpdate();
  }

  onNext() {
    const { onNext } = this.props;
    this.player.pause();
    this.clearTimeUpdate();
    this.setState({ playing: false });
    if (onNext) onNext();
  }

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

  onFullChange() {
    this.setState({ fulling: !this.state.fulling });
    if (this.props.onFullChange) this.props.onFullChange();
  }

  onFull() {
    fullAgent = () => this.onFullChange();
    fullScreen(this.state.id);
  }

  onExitFull() {
    exitFullscreen();
  }

  render() {
    const { btnList = [], children, onAction, hideAction } = this.props;
    const { playing, fulling, id } = this.state;
    return (
      <div id={id} className={`video-item ${!hideAction ? 'action' : ''} ${fulling ? 'full' : ''}`}>
        <div className="video-wrapper">
          <video
            ref={node => {
              this.videoNode = node;
            }}
          // vjs-fluid
          />
          {!playing && <Assets className="play" name="play" onClick={() => this.onPlay()} />}
          {playing && <Assets className="stop" name="stop" onClick={() => this.onPause()} />}
        </div>
        <div className="video-bottom">
          <div className="progress" />
          {/* {this.renderProgress()} */}
          {!hideAction && <div className="action-bar">
            <div className="d-i-b m-r-1">
              <Assets name={!playing ? 'play2' : 'stop2'} onClick={() => (playing ? this.onPause() : this.onPlay())} />
              {/* {playing && <Assets name="stop2" onClick={() => this.onPause()} />} */}
            </div>
            <div className="d-i-b m-r-1">
              <Assets name="next2" onClick={() => this.onNext()} />
            </div>
            {/* <div className="m-r-1">{this.ready ? (formatMinuteSecond(this.player.currentTime())) : ('00:00')}</div>
            <div className="m-r-1">/{this.ready ? (formatMinuteSecond(this.player.duration())) : ('00:00')}</div> */}
            <div className="flex-block" />
            {btnList.map(btn => {
              if (btn.full && !fulling) return '';
              if (!btn.show) return '';
              return (
                <div className="d-i-b m-r-1">
                  {btn.render ? (
                    <div className="fix-btn-action d-i-b" onClick={() => {
                      if (btn.pause) this.onPause();
                      if (onAction) onAction(btn.key);
                    }}>
                      {btn.render(btn.active)}
                    </div>
                  ) : (<div
                    className={`btn-action ${btn.active ? 'active' : ''}`}
                    onClick={() => onAction && onAction(btn.key)}
                  >
                    {btn.title}
                  </div>)}
                </div>
              );
            })}
            <div className="d-i-b m-r-1">
              <div className="btn-action">倍速</div>
            </div>
            <div className="d-i-b">
              {!fulling && <Assets name="full2" onClick={() => this.onFull()} />}
              {fulling && <Assets name="reduction2" onClick={() => this.onExitFull()} />}
            </div>
          </div>}
        </div>
        {children}
      </div>
    );
  }

  renderProgress() {
    const { hideProgress } = this.props;
    const { progress } = this.state;
    return !hideProgress && <Slider value={progress || 0} tooltipVisible={false} onChange={(value) => this.onChangeProgress(value)} />;
  }
}