1. 前言
在网页开发中，经常需要嵌入各种媒体资源，比如视频、音频、甚至是社交媒体内容等等。而这些媒体资源的展示方式也各不相同，所以我们需要使用不同的嵌入方式来实现。其中，使用 iframe 标签来嵌入外部网站的媒体资源是比较常见且灵活的方式。但是，这种方式需要为每一个媒体资源都写一个 iframe 标签，不仅麻烦，而且还容易影响页面的性能。
为了解决这个问题，npm 社区中推出了 media-embed-server 这个 npm 包。这个包可以帮助我们将各种媒体资源统一处理并生成嵌入代码，只需要一行代码就能嵌入所有的媒体资源，而且还可以减轻页面的负担。接下来，我们就来了解一下 media-embed-server 的使用方法。
2. 安装 media-embed-server
要使用 media-embed-server，首先需要在命令行中输入以下指令来安装：
npm install -g media-embed-server
3. 基本使用
安装完成后，我们就可以像下面这样简单的使用 media-embed-server 了：
media-embed-server https://www.youtube.com/watch?v=dQw4w9WgXcQ
这里我们使用了 YouTube 的网址作为示例。运行后，我们会得到一段类似下面的 HTML 代码：
<iframe src="https://www.youtube.com/embed/dQw4w9WgXcQ" frameborder="0" allowfullscreen></iframe>
这里实际上就是向 media-embed-server 传入了一个 URL，然后它自动帮我们生成了一个嵌入代码。我们将这段代码复制粘贴到 HTML 文件中，就可以在网页上嵌入 YouTube 视频了。
4. 自定义嵌入样式
通过 media-embed-server 生成的媒体嵌入代码，样式通常是默认的。但是如果我们需要自定义嵌入样式的话，我们也可以像下面这样来处理：
media-embed-server https://www.youtube.com/watch?v=dQw4w9WgXcQ \
--style=".my-video{width:100%;}"在这个命令中，我们通过 --style 参数指定了我们要自定义的嵌入样式，这里的样式是设置视频宽度为 100%。注意，在这个命令中我们使用了 \ 符号来将命令拆分成两行，这仅仅是为了方便，实际上可以一行命令执行。生成的嵌入代码中，自定义样式将被自动应用。
5. 支持的媒体资源
media-embed-server 目前支持的媒体资源如下：
- YouTube
- Vimeo
- Dailymotion
- SoundCloud
- Bandcamp
- CodePen
6. 总结
media-embed-server 是一个非常实用的 npm 包，它可以帮助我们快速生成媒体资源的嵌入代码，而且还可以自定义嵌入样式。对于网页开发人员来说，media-embed-server 是一个非常好的工具，它不仅可以帮助我们提高开发效率，还可以优化网页性能。如果你还没有尝试过 media-embed-server，现在就可以去试试，并感受它的便利吧！
附上一段示例代码：
-- -------------------- ---- -------
------
------
-----------------------
-------
------
----------- ---------
---- ------------------------
------- ------------------------------------------------------------------------------------
--------
--- --- - ----------------------------------------------
--- -------------- - -------------------------------------------
--------------------------------- ---- ------- ------------------------------------------------------------------------------------------------------------------- ------------------------------------------------------------------
---------
------
-------
-------在这个示例代码中，我们首先引入了 media-embed-server 的 JavaScript 文件，然后通过 JavaScript 代码来生成嵌入代码，并将其渲染到页面中的 div 元素中。同时，我们还通过自定义样式，将嵌入的视频大小设置为与容器相同，并关闭了 video 的自带播放器。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60066f3b1d8e776d08040a13