JavaScript to listen for URL changes in YouTube HTML5 Player

Question

I'm writing a Chrome extension so I need to be able to listen for changes in the YouTube URL (i.e., see that you switched videos). YouTube makes this hard because with its HTML5 video player there is no full page reload, there is no URL fragment change (cannot listen for hashchange event as other answers have suggested). Listening for pushState also doesn't work. I've spent a lot of time looking for answers here on SO and all the ones I've seen thus far (except for one -- that I really don't want to use) don't work.

The only answer I've seen that works is setting a timeout to run every second to see if the URL changed (ugly!).

Edit: The possible duplicate question is a totally different question--one dealing with listening to URL changes the other dealing with getting the extension to load.

Question: How can I detect URL changes in YouTube's HTML5 video player without polling?

Answer 1

My solution was to simply check for the transitionend event on the #progress element (this is the red progress bar that shows up at the top).

document.addEventListener('transitionend', function(e) {
    if (e.target.id === 'progress')
        // do stuff
});

Update:

An even cleaner solution is to just listen for the spfdone event triggered by spfjs, the framework used by YouTube to manipulate push state. Credit to Rob for the answer.

document.addEventListener('spfdone', function() {
    // do stuff
});

Answer 2

I stumbled across this issue, so maybe this will benefit someone. What did the trick for me is to listen for the yt-page-data-updated event, which detects a video switch.

I was able to inspect it by using the monitorEvents(document.body) and getEventListeners(document.body) Chrome DevTools Commands upon page update. But keep in mind that it won't work on full page reload (by directly accessing the URL), so I had to coordinate with a load event, something like this:

window.addEventListener('load', function () {
    console.log('load');
});

window.addEventListener('yt-page-data-updated', function () {
    console.log('url change');
});

Answer 3

I'm not entirely sure how this would work from a chrome extension, but if it's feasible the onStateChange event could be of great benefit to you. I'm fairly new to the YouTube API, but this works for me:

var player = document.getElementById('youtubeVideo');
player.addEventListener('onStateChange', function(e) {
  if (e.data === 1) {
    // Video started playing.
    // Should work for when the video changes as well.
    // As long as it's within the same element.
    console.log(player.getVideoUrl());
  }
  // Watch for other events?
});

Answer 4

How to update the title and URL from a YouTube page:

Firstly, I disagree with all the above solutions because they're not solutions in my books, as they rely on Google's programming which is ever-changing!

The cardinal rule is to NEVER rely on Google's variable names and/or programming structure, so here's a universal solution that should work irrespective of any future YouTube changes, as long as they're using the standard HTML video player.

So working on an iframe loaded with a /watch?v=C2cMG33mWVY URL format (meaning browser/extension authors only), one can...

var D=W.contentWindow.document;  // Where "W" is your tab/frame ID.

We can monitor the duration-change event of the video player...

NB: I'm using this event because two videos in succession having exactly the same duration although not impossible, would be extremely rare!

D.getElementsByTagName('video')[0].ondurationchange=function(){ setTimeout(function(){ UpdateTab(W.id, D.title, D.URL); },1500); };

NB #1: I've added a little delay before updating to allow plenty of time for the title and url to change.

NB #2: UpdateTab() is my custom function which you can replace with yours... I'm sure you get the drift.

That's it.