如何在 ReactJS 中添加视频播放器?

react jsjavascript libraryfront end technology更新于 2024/12/28 5:00:17

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

首先让我们了解一下什么是 ReactJS。React 是一个用于构建用户界面的 JavaScript 库。它可以轻松创建交互式 UI。为应用程序中的每个状态设计简单的视图，当数据发生变化时，React 会高效地更新并渲染正确的组件。您还可以构建封装的组件来管理自身的状态，然后将它们组合起来以创建复杂的 UI。

无论小型还是大型复杂的应用程序，都可以使用 ReactJS 创建。它提供了一套基本但可靠的功能，可以帮助您快速启动 Web 应用程序。它易于掌握当代和传统的应用程序，并且是一种更快的功能编码方法。 React 提供了大量现成的组件。

现在，我们来讨论一下实现方法。

首先创建一个新的 ReactJS 应用，并在我们的开发服务器上运行它，如下所示:-

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

方法

安装"react-player"软件包 -

npm install react-player

在组件文件中导入"react-player"组件 -

从"react-player"导入 ReactPlayer

将"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>
);