如何在 React 中创建响应式视频播放器

大多数知名网站通常都有自己的自定义视频播放器，例如 Youtube、Facebook 等。因此，作为一名 Web 开发者，有时你想在网站中嵌入视频，但却发现很难创建一个拥有出色 UI 的视频播放器。今天，我将向你展示如何在 React 中创建出色的视频和音频播放器。

由于默认的 HTML5 视频播放器在不同的浏览器中通常看起来不同，因此您肯定希望避免使用它，并且肯定不想从头开始创建一个，所以最好的想法是使用一个包。

本教程我们将使用 ReactJS Media 库。因为它拥有出色的文档，而且它的 HTML5 播放器相比 React Player 等其他知名库拥有更出色的 UI。话不多说，让我们开始吧。

安装

您可以使用任何您喜欢的包管理器来安装它，我们将在这里演示npm，yarn然后转到您的终端并输入以下命令。

`npm`

npm install reactjs-media

`yarn`

yarn add reactjs-media

现在您已经安装它，现在可以使用它了。

成分

要使用它，你必须从导入所需的组件reactjs-media。组件列表如下：

ReactVideo用于本机视频播放器。
ReactAudio用于音频播放器。
FacebookPlayer用于 Facebook 播放器（用于播放来自 Facebook 的视频）。
Image用于响应和优化的图像。
YoutubePlayer适用于 Youtube 播放器。

如果有更多的玩家加入，我会更新这个页面。因为每次都会有更多玩家加入。

用法

现在让我演示如何使用每个组件。

视频播放器

这是原生视频播放器，但经过了增强，并拥有出色的用户界面。您需要从库中导入它并传入 props。它可以用于浏览器支持的普通视频文件。

例子

import React from "react";
import { ReactVideo } from "reactjs-media";

const App = () => {
    return (
        <div>
            <ReactVideo
                src="https://www.example.com/url_to_video.mp4"
                poster="https://www.example.com/poster.png"
                primaryColor="red"
                // other props
            />
        </div>
    );
};

export default App;

这将创建一个类似于这样的播放器：它有更多内容，可以在官方文档中找到

props

音频播放器

音频播放器是用于播放音频文件的，可以这样使用。

import React from "react";
import { ReactAudio } from "reactjs-media";

const MyVideo = () => {
    return (
        <>
            <ReactAudio
                src="/audio.mp4"
                poster="/poster.png"
                //you can pass in other props
            />
        </>
    );
};

您还可以从包中的另一个文件导入音频播放器。

import { ReactAudio } from "reactjs-media/audio";

Youtube播放器

使用起来很简单，您只需添加视频网址即可。

例子

const App = () => {
    return (
        <div>
            <YoutubePlayer
                src="https://youtu.be/UZCO5k1Nu70" // Reqiured
                width={650}
                height={600}
            />
        </div>
    );
};

它还有其他道具，因此请在文档中查看它们。

Facebook 播放器

这用于播放来自 Facebook 的视频。您只需复制 Facebook 视频 URL 并将其作为srcprop 粘贴到组件中即可。播放器会自动将 Facebook SDK 加载到body您应用的相应部分，然后播放视频。要了解更多信息，请访问文档

例子

import React from "react";
import { FacebookPlayer } from "reactjs-media";

const MyVideo = () => {
    return (
        <>
            <FacebookPlayer
                src="https://www.facebook.com/facebook/videos/10153231379946729/"
                width={650}
                height={600}
            />
        </>
    );
};

结论

对我来说，如果你想创建一个视频播放器，我觉得这是目前最好的软件包了。虽然可能还有其他更好的，但就我所知，就原生视频播放器而言，这是我见过的最好的，因为它还包含一个音频播放器组件。你可以在Github上找到它的源代码。

鏂囩珷鏉ユ簮锛�https://dev.to/jimjunior/how-to-create-a-responsive-video-player-in-react-4997