前言
在现代网页设计中，丰富的内容和嵌入式视频是至关重要的。一些网站也会使用第三方社交媒体的视频。然而，这也会增加页面加载的时间、代码复杂度以及交互流畅性等问题。clean-embed-video 这个 npm 包就可以解决这些问题。
了解 clean-embed-video
clean-embed-video 是一个轻量级的 NPM 包，它可以将 embed 的嵌入式视频转化为 "a" 标签加上缩略图来避免页面加载过慢，同时减少页面复杂度。
安装和使用
在继续使用之前，确保您已正确安装 Node.js。
使用 npm 安装：
npm install clean-embed-video --save
使用该包的最简单方法是通过 ES6 引入：
import CleanEmbedVideo from "clean-embed-video";
const videoWrapper = document.getElementById("video-wrapper");
CleanEmbedVideo.runOn(videoWrapper);可以使用类似 <div id="video-wrapper"><iframe src="..."></iframe></div> 的 HTML 代码。
runOn() 方法会查找给定父级节点（在上面的例子中为 videoWrapper）下的所有 embed（包括 YouTube、Vimeo 等等）和 object 标签，将它们替换为 "a" 标签并用 "img" 标签作为缩略图。该方法也会将缩略图中包括视频的链接暴露为 data-embed-url。
如果你需要一些自定义配置，则可以在代码中配置：
import CleanEmbedVideo from "clean-embed-video";
CleanEmbedVideo.configure({
height: "auto",
width: "100%",
ytTheme: "dark",
lazyLoad: true
});resolveConfig() 方法可以检查全局配置和特定的配置。
-- -------------------- ---- ------- ------ ---------------- - ------------- - ---- -------------------- ----- ------------ - - ------- ------- ------ ------- -------- ------ -- ---------------------------------------- ----- ------------ - ----------------------------------------- ----- -------------- - - ------ ----- -- ----- ------ - --------------------------- ---------------- ----------------------------------- --------
在此示例中，我们配置了全局选项以及指定了特定选项。
总结
正如你所见，使用 clean-embed-video 非常简单。这个npm 包的价值超过了它的大小。将其与其他库和框架一起使用，您可以创建更完整、更快速和更具吸引力的 Web 用户界面。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60057b1381e8991b448eb7a0