通过Chrome扩展程序控制YouTube播放器

Question

我正在开发一个Google Chrome扩展程序，需要接管所有 YouTube视频的控件（播放，暂停，下一个，上一个，更改音量，在X秒开始播放视频等） 。我尝试了以下方法：

第一种方法：使用content_scripts

我的manifest.json包含以下内容：

"content_scripts": [
    {
        "matches": ["https://www.youtube.com/*"],
        "js": ["scripts/jquery.js", "scripts/in_page.js"]
    }
],

我正在为每个YouTube链接加载脚本，而不仅仅是/watch*，因为现在YouTube导航完全使用了AJAX，因此页面没有完全刷新，如果我在搜索页面上然后点击视频，扩展程序就不会加载我的content_scripts。

我如何接管控件

我成功设法触发YouTube播放器上的简单点击事件，例如播放，暂停，上一个视频，下一个视频。

例如，这可以暂停视频：

$("#player-api .html5-video-controls .ytp-button-pause").trigger("click");

但似乎我无法触发事件，例如点击进度条以在视频的特定时刻播放或重新启动视频。

我尝试了这段代码但没有成功（使用jQuery＆＃39; s $.Event）：

var click = $.Event("click");
click.clientX = 0; // Beginning of the video
click.clientY = 0; // I also tried several other coordinates
$("#player-api .html5-video-controls .html5-progress-bar").trigger(click);

（我也尝试点击.html5-progress-bar的每个孩子，但没有任何效果。）

第二种方法：使用注入脚本

由于我的第一种方法似乎遇到了死胡同，于是我尝试了其他方法：直接在页面内部注入脚本。

我的manifest.json包含以下内容：

"content_scripts": [
    {
        "matches": ["https://www.youtube.com/*"],
        "js": ["scripts/jquery.js", "scripts/isolated.js"]
    }
],

"web_accessible_resources": [
    "scripts/injected.js"
],

isolated.js

的内容

var s = document.createElement("script");
s.src = chrome.extension.getURL("scripts/injected.js");
s.onload = function() {
    this.parentNode.removeChild(this);
};
(document.head || document.documentElement).appendChild(s);

injected.js

的内容

嗯，这是我遇到第二个死胡同的地方。我可能忽略了一些事情，但是我搜索了页面中的每个对象，我找到了yt，ytplayer，player和其他人。但是它们似乎都没有适当的功能来触发播放器上的更改，例如播放/暂停/下一个等等。

然后我从YouTube（available here）下载了html5player.js并对其进行了美化，以便了解幕后的内容。我发现了一些有趣的函数名称，例如{202}到32035-20315之间的playVideoAt，playVideo，pauseVideo。

这就是我想要调用/调用的功能，但我不知道它们在哪里，以及如何调用它们。

我也知道YouTube有一个用于控制播放器的JavaScript API，但它仅适用于嵌入式播放器（iframe），因此在我的情况下它没用。< / EM>

Answer 1

听起来您正在使用YouTube的HTML5视频播放器。在这种情况下，您可以只与<video> DOM元素进行交互。它恰好是页面上唯一的<video>元素，所以只需执行：

$('video').play()
$('video').pause()
$('video').currentTime = 100

界面为here。

对于上一个和下一个视频，您几乎可以肯定最简单的事情是：

$('.ytp-button-next').click()
$('.ytp-button-prev').click()

由于这显然不是已发布的API，因此您无法保证这些类名在将来保持不变。

Answer 2

我迟到了，但你可以使用API​​提供的Youtube。看看这里：https://github.com/kurtextrem/StopAutoplay/blob/master/src/main.js

然而，还有另一种方式：元素＆＃39;＃movie_player＆＃39;提供所有这些功能。因此，通过其ID获取movie_player，然后执行＆＃34; playVideoAt＆＃34;的工作原理。

Answer 3

为时已晚，但我最近为此创建了一个Chrome扩展程序：https://chrome.google.com/webstore/detail/youtube-playback-control/okbcoijdeebocmahlanbfemnckjonfnh

希望它有所帮助。