获取当前 YouTube 视频时间答案

【问题标题】：Getting Current YouTube Video Time获取当前 YouTube 视频时间
【发布时间】：2011-10-21 15:37:54
【问题描述】：

我正在编写一个浏览器插件，需要找到一种方法来获取使用 JavaScript 在 YouTube 上播放的 YouTube 视频的当前时间。我一直在 Chrome JavaScript 控制台中玩耍，但没有任何运气。

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

【问题讨论】：

标签： javascript youtube

【解决方案1】：

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

见the api

更新：如果不起作用，也试试player.playerInfo.currentTime (codepen live example)

【讨论】：

谢谢。我还没弄清楚 document.getElementById("movie_player");.
我想 :) 我只知道它，因为我尝试过一次并在想自己 我知道这个......我又是怎么做到的？ XD
它在 iOS 上不起作用（在 9.2 上检查）。 player var 没有需要的方法。即使使用带有 new YT.Player() 的 IFrame API 创建
@zxcat 您是否确保在引用视频时包含enablejsapi？ developers.google.com/youtube/player_parameters#enablejsapi
@JosephMarikle，当然。我接到了onYouTubePlayerAPIReady 或onYouTubeIframeAPIReady 的电话，看到我的player 发生了变化。但是在 iOS 上它没有控制自己的方法。

【解决方案2】：

看你想要什么

player.getCurrentTime():Number

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

player.getDuration():Number

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

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

【讨论】：

【解决方案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 实例。

注意：我没有运气在通过
player = document.getElementById(...)（来自@JosephMarikle 回答）获得的播放器上调用此方法。
仅创建的 player 实例在移动浏览器中有效。

有用的链接：

【讨论】：

【解决方案4】：

你可以在youtube.com上使用Html5 Video API

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

注意：它不适用于 Youtube Iframe API，因为 Iframe 是孤立的。您无法访问 Youtube IFrame 的上下文。

【讨论】：

【解决方案5】：

在 2020 年，这是可行的：

player.playerInfo.currentTime

完整代码： see it live on codepen

【讨论】：

【解决方案6】：

仅供参考，YouTube 播放器有一个新的 iframe API： https://developers.google.com/youtube/iframe_api_reference

【讨论】：

【解决方案7】：

document.querySelector('video').currentTime

【讨论】：

【解决方案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>

【讨论】：