如何在reactJS中使用onClick播放多个视频的HTML5视频？

在ReactJS中使用onClick播放多个视频的HTML5视频可以通过以下步骤实现：

首先，确保你已经安装了ReactJS和HTML5视频播放器库，比如video.js。
在你的React组件中，首先导入所需的依赖项：

import React, { Component } from 'react';
import videojs from 'video.js';

创建一个React组件来处理视频播放：

class VideoPlayer extends Component {
  componentDidMount() {
    // 在组件加载完成后初始化视频播放器
    this.player = videojs(this.videoNode, this.props.options);
  }

  componentWillUnmount() {
    // 在组件卸载前销毁视频播放器
    if (this.player) {
      this.player.dispose();
    }
  }

  render() {
    return (
      <div>
        <div data-vjs-player>
          <video
            ref={node => (this.videoNode = node)}
            className="video-js"
          />
        </div>
      </div>
    );
  }
}

在你的父组件中，创建一个视频播放列表和一个方法来处理点击事件：

class VideoPlaylist extends Component {
  handleVideoClick = (videoUrl) => {
    // 在点击事件中，更改当前视频的源并播放
    if (this.player) {
      this.player.src(videoUrl);
      this.player.play();
    }
  }

  render() {
    const videos = [
      { id: 1, url: 'video1.mp4' },
      { id: 2, url: 'video2.mp4' },
      { id: 3, url: 'video3.mp4' },
    ];

    return (
      <div>
        {videos.map(video => (
          <div key={video.id} onClick={() => this.handleVideoClick(video.url)}>
            Play Video {video.id}
          </div>
        ))}
        <VideoPlayer options={{}} />
      </div>
    );
  }
}

在上述代码中，我们首先定义了一个视频播放列表，并通过map函数将每个视频渲染成一个可点击的div元素。在点击事件处理程序中，我们使用videojs的src方法更改当前视频的源，并调用play方法开始播放。最后，我们将VideoPlayer组件放在视频播放列表下方，用于实际播放视频。

请注意，上述代码中的options属性可以用于传递视频播放器的配置选项。你可以根据需要进行自定义，比如设置视频控件样式、自动播放等。

这是一个基本的例子，你可以根据实际需求进行修改和扩展。如果你需要更多的功能，可以参考video.js的官方文档：https://docs.videojs.com/。