Getting Current YouTube Video Time

Question

I am writing a Browser Plugin and need to find a way to get the current time a YouTube Video playing on YouTube using JavaScript. I have been playing around in the Chrome JavaScript Console and haven't had any luck.

It appears that the chrome API only works with embedded video players not a video that is playing on on youtube.com. One option I looked into is in the share section of a video their is an input box for the "start at:" time that contains the current time of the video. I have tried using .value and .text on this input box and they both return undefined? Does anyone have any ideas?

score 87 · Accepted Answer · edited Mar 01 '21 at 18:45

87

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

See the api

Update: if it didn't work, also try player.playerInfo.currentTime (codepen live example)

edited Mar 01 '21 at 18:45

yaya

7,675
1
39
38

answered Aug 07 '11 at 01:04

Joseph Marikle

76,418
17
112
129

1

Thanks. I hadn't figured out the document.getElementById("movie_player");. – James Aug 07 '11 at 01:10
3

I figured :) I only know it because I tried it once and was thinking to myself *I knew this one... how did I do that, again?* XD – Joseph Marikle Aug 07 '11 at 01:12
It's don't work on iOS (checked on 9.2). `player` var don't have needed methods. Even if created using IFrame API with `new YT.Player()` – zxcat Feb 18 '16 at 17:40
@zxcat did you make sure to include `enablejsapi` when you reference the video? https://developers.google.com/youtube/player_parameters#enablejsapi – Joseph Marikle Feb 18 '16 at 17:45
@JosephMarikle, sure. I'm getting call to `onYouTubePlayerAPIReady` or `onYouTubeIframeAPIReady`, and see my `player` has changed. But on iOS it have no methods to control itself. – zxcat Feb 18 '16 at 18:22
@zxcat Just to clarify, is this in the safari browser on iOS or is this a web view/native application that you 're working in? – Joseph Marikle Feb 18 '16 at 19:13
@JosephMarikle, I've tested in iOS Safari browser. BTW, looks like youtube API do not work on Android too. Just checked in chrome browser on 4.4.4. Maybe there are some limitations from google – zxcat Feb 19 '16 at 09:44
iOS/Android solution is [in my answer](http://stackoverflow.com/questions/6970013/getting-current-youtube-video-time/35506522#35506522) – zxcat Feb 19 '16 at 13:33
so waht i f I want to take it each second? there is any event on time update? – Alberto Acuña Jun 19 '21 at 07:33
@AlbertoAcuña To be completely honest, I don't know. I've only briefly played around with the YouTube API, so my info is very limited. Based on what I can find in the API documentation, I'd say there isn't an event for that. Instead, you'll have to poll it using your own timer. Probably something faster than every second. You can stoop or restart polling based on the onStateChange event firing, but there doesn't seem to be an event for playback progress change that I can tell. – Joseph Marikle Jun 21 '21 at 19:00

score 15 · Answer 2 · answered Aug 07 '11 at 01:11

Depends on what you want

player.getCurrentTime():Number

Returns the elapsed time in seconds since the video started playing.

player.getDuration():Number

Returns the duration in seconds of the currently playing video. Note that getDuration() will return 0 until the video's metadata is loaded, which normally happens just after the video starts playing.

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

score 7 · Answer 3 · answered Feb 19 '16 at 13:29

Finally I found how to make it work on iOS (and Android too).
Actually, the whole youtube js api was broken for me if run on mobile browser.

Problem solved by creating player using new YT.Player as described in YouTube IFrame API.

Please note: only creating <iframe> from <div> placeholder works for mobile browsers at the time. If you try to use existing <iframe> in new YT.Player call, as mentioned in IFrame API, this will not work.

After player created, it's possible to use player.getCurrentTime() or player.getDuration() with player instance created.

Note: I had no luck calling this methods on player obtained with
player = document.getElementById(...) (from @JosephMarikle answer).
Only created player instance worked in mobile browsers.

Useful links:

score 3 · Answer 4 · answered Jun 27 '19 at 11:19

You can use Html5 Video API on youtube.com

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

Note: It's not gonna work on Youtube Iframe API because Iframes are isolated. You cannot access the context of a Youtube IFrame .

score 3 · Answer 5 · answered Apr 26 '20 at 14:27

3

In 2020, this works:

player.playerInfo.currentTime

full code: see it live on codepen

answered Apr 26 '20 at 14:27

yaya

7,675
1
39
38

score 1 · Answer 6 · answered Sep 09 '15 at 17:25

1

Just FYI, There is a new iframe API for the YouTube player: https://developers.google.com/youtube/iframe_api_reference

answered Sep 09 '15 at 17:25

Susanne

41
1

score 1 · Answer 7 · answered Dec 10 '21 at 08:04

1

document.querySelector('video').currentTime

answered Dec 10 '21 at 08:04

aljgom

7,879
3
33
28

score -1 · Answer 8 · answered May 01 '19 at 08:45

Stop at specific time youtube video and show notification box in 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>

play video and hide notification

 <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>

Getting Current YouTube Video Time

8 Answers8

Stop at specific time youtube video and show notification box in GWD

play video and hide notification

Linked