找出 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 究竟是如何让其他图标消失的，以及我是否可以将 class 复制到我的 svg 以使其消失，但我没有没能找到。我研究过使用计时器和 javascript 来使元素消失，但我想如果功能已经存在，为什么要让它复杂化。作为最后的手段，我将求助于使用计时器方法，但我更喜欢使用 CSS classes。我粗略地浏览了 Youtube Player API，但坦率地说，我很难理解它是如何工作的（虽然我有几年的编程经验，但我才开始学习 javascript、HTML 和 CSS 昨天）。我也明白这个 API 仅适用于嵌入式 youtube 视频？澄清一下，我确实知道如何在 javascript 中使用 API，只是不知道这个。我已经使用 youtube 数据 API 成功实现了按钮的功能。任何帮助表示赞赏。谢谢

Answer 1

如果检查元素的变化，可以看到视频的 class 列表随着底栏的变化而变化。隐藏底部栏时，添加 ytp-autohide class。牢记这一点，在用突变观察者扫描class变化后，当ytp-autohide class的存在状态发生变化时，你会得到想要的结果。

    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});

找出 Youtube HUD 何时淡出，并用它淡出一个元素

Find out when the Youtube HUD fades out, and fade out an element with it

javascript

html

css

google-chrome-extension

youtube