在前端开发中，视频封面（video cover）的使用是很常见的一个需求。常见的处理方式是从视频中的某一帧截图作为封面，但是这样的方式存在缺陷，封面极可能与视频的内容不符，无法真正反映出视频的内容。而 @jonny/react-video-cover 这个 npm 包的出现，将这个问题解决了。本文将带您一步步了解 @jonny/react-video-cover 的使用方法。
什么是 @jonny/react-video-cover
@jonny/react-video-cover 是 React 的一个组件，用于生成与视频内容相关的封面图片，使用了 Video 和 Canvas API。
安装 @jonny/react-video-cover
在使用 @jonny/react-video-cover 前，需要先将其安装：
npm install @jonny/react-video-cover
如何使用 @jonny/react-video-cover
下面是使用 @jonny/react-video-cover 的简单实现。
如果您的视频作为一个 src 属性被传入：
-- -------------------- ---- -------
------ ---------- ---- ---------------------------
----- --- ------- --------------- -
-------- -
------ -
-----------
---------------
---- -----------------------------
--------- -----
------ -----
----- -----
--
-----------------------
--------------------------------- -- -
--------------------- - ---------------
--
--------
------ -------
------- -------
--
--
--
-
-如果您的视频在组件内部：
-- -------------------- ---- -------
------ ---------- ---- ---------------------------
----- --- ------- --------------- -
-------- -
------ -
-----------
---------------
---- -----------------------
--------- -----
------ -----
----- -----
--
-----------------------
--------------------------------- -- -
--------------------- - ---------------
--
--------
------ -------
------- -------
--
--
--
-
-@jonny/react-video-cover 的 props
下面是 @jonny/react-video-cover 的 props 列表。
videoOptions
-src: string/(HTML5 VideoElement) 视频的路径或是真实的 video 元素
-autoPlay: boolean 是否自动播放
-muted: boolean 是否不播放声音
-loop: boolean 是否循环播放
remeasureOnWindowResize
这个属性为 true，则在窗口正在改变大小时，组件会重新测量封面图片的位置。
getResizeNotifier
回调函数，返回一个 resizeNotifier，用于在纵向滚动时动态地测量并更新封面图位置。
style
封面图片的样式。
总结
在本文，我们学习了 @jonny/react-video-cover 这个 npm 包，了解了它的作用以及如何使用它。@jonny/react-video-cover 的使用可以为我们在前端开发中生成更为真实、与视频内容相关的封面图片提供帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60066bc4967216659e244310