获取当前 YouTube 视频时间

Posted 2023-02-24

【中文标题】获取当前 YouTube 视频时间

【英文标题】：Getting Current YouTube Video Time

【发布时间】：2011-10-21 15:37:54

【问题描述】：

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

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

【参考方案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 实例在移动浏览器中有效。

---

有用的链接：

YouTube IFrame API YouTube JavaScript API YouTube Player Demo

【参考方案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>