react 中 多个video自带全屏 点击全屏时调用方法

在 React 中，你可以使用类组件或函数组件来实现多个 video 自带全屏并在点击全屏时调用方法。以下是一个使用类组件的示例：

import React, { Component } from 'react';
import videojs from 'video.js';
import 'video.js/dist/video-js.css';

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

  componentDidMount() {
    this.player = videojs(this.videoRef.current, this.props, function onPlayerReady() {
      console.log('Player is ready');
    });

    this.player.on('fullscreenchange', this.handleFullscreenChange);
  }

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

  handleFullscreenChange = () => {
    if (this.player.isFullscreen()) {
      // 进入全屏模式时调用的方法
    } else {
      // 退出全屏模式时调用的方法
    }
  };

  render() {
    return (
      <div data-vjs-player>
        <video ref={this.videoRef} className="video-js vjs-default-skin" controls>
          <source src={this.props.src} type="video/mp4" />
        </video>
      </div>
    );
  }
}

export default VideoPlayer;

在这个示例中，我们使用了 video.js 播放器库来创建视频播放器。我们通过 `videoRef` 引用 video 元素，然后在 `componentDidMount` 生命周期方法中创建 video.js 播放器实例。我们还添加了一个 `fullscreenchange` 事件监听器，该监听器将在进入或退出全屏模式时触发，并调用 `handleFullscreenChange` 方法。

为了在应用中使用多个视频播放器，你可以在父组件中渲染多个 `VideoPlayer` 组件。例如：

import React, { Component } from 'react';
import VideoPlayer from './VideoPlayer';

class App extends Component {
  render() {
    return (
      <div>
        <VideoPlayer src="video1.mp4" />
        <VideoPlayer src="video2.mp4" />
      </div>
    );
  }
}

export default App;

这将在应用中渲染两个视频播放器，每个播放器都可以自带全屏，并在进入或退出全屏模式时调用相应的方法。