保持 YouTube 控件始终可见

Question

我正在尝试制作一个 Chrome 扩展，使控件在本机 YouTube 页面内的 YouTube 视频上始终可见。

到目前为止我有这个js

$(document).ready(function() {  
 
   setInterval(function(){
       $('.ytp-autohide').removeClass('ytp-autohide');
       $('#player-container').mouseover();
   },100);
   
});

但是删除 ytp-autohide 类会停止计时器/栏进度，我不知道如何通过 js 鼠标悬停或类似方式激活 showcontrols 功能。

我可以以某种方式保持进度条和时间继续运行，或者用 js 重新创建鼠标悬停显示控件功能吗？

Answer 1

那就是：

setTimeout(function(){

    let video = document.querySelector("#movie_player")

    setInterval(function(){
      video.dispatchEvent(new Event('mousemove'));
    },100);
},1500)

因此，您没有定位正确的元素，并且没有正确触发事件。

Answer 2

我厌倦了 2023 年的更改后看不到控件。我找到了另一种方法来保持控件可见，方法是将“ytp-chrome-bottom”上的 cssText 设置为 100% 不透明度。我必须使用 Jquery 来使其能够检测元素。如果您可以使用文档方法来获取对象而不使用 Jquery，请告诉我。我不想再处理这个问题了。

我制作了一个 TamperMonkey 脚本来保持控件可见。

// ==UserScript==
// @name         Prevent youtube controls from fading out using CSS removal
// @namespace    http://tampermonkey.net/
// @version      0.1
// @description  Prevent youtube from fading out controls
// @author       You
// @match        *://www.youtube.com/*
// @require https://code.jquery.com/jquery-3.6.0.min.js
// @grant        none
// ==/UserScript==

// This is the DIV we are looking for on youtube to add an opacity of 100%:
// <div class="ytp-chrome-bottom" data-layer="9" style="width: 616px; left: 12px;">

/* globals jQuery, $ */
document.body.addEventListener("yt-navigate-start", function() {
    var element = $('#container .ytp-chrome-bottom')[0]
    element.style.cssText = element.style.cssText + " opacity: 100%; "
});