YouTube 视频的 getCurrentTime()

Question

我正在用 Javascript 编写 Chrome 扩展程序，我想获取在 youtube.com 上播放视频的当前时间。我尝试使用问题 Getting Current YouTube Video Time 的答案，例如：

ytplayer = document.getElementById("movie_player");

ytplayer.getCurrentTime();

但我确实收到以下错误：“未捕获的 TypeError：无法读取属性 'getCurrentTime' of null”；

我做错了什么？我为 ElementId 尝试了不同的值 - movie_player, player....

感谢任何帮助。提前致谢。

干杯。

编辑：

这是我的清单：

{
  "manifest_version": 2,

  "name": "",
  "description": "",
  "version": "1.0",

  "browser_action": {
    "default_icon": "icon.png",
    "default_popup": "basic.html"
  },
  "permissions": [
    "tabs",
    "activeTab", "http://*/*", "https://*/*"
  ]
}

另一件事是： 如果我执行这段代码：

ytplayer = document.getElementById("movie_player");

ytplayer.getCurrentTime();

在 Youtube 页面上的 Javascript 控制台中，它可以正常工作并返回当前时间。 但是，如果我从扩展程序或扩展程序的控制台执行此值，则第一行返回值 null。

因此，正如 Ben 在下面假设的那样，问题似乎是我的扩展程序甚至无法访问 Youtube 页面。

感谢任何帮助，所以提前致谢。

干杯

Answer 1

使用以下代码适用于 chrome 扩展：

video = document.getElementsByClassName('video-stream')[0];
console.log(video);
console.log(video.currentTime);

Answer 2

2020 年，我们似乎应该使用：player.playerInfo.currentTime。

full code on codepen

Answer 3

正如 Ben 正确假设的那样，您正在后台页面的上下文中执行代码，这是错误的。

要与其他页面交互，您需要在其中注入内容脚本。请参阅here 的概述。您可能需要了解 Messaging 的工作原理，以便在内容脚本中收集数据并将其传达给后台页面。

举个简单的例子，你可以有一个文件inject.js

// WARNING: This example is out of date
// For the current HTML5 player, see other answers' code snippets
ytplayer = document.getElementById("movie_player");
ytplayer.getCurrentTime();

在您的后台页面脚本中，您可以按如下方式将其注入当前页面（例如，当单击按钮时）

chrome.browserAction.onClicked.addListener(function(tab) {
  chrome.tabs.executeScript({
    file: 'inject.js'
  });
});

然后，您将在当前打开的页面的控制台中看到执行结果。要报告结果，您需要使用chrome.runtime.sendMessage

Answer 4

您只能在引用正确页面时使用 getElementById。您使用了正确的 ID。如果您尝试访问另一个页面的播放表单，您可以使用 jquery .load() 函数

---------编辑----------

在示例中，他们这样做： function getCurrentTime() { var currentTime = player.getCurrentTime(); return roundNumber(currentTime, 3); }