如何在 ReactJS 中创建视频播放器？

在本文中，我们将学习如何在 ReactJS 中创建视频播放器。视频播放器是一种用于播放数字视频数据的媒体播放器。

React 是一个免费的开源前端 JavaScript 库，用于构建用户界面或 UI 组件。它由 Facebook 和一个由个人开发者和公司组成的社区维护。

方法：要创建我们的视频播放器，我们将使用 react-loading 包，因为它功能强大、轻量级且完全可定制。之后，我们将使用已安装的软件包将视频播放器添加到我们的主页。

创建 ReactJs 应用程序：您可以使用以下命令创建一个新的 ReactJs 项目：

npx create-react-app gfg

安装所需的包：现在我们将使用以下命令安装 react-video-js-player 包：

npm i react-video-js-player

项目结构：它看起来像这样。

添加视频播放器：在这个例子中，我们将使用我们安装的包在我们的应用程序的主页上添加 react-loading。我们在示例中使用下面的图像和视频。

现在在App.js文件中添加以下代码来创建视频播放器。

Javascript

import React, { Component } from 'react';
import VideoPlayer from 'react-video-js-player';
   
class VideoApp extends Component {
    player = {}
    state = {
        video: {
            src: "/video.mp4",
            poster: "/1.png"
        }
    }
   
    onPlayerReady(player){
        this.player = player;
    }
   
    render() {
        return (
            
                
            
        );
    }
}
export default VideoApp;

说明：在上面的例子中，我们首先从 react-video-js-player 包中导入 VideoPlayer 组件。之后，我们正在创建我们的 onPlayerReady 和 state函数。然后我们使用已安装包的 VideoPlayer 组件添加我们的视频播放器。

运行应用程序的步骤：在终端中运行以下命令来运行应用程序。

npm start

如何在 ReactJS 中创建视频播放器？

Javascript

输出：