如何使用html5视频标签在reactjs中创建视频播放列表？

import React, { Component } from 'react';

class VideoPlayer extends Component {
  constructor(props) {
    super(props);
    this.state = {
      videos: [
        { url: 'video1.mp4', title: 'Video 1', description: 'Description 1' },
        { url: 'video2.mp4', title: 'Video 2', description: 'Description 2' },
        { url: 'video3.mp4', title: 'Video 3', description: 'Description 3' }
      ]
    };
  }

  handleVideoClick(url) {
    // 处理视频点击事件，例如切换视频或执行其他操作
  }

  render() {
    return (
      <div>
        {this.state.videos.map((video, index) => (
          <video key={index} src={video.url} controls onClick={() => this.handleVideoClick(video.url)}>
            <p>{video.title}</p>
            <p>{video.description}</p>
          </video>
        ))}
      </div>
    );
  }
}

export default VideoPlayer;