react原生视频全屏控制

import React, { Component } from 'react';

class Video extends Component {
  constructor(props) {
    super(props);
    this.videoRef = React.createRef();
  }

  handleFullscreen = () => {
    const videoElement = this.videoRef.current;

    if (videoElement.requestFullscreen) {
      videoElement.requestFullscreen();
    } else if (videoElement.mozRequestFullScreen) {
      videoElement.mozRequestFullScreen();
    } else if (videoElement.webkitRequestFullscreen) {
      videoElement.webkitRequestFullscreen();
    } else if (videoElement.msRequestFullscreen) {
      videoElement.msRequestFullscreen();
    }
  };

  render() {
    return (
      <div>
        <video ref={this.videoRef} src={this.props.src} width={this.props.width} height={this.props.height} controls />
        <button onClick={this.handleFullscreen}>全屏</button>
      </div>
    );
  }
}

export default Video;

import React from 'react';
import Video from './Video';

function App() {
  return (
    <div>
      <h1>React原生视频全屏控制示例</h1>
      <Video src="video.mp4" width={640} height={360} />
    </div>
  );
}

export default App;