如何检测 YouTube 已从注入的脚本（使用 chrome 扩展）完成视频播放？答案

【问题标题】：How can I detect that YouTube has finished video playback from injected script (using chrome extension)?如何检测 YouTube 已从注入的脚本（使用 chrome 扩展）完成视频播放？
【发布时间】：2018-07-27 22:05:39
【问题描述】：

我正在尝试制作 Chrome 扩展程序，当观看页面上的视频（如“www.youtube.com/watch?=xxxxxxxx”）播放完毕时调用我的函数。我想使用注入的脚本来做到这一点。目前我正在使用 setInterval 来检查 video.ended==true 是否存在，但我想找到一种无间隔工作的方法，并且理想地使用一些事件监听器。

我尝试将onended 事件侦听器添加到#movie_player 和视频元素，但这不起作用。我也试过听readystatechange event，但这个也没有触发。将onplay 和onplaying 事件侦听器添加到#movie_player 也不会触发。

有什么方法可以在不使用间隔的情况下做我想做的事吗？

【问题讨论】：

你看过 iframe API 吗？
否，但 YouTube 观看页面的 iframe 中没有播放器。那它对我有什么帮助呢？
developers.google.com/youtube/iframe_api_reference
document.querySelector('#player-container video').addEventListener('end', console.log)
@wOxxOm 它有效。惊人的。谢谢你。您可以将其发布为正确答案以获得一些布朗尼积分..

标签： javascript google-chrome-extension youtube

【解决方案1】：

在视频元素上使用ended 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 查看更多页面使用的事件：

in Chrome：打开元素检查器并切换到“事件侦听器”子面板
或在控制台中输入 getEventListeners(document)（也适用于 window 和任何 DOM 元素）
in Firefox：打开 Inspector 并单击 <html> 和其他标签右侧的 ev 或 event 气泡

【讨论】：

也感谢其他提示。不知道他们