找出Youtube HUD何时淡出，并随之淡出一个元素

Question

我正在创建一个chrome扩展，添加一个按钮到youtube播放器HUD(到手表以后按钮的左边)。这可以正常工作，但唯一的问题是，当HUD在几秒钟不活动后自动淡出时，这个按钮元素不会。我已经使用javascript将按钮添加到以下div:

<div class="ytp-chrome-top-buttons"> </div>

和我的按钮看起来像这样:

<button class="customClass" id="customID" title="custom title"><svg class="customClass"></svg></button>

我已经查看了页面的源代码，试图看看youtube是如何使其他图标消失的，以及我是否可以将一个类复制到svg以使其消失，但我没能找到它。我考虑过使用计时器和javascript来使元素消失，但我想如果功能已经存在，为什么要使其复杂化。作为最后的手段，我将使用计时器方法，但我更喜欢使用CSS类。我已经粗略地浏览了一下Youtube Player API，但说实话，我很难理解它是如何工作的(虽然我有几年的编程经验，但我昨天才开始学习javascript, HTML和CSS)。我也明白，这个API只用于嵌入youtube视频?澄清一下，我确实知道如何在javascript中使用API，而不是这个特定的。我已经使用youtube数据API成功地实现了按钮的功能。任何帮助都是感激的。谢谢。

Answer 1

如果您检查元素更改，您可以看到视频的类列表随着底部栏的更改而更改。当底部栏隐藏时，添加ytp-autohide类。记住这一点，在使用突变观察者扫描类变化之后，当ytp-autohide类的存在状态发生变化时，您将获得所需的结果。

var video = document.querySelector("#movie_player");
var lastState = video.classList.contains('ytp-autohide');
var observer = new MutationObserver(function(mutations) {
mutations.forEach(function(mutation) {
if(mutation.attributeName == "class"){
var currentState = mutation.target.classList.contains('ytp-autohide');
if(lastState !== currentState)    {
lastState = currentState;
if(currentState)
console.log("Hided");
else
console.log("Shown");
}
}
});
});
observer.observe(video, {attributes: true});