介绍
react-oembed 是一个用于实现 oEmbed 嵌入的 React 组件的 npm 包。oEmbed 是一个标准化的嵌入 API，支持各种类型的嵌入，例如视频、音频、图片和文本等。使用 react-oembed 包，您可以轻松地将 oEmbed 嵌入引入到您的 React 项目中。
安装
您可以通过 npm 包管理工具来安装 react-oembed 包。在命令行工具中，输入以下命令即可进行安装：
npm install react-oembed
使用
要使用 react-oembed 包，您需要在您的项目中导入 react-oembed 组件。在您的 React 组件中，您可以使用如下方式导入 react-oembed 组件：
import Oembed from 'react-oembed';
<Oembed> 组件使用如下结构：
<Oembed url={url} options={options} />url 参数是您希望嵌入的内容的链接地址。options 参数是一个对象，包含了您希望自定义的显示选项。例如:
const options = {
maxWidth: 800,
maxHeight: 600,
autoplay: true,
}在您的 React 组件中，您可以直接使用 <Oembed> 组件来展示 oEmbed 嵌入的内容。例如：
-- -------------------- ---- -------
----- ----------- - -- -- -
----- --- - ----------------------------------------------
----- ------- - -
--------- ----
---------- ----
--------- -----
--
------ -
------- --------- ----------------- --
--
--示例代码
以下是一个展示 YouTube 视频嵌入的组件示例代码：
-- -------------------- ---- -------
------ ----- ---- --------
------ ------ ---- ---------------
----- ------------ - -- -- -
----- --- - ----------------------------------------------
----- ------- - -
--------- ----
---------- ----
--------- -----
--------- ------
--
------ -
------- --------- ----------------- --
--
--
------ ------- -------------这个示例代码将展示一个宽度为 800，高度为 600 的 YouTube 视频，自动播放，同时隐藏视频信息。您可以通过自定义 options 参数来实现您的需求。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600671a730d092702382256a