获取当前YouTube视频时间

Question

我正在编写一个浏览器插件，需要使用JavaScript获取正在播放的YouTube视频的当前时间。我已经在Chrome JavaScript控制台中尝试了一些操作，但没有任何进展。

似乎Chrome API仅适用于嵌入式视频播放器，而不适用于在youtube.com上播放的视频。我研究了一种选择，在视频共享部分有一个“开始于：”时间的输入框，其中包含视频的当前时间。我尝试对该输入框使用.value和.text，它们都返回undefined？ 有人有什么想法吗？

- James

Answer 1

ytplayer = document.getElementById("movie_player");
ytplayer.getCurrentTime();

请查看API

更新：如果不起作用，也可以尝试player.playerInfo.currentTime（CodePen实时示例）

- Joseph Marikle

---

谢谢。我还没有想到document.getElementById("movie_player");的用法。 - James

我明白了 :) 我之所以知道是因为我尝试过一次，当时我在想，“我知道这个...我是怎么做到的呢？”XD - Joseph Marikle

它在iOS上无法运行（已检查9.2）。 player 变量没有所需的方法。 即使使用IFrame API创建，也是用 new YT.Player() 创建的。 - zxcat

@zxcat 只是想澄清一下，您是在 iOS 的 Safari 浏览器中还是在 Web 视图/本地应用程序中工作？ - Joseph Marikle

@JosephMarikle，我已在iOS Safari浏览器中进行了测试。顺便说一句，看起来YouTube API在Android上也无法工作。我刚在4.4.4的Chrome浏览器中检查过了。可能有一些来自Google的限制。 - zxcat

Answer 2

取决于你想要什么

player.getCurrentTime():Number

返回视频播放开始后经过的时间（以秒为单位）。

player.getDuration():Number

返回当前播放视频的持续时间（以秒为单位）。请注意，直到加载视频的元数据之前，getDuration()将返回0，这通常会在视频开始播放后立即发生。

http://code.google.com/apis/youtube/js_api_reference.html

- Jason Gennaro

Answer 3

最终我找到了如何在iOS（以及Android）上使其工作的方法。
实际上，如果在移动浏览器上运行，整个youtube js api对我来说都是失效的。

通过使用new YT.Player创建播放器，如YouTube IFrame API所述，问题得以解决。

请注意：目前仅从<div>占位符创建<iframe>适用于移动浏览器。如果尝试在new YT.Player调用中使用现有的<iframe>，如IFrame API中所述，则无法正常工作。

创建播放器后，可以使用player.getCurrentTime()或player.getDuration()与创建的player实例一起使用。

注意：我尝试过使用从@JosephMarikle答案中获取的player = document.getElementById(...)上调用这些方法，但没有成功。只有创建的player实例在移动浏览器中有效。

---

有用的链接：

• YouTube IFrame API
• YouTube JavaScript API
• YouTube Player Demo

- zxcat

Answer 4

你可以在 youtube.com 上使用 Html5 视频 API。

var htmlVideoPlayer = document.getElementsByTagName('video')[0];
htmlVideoPlayer.currentTime

注意：如果使用Youtube Iframe API，将无法正常工作，因为Iframe是隔离的。您无法访问Youtube IFrame的上下文。

- Muhammed Ozdogan

Answer 5

在2020年，以下内容有效：

player.playerInfo.currentTime

完整代码： 在CodePen上实时查看

- yaya

Answer 6

document.querySelector('video').currentTime

- aljgom

Answer 7

提供信息，YouTube播放器有一个新的iframe API： https://developers.google.com/youtube/iframe_api_reference

- Susanne

Answer 8

在特定时间停止Youtube视频并在GWD中显示通知框

<script>
  var yid = document.getElementById("gwd-youtube_1");
  var idBox = document.getElementById("box1");
pausing_function = function(event) { 

    var aa = setInterval(function() {

        if (yid.getCurrentTime() > 8.0 && yid.getCurrentTime() < 8.1) {
            yid.pause(yid);
            idBox.style.opacity = 1;
            console.log(yid.getCurrentTime() + "playing")

             clearInterval(aa);
            yid.removeEventListener("playing", pausing_function);

        }

    }, 100)
}

 yid.addEventListener("playing", pausing_function);

  var pausing_function_1 = function() {      
       if (yid.getCurrentTime() > 8.1) {
        console.log(yid.getCurrentTime() + "pause")


        // remove the event listener after you paused the playback
        yid.removeEventListener("playing", pausing_function);
      }
    };    
  </script>

播放视频并隐藏通知

 <script type="text/javascript" gwd-events="handlers">
    window.gwd = window.gwd || {};
    gwd.pauseVideo = function(event) {
      var idBox = document.getElementById("box1");
      idBox.style.opacity = 0;
    };
  </script>
  <script type="text/javascript" gwd-events="registration">
    // Support code for event handling in Google Web Designer
     // This script block is auto-generated. Please do not edit!
    gwd.actions.events.registerEventHandlers = function(event) {
      gwd.actions.events.addHandler('gwd-youtube_1', 'playing', gwd.pauseVideo, false);
    };
    gwd.actions.events.deregisterEventHandlers = function(event) {
      gwd.actions.events.removeHandler('gwd-youtube_1', 'playing', gwd.pauseVideo, false);
    };
    document.addEventListener("DOMContentLoaded", gwd.actions.events.registerEventHandlers);
    document.addEventListener("unload", gwd.actions.events.deregisterEventHandlers);
  </script>

- Mayank Sudden