使用 Chrome 扩展内容脚本检测 youtube 视频事件

Question

我正在编写一个 Chrome 扩展程序，我想在用户在 youtube.com 上观看视频时检测视频何时开始/结束。我的情况与我读过的其他教程之间的区别在于，我没有在自己的网站上嵌入自己的 youtube 视频，我只想检测用户在 youtube 上观看的视频中的事件。

现在我的 manifest.json 文件包含以下内容脚本：

"content_scripts": [
    {
        "matches": ["http://*/*","https://*/*"],
        "js": ["js/jquery.js", "js/iframe_api.js", "js/contentScript.js"],
        "all_frames": true
    }
],

我已经下载了 jquery，iframe_api.js 是 https://www.youtube.com/iframe_api 的内容。我的 contentScript.js 文件很简单，我只想在视频准备好后在控制台打印一些东西：

function onYouTubeIframeAPIReady() {
    var player;
    player = new YT.Player('ytplayer', {
        events: {
            'onReady': onPlayerReady,
        }
    });
}

function onPlayerReady(event) {
    console.log('It worked!');
}

有人可以帮我吗？内容脚本甚至可以做到这一点，还是我不能访问 youtube 视频的 iframe，因为它不在内容脚本所在的“隔离环境”中？

Answer 1

这对聚会来说已经很晚了，但我自己最近才遇到这个问题，发现从来没有跟进到哪里可以找到“HTML5 API”事件。

GabeMeister 的答案是正确的解决方案，但在任何给定 YouTube 视频页面的控制台中使用 getEventListeners(document.querySelector("video")) 会显示您可以在脚本中收听的事件列表。

截至撰写本文时，这些是从上述行返回的事件：

• 正在播放
• 暂停
• 进入画中画
• 留画留画
• 加载数据
• 音量变化
• 时间更新
• 播放
• 持续时间变化
• 寻求
• 寻求
• 错误
• 加载元数据
• 等待中
• 进展
• 专注
• 加载开始
• 结束
• 暂停
• 汇率变化
• 调整大小

这些与 iFrame API 是分开的，可以通过内容脚本或控制台进行侦听。希望这会有所帮助！

Answer 2

我在这里发现了一个类似的问题，答案很棒（HTML5 太棒了！！） How to play and pause a Youtube video in the console?

例如，您可以使用它们来播放/暂停视频（在 youtube.com 上，在外部网站上没有 youtube iframe）

document.getElementsByTagName('video')[0].play()
document.getElementsByTagName('video')[0].pause()

还有更多功能可让您跟踪视频长度、当前播放时间等。

P.S：我有同样的问题超过一天了，令人惊讶的是，很难找到正确的答案/指南！但希望这会有所帮助

Answer 3

在我发布这个问题后不久，我就找到了答案。不使用 youtube iframe api，而是使用 html5 api。我将内容脚本修改为以下内容，以便在视频结束时打印一条消息，并且效果很好。

var vid = $('video').get(0);

vid.addEventListener('ended', function(e) {
    console.log('The video ended!');
});