npm 包 @wikipedia-tts/youtube 使用教程

在 Web 开发中，播放 YouTube 视频是很常见的需求之一。为了让用户能够更好地享受视频内容，我们可能需要实现视频自动播放、控制音量等功能。@wikipedia-tts/youtube 是一款可以帮助我们快速实现这些功能的 npm 包，下面就来介绍一下如何使用它。

安装

使用 npm 安装该包非常简单，只需在命令行中输入以下命令即可：

npm install @wikipedia-tts/youtube

用法

引入 @wikipedia-tts/youtube 后，我们需要先获取一个 YouTube 视频的 ID。ID 可在视频 URL 中找到，例如：https://www.youtube.com/watch?v=KmRnXglc5to 中，KmRnXglc5to 即为该视频 ID。

-- -------------------- ---- -------
------ ------- ---- -------------------------

----- ------ - --- ------------------------ -
  -------- --------------
  ------- -
    ---------- --------------
    ---------------- -------------------
  -
---

-------- -------------------- -
  -------------------------
-

-------- -------------------------- -
  -- ----------- -- ---------------------- -- ------ -
    -- -- ---------
  -
-

上面的代码创建了一个 ID 为 player 的 div 元素，并将其作为视频播放器的容器。videoId 参数指定使用的视频 ID，events 参数设置了两个回调函数，在视频准备好和状态变化时触发。

API 文档

loadVideoById(videoId[, startSeconds[, suggestedQuality]])

加载指定 ID 的视频。

• videoId - 要加载的视频 ID。
• startSeconds - 要从的视频位置（以秒为单位）开始播放。默认值为 0。
• suggestedQuality - 指定的建议播放质量。默认值为 default。

cueVideoById(videoId[, startSeconds[, suggestedQuality]])

与 loadVideoById 相同，但视频不会自动播放。

• videoId - 要加载的视频 ID。
• startSeconds - 要从的视频位置（以秒为单位）开始播放。默认值为 0。
• suggestedQuality - 指定的建议播放质量。默认值为 default。

playVideo()

播放当前视频。

pauseVideo()

暂停当前视频。

stopVideo()

停止当前视频。

seekTo(seconds[, allowSeekAhead])

将当前视频跳到指定的时间（以秒为单位）。

• seconds - 跳转到的时间（以秒为单位）。
• allowSeekAhead - 是否允许在跳转的起点之前缓存视频。默认为 false。

getPlayerState()

返回当前播放器的状态（整数）。

• YT.PlayerState.ENDED ：视频已结束。
• YT.PlayerState.PLAYING ：当前正在播放视频。
• YT.PlayerState.PAUSED ：当前视频已暂停。
• YT.PlayerState.BUFFERING ：当前视频正在缓冲。
• YT.PlayerState.CUED ：当前视频已暂停，正在等待加载。

setVolume(volume)

设置当前视频的音量。

• volume - 要设置的音量值，介于 0 到 100 之间。

getVolume()

获取当前视频的音量。

setPlaybackRate(rate)

设置当前视频的播放速率。

• rate - 要设置的播放速率。默认为 1。

getPlaybackRate()

获取当前视频的播放速率。

mute()

将当前视频静音。

unMute()

取消当前视频的静音。

isMuted()

返回当前视频是否被静音。

setLoop(loopPlaylists)

循环播放当前视频。

• loopPlaylists - 是否循环播放当前视频。默认为 false。

getLoop()

返回当前视频是否循环播放。

结论

@wikipedia-tts/youtube 帮助我们很容易实现了一些 YouTube 视频播放的基本功能。有了这些功能，我们可以根据具体需求，每个应用场景下选取合适的 API 接口实现自己的需求。

来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600668efd9381d61a3540d09