在 youtube.com 上获取 Youtube 视频的当前时间（例如 document.getElementById('movie_player').getCurrentTime()）答案

【问题标题】：Get current time of Youtube Video on youtube.com (e.g. document.getElementById('movie_player').getCurrentTime())在 youtube.com 上获取 Youtube 视频的当前时间（例如 document.getElementById('movie_player').getCurrentTime()）
【发布时间】：2017-04-15 15:48:45
【问题描述】：

我正在创建一个 Google Chrome 扩展程序，它依赖于了解“youtube.com”上正在播放的视频的当前时间。我知道，原则上，document.getElementById('movie_player').getCurrentTime() 应该返回这个，但是在注入页面的内容脚本中调用它会产生：

未捕获的类型错误： document.getElementById('movie_player').getCurrentTime 不是函数(…)

我能够在 Chrome 控制台中运行该命令并获得正确的返回值。

在此问题被标记为重复问题之前，我想指出我正在谈论在 'youtube.com' 上执行此操作。我不知道我是否应该期待特殊行为，但这绝对是与我在 stackoverflow 上发现的其他问题不同的背景。

为了提供帮助，下面是我能想出的重现此问题的最简单代码。要使其正常工作，您需要load this as an unpacked extension。然后导航到任何 youtube 视频。单击扩展图标，然后单击“开始测试”按钮。还要确保您已打开控制台 (F12)。

提前感谢有关如何使此方法起作用的建议，或者我可以通过其他方式获得所需信息的建议（例如，我研究了按时间价值获取份额，但无法弄清楚）。作为最后的手段，我正在考虑用我自己的 iframe 替换 youtube 播放器并尝试这种方式。

popup.html

<!doctype html>
<html>
  <head>
    <title>Getting Started Extension's Popup</title>
    <script src='popup.js'></script>

  </head>
  <body>
    <input type='button' id='start' value='Start The Test'></input>
    <p id="messages"></p>
    <p id="result"></p>
  </body>

</html>

popup.js

// Add listener for start button
document.addEventListener('DOMContentLoaded', function() {
    document.getElementById("start").addEventListener('click', process_video);
});


function process_video() {
    chrome.tabs.executeScript(null, {file: 'test.js'});
}

test.js

player = document.getElementById('movie_player');
console.log(player);
console.log(player.getCurrentTime()); // ERROR IN QUESTION IS PRODUCED WITH THIS COMMAND

manifest.json

{
  "manifest_version": 2,

  "name": "It's a placeholder",
  "description": "This is only a test",
  "version": "1.0",

  "browser_action": {
    "default_popup": "popup.html",
    "default_title": "My Test"
  },

  "permissions": [
    "activeTab",
    "http://localhost/*",
    "https://www.youtube.com/*"
  ]

}

【问题讨论】：

你试过 currentTime 属性了吗？见w3schools.com/TAGs/av_prop_currenttime.asp
似乎在我的测试脚本中工作！我将发布一个暂定的答案。非常感谢！

标签： javascript jquery google-chrome youtube

【解决方案1】：

感谢 Charlie Dalsass（请参阅我的问题下方的 cmets），我想我有答案了！

test.js

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

【讨论】：

【解决方案2】：

此代码在 2020 年有效：

// 1. ytplayer code: https://developers.google.com/youtube/player_parameters#IFrame_Player_API
var tag = document.createElement('script');
  tag.src = "https://www.youtube.com/player_api";
  var firstScriptTag = document.getElementsByTagName('script')[0];
  firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
  var player;
  function onYouTubePlayerAPIReady() {
    player = new YT.Player('ytplayer', {
      height: '360',
      width: '640',
      videoId: 'M7lc1UVf-VE'
    });
  }
// 2. get player.playerInfo.currentTime
window.onclick = () => {
  console.log(player);
  alert(player.playerInfo.currentTime);
}

see it live on codepen

【讨论】：