介绍
wistia-player-api-loader 是一个用于加载 Wistia 视频播放器 API 的 npm 包。Wistia 允许用户将视频嵌入到网页上并具有独特的 JavaScript API，该 API 提供了许多有用的方法，例如播放、暂停、重新加载等等。wistia-player-api-loader 可以帮助我们在页面上加载 Wistia 视频播放器 API，并提供了一些简单的方法，使得我们更容易地控制视频播放器。
安装
可以通过 npm 安装 wistia-player-api-loader：
npm install wistia-player-api-loader --save
使用
首先，需要在页面中为 Wistia 视频嵌入标签定义一个 ID。例如：
<div class="wistia_responsive_padding" style="padding:56.25% 0 0 0;position:relative;">
<div class="wistia_responsive_wrapper" style="height:100%;left:0;position:absolute;top:0;width:100%;">
<div class="wistia_embed wistia_async_XXXXXXXXX videoFoam=true playerColor=1E73BE" id="wistia-player"></div>
</div>
</div>在此示例中，我们使用了 Wistia 视频嵌入代码，其中 wistia_async_XXXXXXXXX 是视频 ID。该 ID 很重要，因为我们需要将其传递给 wistia-player-api-loader。
安装 wistia-player-api-loader 后，我们可以使用以下代码加载 Wistia 播放器 API：
-- -------------------- ---- ------- ----- ------------ - ------------------------------------ ----- ------ - --------------- ----- ------- - ---------------- ------------------------- -------- ----------------------------- -- - ------------------- --- --- ---- ------------ ---------- -- ------------------------------ ---
在此示例中，我们首先使用 require 引入 wistia-player-api-loader 模块，并定义了 apiKey 和 videoId。接着我们使用 WistiaLoader.load() 方法来加载 Wistia 播放器 API。此方法接受三个参数：API 密钥、视频 ID 和视频播放器的选择器。选择器应该是嵌入 Wistia 视频的容器的 CSS 选择器。最后，该方法返回一个 Promise，Promise 被解析为该视频的播放器对象。
我们可以使用播放器对象来控制 Wistia 视频播放器。例如：
player.play();
使用上述代码，我们可以播放视频。
示例代码
接下来是一个完整的示例代码，其中我们使用 wistia-player-api-loader 控制演示用 Wistia 视频：
-- -------------------- ---- -------
--------- -----
------
------
------------- ------ --- ---------------
-------
------
---- --------------------------------- --------------------- - - ----------------------
---- --------------------------------- ---------------------------------------------------------------
---- ------------------- ---------------------- -------------- ------------------- -------------------------
------
------
------- ------------------------------
------- -------------------------------
------- --------------------------------
--------
----- ------------ - ------------------------------------
----- ------ - ---------------
----- ------- - ----------------
--- -------
------------------------- -------- ------------------------ -- -
------ - --
------------------- --- --- ---- ------------ ----------
---
---------------------------------------------------------------- -- -- -
--------------
---
----------------------------------------------------------------- -- -- -
---------------
---
------------------------------------------------------------------ -- -- -
----------------
---
---------
-------
-------在此示例中，我们使用了 Wistia 视频嵌入标签，并添加了三个按钮，分别用于播放、暂停和卸载视频。我们使用了 wistia-player-api-loader 来控制视频播放器。在我们加载 API 后，我们将返回的播放器对象存储在 player 变量中，并使用 player.play()、player.pause() 和 player.unload() 方法来控制视频播放器。
结论
wistia-player-api-loader 可以帮助我们更容易地控制 Wistia 视频播放器。使用它，我们可以加载 Wistia 播放器 API，并使用返回的播放器对象来控制视频播放器。这个包也非常容易使用和集成到我们的网站和应用程序中，为我们的前端开发带来了极大的帮助。
参考文献
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600671cf30d0927023822934