在前端开发中，有很多时候需要引入一些外部媒体资源，例如 YouTube 视频、Twitter 推文、Instagram 图片等等。而这些媒体资源都有各自的嵌入方式，这就给开发带来了一定的麻烦。oEmbed（Open Embed）是一种嵌入式协议，可以让我们方便地嵌入外部媒体资源。而 oembed-any 就是一款 npm 包，它可以让我们轻松实现 oEmbed。
安装
使用 npm 进行安装：
npm install oembed-any
使用
获取嵌入代码
oembed-any 提供了 fetch 方法，我们可以通过这个方法获取嵌入代码，以 YouTube 视频为例：
const oembed = require('oembed-any');
oembed.fetch('https://www.youtube.com/watch?v=dQw4w9WgXcQ')
.then(data => {
console.log(data.html);
})
.catch(err => console.error(err));fetch 方法会返回一个 Promise，如果请求成功，我们可以从返回值中获取嵌入代码。
自定义参数
除了使用默认参数外，我们还可以自定义参数，例如调整尺寸、隐藏某些元素等等，以 YouTube 视频为例：
-- -------------------- ---- -------
----------------------------------------------------------- -
--------- ------
---------- ------
------------- ----
--
---------- -- -
-----------------------
--
---------- -- --------------------完整的参数列表可以在 oembed-any 的文档中查看。
嵌入到页面
获取嵌入代码后，我们需要将其嵌入到页面中，最简单的方式就是使用 innerHTML，以 YouTube 视频为例：
const iframe = document.createElement('iframe');
iframe.innerHTML = data.html;
document.body.appendChild(iframe);支持的媒体资源
oembed-any 支持的媒体资源非常广泛，包括但不限于：
- YouTube
- Vimeo
- SoundCloud
- Hulu
我们可以使用 providers 方法查看支持的媒体资源信息：
console.log(oembed.providers);
结尾
oEmbed 是一个非常便捷的嵌入式协议，可以让我们轻松地嵌入外部媒体资源。而 oembed-any 则是一款 npm 包，可以让我们更加方便地使用 oEmbed。相信这个教程能够帮助您更好地使用 oembed-any，提高开发效率。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60066fac3d1de16d83a671ec