用于侦听 YouTube HTML5 播放器中 URL 更改的 JavaScript

Question

我正在编写一个 Chrome 扩展程序，因此我需要能够监听 YouTube URL 中的变化（即，看到您切换了视频）。 YouTube 很难做到这一点，因为它的 HTML5 视频播放器没有完整的页面重新加载，没有 URL 片段更改（无法监听 hashchange 事件as other answers have suggested）。收听pushState 也不起作用。我花了很多时间在这里寻找关于 SO 的答案，到目前为止我看到的所有答案（除了一个——我真的不想使用）都不起作用。

我看到的唯一可行的答案是设置超时以每秒运行一次以查看 URL 是否更改（丑陋！）。

编辑：The possible duplicate question 是一个完全不同的问题——一个处理监听 URL 的问题，另一个处理加载扩展。

问题：如何在不进行轮询的情况下检测 YouTube 的 HTML5 视频播放器中的 URL 更改？

Answer 1

我的解决方案是简单地检查 #progress 元素上的 transitionend 事件（这是显示在顶部的红色进度条）。

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

更新：

更简洁的解决方案是只监听由spfjs 触发的spfdone 事件，YouTube 使用该框架来操纵推送状态。 Credit to Rob for the answer.

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

Answer 2

我偶然发现了这个问题，所以也许这会对某人有所帮助。 我的诀窍是监听yt-page-data-updated 事件，该事件检测到视频开关。

我能够在页面更新时使用monitorEvents(document.body) 和getEventListeners(document.body) Chrome DevTools 命令对其进行检查。但请记住，它不适用于整页重新加载（通过直接访问 URL），因此我必须协调 load 事件，如下所示：

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

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

Answer 3

我不完全确定 Chrome 扩展如何实现这一点，但如果可行，onStateChange event 可能对您大有裨益。我对 YouTube API 很陌生，但这对我有用：

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?
});