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