简介
React.js 是目前前端领域非常热门的一个技术，它是 Facebook 开发的一款 JavaScript 库，用于构建用户界面。在使用 React.js 开发页面时，经常需要在页面中嵌入视频或音频等嵌入式内容。此时，我们可以使用 react-responsive-embed 这个 npm 包。
react-responsive-embed 是一个轻量级的 React.js 组件，用于在你的网站上嵌入响应式的视频，包括 YouTube 和 Vimeo，但是它也支持自定义的嵌入式视频。
安装
使用 npm 安装 react-responsive-embed：
npm install react-responsive-embed --save
使用
首先，你需要在你的 React 组件中导入 react-responsive-embed：
import ResponsiveEmbed from 'react-responsive-embed';
然后，你可以使用该组件在你的页面中嵌入响应式的视频，如下所示：
<ResponsiveEmbed src='https://www.youtube.com/embed/_-CD_5YhJTA' />
在这个例子中，我们嵌入了一个 YouTube 视频。
你可以通过设置 width 和 height 属性来控制视频的宽度和高度：
<ResponsiveEmbed src='https://www.youtube.com/embed/_-CD_5YhJTA' width='560' height='315' />
此外，react-responsive-embed 还支持在视频中添加回调函数，例如 onPlay，onPause 和 onEnd。当视频播放，暂停或结束时，你可以使用这些回调函数来执行特定的操作，如下所示：
<ResponsiveEmbed
src='https://www.youtube.com/embed/_-CD_5YhJTA'
onPlay={() => console.log('视频已开始播放')}
onPause={() => console.log('视频已暂停')}
onEnd={() => console.log('视频已结束')}
/>除此之外，react-responsive-embed 还支持定制化 UI，例如自定义 video 标签的属性：
<ResponsiveEmbed
src='https://www.youtube.com/embed/_-CD_5YhJTA'
allowFullScreen={true}
frameborder='0'
style={{padding: '10px'}}
/>示例代码
-- -------------------- ---- -------
------ ----- ---- --------
------ --------------- ---- -------------------------
-------- ----- -
------ -
---- ----------------
------ ---------------------- - ----- -------------
----------------
-----------------------------------------------
-----------
------------
----------------------
---------------
---------------- --------
---------- -- ------------------ ----------
----------- -- ----------------------
--------- -- ---------------------
--
------
--
-
------ ------- ----这段代码将在网页上嵌入一个响应式的 YouTube 视频，并在控制台输出相应的信息。
结论
在这篇文章中，我们介绍了一个 npm 包 react-responsive-embed。我们了解了如何在 React.js 中使用该组件来嵌入响应式视频，并了解了该组件的几个常用属性和回调函数。现在你已经知道如何使用 react-responsive-embed，你可以开始使用它来在你的网站上嵌入响应式视频了。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005669f81e8991b448e2d81