JavaScript监听YouTube HTML5播放器中的URL更改
JavaScript监听YouTube HTML5播放器中的URL更改
我正在编写一个Chrome扩展程序，所以我需要能够监听YouTube URL的变化（即，查看您是否切换了视频）。YouTube使这变得困难，因为在其HTML5视频播放器中，没有完整的页面重新加载，也没有URL片段的更改（无法监听hashchange事件，如其他答案所建议）。监听pushState也无效。我在SO上花了很多时间寻找答案，到目前为止，所有我看到的答案（除了一个-我真的不想使用）都不起作用。\n我看到的唯一有效的答案是设置一个定时器每秒运行，以查看URL是否发生了变化（丑陋！）。\n编辑：可能重复的问题是完全不同的问题-一个处理监听URL变化，另一个处理扩展程序的加载。\n问题：如何在YouTube的HTML5视频播放器中检测URL的变化而无需轮询？
问题的原因是：用户想要通过JavaScript监听YouTube HTML5播放器的URL更改事件，以便在视频播放时执行特定的操作。然而，他们在尝试使用onStateChange事件时遇到了问题，代码中的一些部分不起作用。
解决方法是：使用YouTube API中的onStateChange事件来监听视频状态的更改，并在视频开始播放时执行所需的操作。需要在页面中包含YouTube JS API脚本，并确保在代码中正确引用播放器元素的ID。还需要注意代码中的事件对象属性名称可能因API版本而异，需要根据实际情况进行调整。
以下是重写后的代码示例：
var player = document.getElementById('movie_player');
player.addEventListener('onStateChange', function(e) {
if (e === -1) {
// 视频开始播放
// 在视频更改时也应该起作用
// 前提是在同一个元素内
console.log(player.getVideoUrl());
}
// 监听其他事件？
});
需要根据实际情况对代码进行进一步测试和调整，以确保它能够按预期工作。
问题原因：在YouTube HTML5播放器中，需要监听URL的变化，以便进行相应的操作。但是直接监听URL的变化并不能实现预期的效果，需要通过监听特定的事件来实现。
解决方法：通过监听yt-page-data-updated事件来检测视频的切换。可以使用Chrome开发者工具的monitorEvents(document.body)和getEventListeners(document.body)命令来调试。但是需要注意，这种方法在全页重新加载时（直接访问URL）不起作用，因此需要与load事件协同工作，示例如下：
window.addEventListener('load', function () {
console.log('load');
});
window.addEventListener('yt-page-data-updated', function () {
console.log('url change');
});
另外，还可以使用yt-navigate-finish事件来代替yt-page-data-updated事件，这种方法更为合适，并且在全页重新加载时也能正常工作，因此不再需要load事件。
如果希望在导航开始时立即运行钩子函数，可以使用yt-navigate-start事件。
