在开发 Web 应用程序时，许多情况下需要与嵌入的视频交互。当涉及到视频时，获取当前视频的播放时间是一项常见任务。本文将介绍如何使用 JavaScript 和 YouTube API 在您的 Web 应用程序中获取当前 YouTube 视频的时间。
使用 YouTube API
要获取嵌入在网页中的 YouTube 视频的当前时间，最好的方法是使用 YouTube API。通过这种方式，您可以轻松地与视频进行交互，并获取有关视频状态的更多信息。
以下是获取当前 YouTube 视频时间的步骤：
- 在 Google Developers Console 中创建一个新项目。
- 启用 YouTube Data API v3。
- 创建 OAuth 2.0 凭据以进行身份验证。
- 添加
https://www.googleapis.com/auth/youtube.readonly范围以授予对数据的只读访问权限。
注：以上步骤可能需要使用 Google 帐号登录。
获取当前视频时间
一旦设置了 YouTube API，您可以编写 JavaScript 代码来获取嵌入在页面上的 YouTube 视频的当前时间。以下是示例代码：
-- -------------------- ---- -------
-- ------- --- ----- -- ----- ---- ---- ----
--- ------- - --------------
-- ---- ---- ----- --- ------ ------ --- ---- ---------------
--- --- - ---------------------------------
------- - -------------------------------------
--- -------------- - -------------------------------------------
------------------------------------------- ----------------
-- ---- -------- ------- -- -------- ---- ------- -------
-- ----- --- --- ---- ----------
--- -------
-------- ------------------------- -
------ - --- ------------------- -
------- ------
------ ------
-------- --------
------- -
---------- --------------
---------------- -------------------
-
---
-
-- --- --- ----- ---- -------- ---- --- -------- ----- --------
-- --- -------- --------- ---- ---- ------- - ----- ----------
-- --- ------ ------ ---- --- --- ------- --- ---- -----
--- ---- - ------
-------- -------------------------- -
-- ----------- -- ---------------------- -- ------ -
--------------------- ------
---- - -----
-
-
-------- ----------- -
-------------------
-在这个示例中，我们使用了 YT.Player 构造函数来创建一个嵌入式播放器。通过传递视频 ID 和事件处理程序，我们可以指定播放器的大小和在不同状态下播放器需要执行的操作。在本例中，我们在播放视频时检查 YT.PlayerState.PLAYING 并设置一个计时器来停止视频。
现在，您已经可以获取当前嵌入的 YouTube 视频的时间。要显示该值，请按照以下步骤操作：
- 创建一个 HTML 元素来存储当前播放时间。
- 在
onPlayerStateChange()函数中添加以下 JavaScript 代码：
document.getElementById('current-time').innerHTML = player.getCurrentTime();这将获取当前视频的播放时间并将其显示在指定元素中。
结论
本文介绍了如何使用 JavaScript 和 YouTube API 在您的 Web 应用程序中获取当前 YouTube 视频的时间。通过 API，您可以轻松地与嵌入的视频进行交互，并获取有关视频状态的更多信息。希望这篇文章对您有所帮助！
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/31187