I couldn't find any way to listen to time changes (so I can show a current time/duration of the video in my UI) on the YouTube IFrame Player API documentation. Is there a way to do this without polling getCurrentTime()?

I couldn't find any way to listen to time changes (so I can show a current time/duration of the video in my UI) on the YouTube IFrame Player API documentation. Is there a way to do this without polling getCurrentTime()?

• javascript
• iframe
• youtube
• youtube-iframe-api

Share Improve this question Follow edited Dec 30, 2020 at 19:19 Felipe Zavan asked Dec 30, 2020 at 18:03 Felipe ZavanFelipe Zavan 1,83311 gold badge2020 silver badges3434 bronze badges

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 7

The YouTube IFrame Player API doesn't expose any way to listen for time change updates, but since internally it uses postMessage events to municate between the IFrame and the main window, you can add a listener to your window to listen to them and react only to the time change ones:

// Instantiate the Player.
function onYouTubeIframeAPIReady() {
  var player = new YT.Player("player", {
    height: "390",
    width: "640",
    videoId: "dQw4w9WgXcQ"
  });

  // This is the source "window" that will emit the events.
  var iframeWindow = player.getIframe().contentWindow;

  // So we can pare against new updates.
  var lastTimeUpdate = 0;

  // Listen to events triggered by postMessage.
  window.addEventListener("message", function(event) {
    // Check that the event was sent from the YouTube IFrame.
    if (event.source === iframeWindow) {
      var data = JSON.parse(event.data);

      // The "infoDelivery" event is used by YT to transmit any
      // kind of information change in the player,
      // such as the current time or a playback quality change.
      if (
        data.event === "infoDelivery" &&
        data.info &&
        data.info.currentTime
      ) {
        // currentTime is emitted very frequently,
        // but we only care about whole second changes.
        var time = Math.floor(data.info.currentTime);

        if (time !== lastTimeUpdate) {
          lastTimeUpdate = time;
          console.log(time); // update the dom, emit an event, whatever.
        }
      }
    }
  });
}

See it live.

Note that this relies on a private API that may change at anytime without previous notice.