ReactJS 如何添加一个视频播放器

为了在ReactJS中添加一个视频播放器，我们首先需要安装一个视频播放器库，如 “react-player “或 “react-video-js”。接下来，我们导入该库并在我们的JSX代码中使用指定的组件。最后，我们提供必要的道具，如视频源和任何自定义选项给该组件。

让我们首先了解什么是ReactJS。React是一个用于构建用户界面的JavaScript库。它使创建交互式UI变得容易。为你的应用程序中的每个状态设计简单的视图，当你的数据发生变化时，React会有效地更新和呈现正确的组件。你也可以建立管理自己状态的封装组件，然后将它们组合起来，形成复杂的UI。

无论是小型还是大型的、复杂的应用程序都可以用ReactJS创建。它提供了一个基本但可靠的功能集，可以让一个网络应用起步。它很容易掌握当代和遗留的应用程序，是一种更快的功能编码方法。React提供了大量现成的组件，可以随时使用。

现在，让我们来讨论做同样事情的方法。

为了开始工作，首先创建一个新的ReactJS应用程序，并在我们的开发服务器上运行，像这样

npx create-react-app video-app
cd video-app
npm start

方法

安装 ” react-player “软件包 –

npm install react-player

在你的组件文件中导入’react-player’组件 –

import ReactPlayer from 'react-player'

将’react-player’组件添加到你希望视频播放器出现的JSX代码中 –

<ReactPlayer url={'path/to/video'} controls={true} />

确保视频文件在项目中被正确导入或引用。
运行该应用程序，视频播放器应该出现在页面上。
你可以用不同的道具定制播放器，如宽度、高度、控制、循环等。
你还可以使用 “onPlay “和 “onPause “事件来跟踪视频播放器的状态–“

<ReactPlayer url={'path/to/video'} controls={true} onPlay={() => console.log('video is playing')} onPause={() => console.log('video is paused')} />

你也可以使用 “ref “道具来访问播放器的状态和组件中的方法 —

const playerRef = useRef(null);
<ReactPlayer ref={playerRef} url={'path/to/video'} controls={true} />

例子

PlayerComponent.js

import ReactPlayer from 'react-player';
import React, { useRef } from 'react';
const VIDEO_PATH = 'https://youtu.be/0BIaDVnYp2A';
function PlayerComponent() {
   const playerRef = useRef(null);
   return (
      <div>
         <ReactPlayer ref={playerRef} url={VIDEO_PATH} controls={true} />
      </div>
   )
};
export default PlayerComponent;

index.js

import React, { StrictMode } from 'react';
import { createRoot } from 'react-dom/client';
import PlayerComponent from './PlayerComponent';
const rootElement = document.getElementById('root');
const root = createRoot(rootElement);
root.render(
   <StrictMode>
      <PlayerComponent />
   </StrictMode>
);