开发基于 React 的在线视频播放器

要开发基于 React 的在线视频播放器，您可以使用一些现有的 React 视频播放器库，比如 ReactPlayer 或 Video.js。

这里给出一个使用 ReactPlayer 库的示例代码：

1. 首先，安装 ReactPlayer 库：

   npm install react-player
   

 2、在 React 组件中引入 ReactPlayer：

import React from 'react';
import ReactPlayer from 'react-player';

class VideoPlayer extends React.Component {
  render() {
    return (
      <ReactPlayer
        url='https://www.youtube.com/watch?v=ysz5S6PUM-U'
        playing
        controls
      />
    );
  }
}

export default VideoPlayer;

在上述代码中，我们创建了一个 VideoPlayer 组件，其中包含一个 ReactPlayer 组件。我们将 url 属性设置为视频的 URL 地址，playing 属性设置为 true，表示视频会自动播放，controls 属性设置为 true，表示视频会显示播放器的控制条。

3、在 App 组件中使用 VideoPlayer：

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

function App() {
  return (
    <div>
      <h1>React Video Player</h1>
      <VideoPlayer />
    </div>
  );
}

export default App;

1. 在上述代码中，我们将 VideoPlayer 组件放在 App 组件中，可以根据需要修改 App 组件的代码。
2. 现在已经有了一个基于 ReactPlayer 库的简单视频播放器。您可以根据需要对播放器进行自定义，例如修改样式、添加播放列表、显示视频标题等等。