我正在尝试制作 Chrome 扩展程序，当观看页面上的视频(如“www.youtube.com/watch?=xxxxxxxx”)完成播放时调用我的函数。我想使用注入(inject)的脚本来做到这一点。
目前我正在使用 setInterval 来检查 video.ended==true但我想找到一种无间隔工作的方法，并且理想地使用一些事件监听器。
我尝试添加 onended #movie_player 和视频元素的事件监听器，但这不起作用。我也试过听 readystatechange event但这一个也不开火。添加 onplay和 onplaying #movie_player 的事件监听器也不会触发。
有什么方法可以在不使用间隔的情况下做我想做的事吗？
最佳答案
使用ended video 元素上的 DOM 事件:
var videoElement = document.querySelector('video');
videoElement.addEventListener('ended', function(event) {
console.log(event);
});
请注意，Youtube 站点使用 AJAX 导航，这意味着您的扩展程序的内容脚本仅在站点在任何给定选项卡中打开时运行一次。为
yt-navigate-finish 添加监听器检测此类导航:document.addEventListener('yt-navigate-finish', function(event) {
var videoElement = document.querySelector('video');
videoElement.addEventListener('ended', function(event) {
console.log(event);
});
});
使用 devtools 查看页面使用的更多事件:
或输入
getEventListeners(document)在控制台中(也适用于 window 和任何 DOM 元素)ev或 event <html> 右侧的气泡和其他标签 关于javascript - 如何检测 YouTube 已从注入(inject)的脚本(使用 chrome 扩展)完成视频播放？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/51566104/