在 Javascript 中检测 Youtube 网站内 Youtube 视频的结尾

Question

我想用 Javascript 检测我在 Youtube 网站上观看的 Youtube 视频的结尾。

我知道他们有一个 API，我尝试使用 GreaseMonkey 将其加载到页面中，但似乎不起作用。也许该 API 仅适用于其他网站上的嵌入视频？

这是我到目前为止所拥有的：

if (window.location.href.indexOf("&enablejsapi=1") == -1)
  {
    window.location = window.location.href + "&enablejsapi=1";
  }

var api = document.createElement('script');
api.type = 'text/javascript';
api.src = "https://www.youtube.com/iframe_api";
document.body.appendChild(api);

var onFinish = document.createElement('script');
onFinish.type = 'text/javascript';
var onFinishContent = "function onPlayerStateChange(event) { console.log('test'); if (event.data == YT.PlayerState.ENDED) { console.log('end'); } }"
var textNode = document.createTextNode(onFinishContent);
onFinish.appendChild(textNode);
document.body.appendChild(onFinish);

function onPlayerStateChange(event)
{
  console.log("test");
  if (event.data == YT.PlayerState.ENDED)
    {
      console.log("end");
    }
}

如您所见，我尝试通过两种方式使

onPlayerStateChange

函数可调用，一种是直接使用 Greasemonkey，另一种是通过注入脚本节点。它们都不起作用，我从来没有看到控制台中显示的“测试”消息。

有谁知道为什么我似乎无法加载API？

Answer 1

Sebastian Simon 2015 年的评论答案：

document.querySelector("video").addEventListener("ended",
    () => alert("Video ended!")
);

我查了一下这在 2022 年仍然有效。