如何实现YouTube视频控件的显示与隐藏——浏览器扩展开发问询

一、无需修改音量，直接控制YouTube自定义控件显示/隐藏 #

YouTube的控件通过DOM类和内部播放器状态控制，不用模拟上下箭头按键，有更直接的实现方式：

1. 操作DOM类触发控件显示/隐藏 #

YouTube视频播放器容器（通常带html5-video-player类）会通过ytp-autohide类控制控件自动隐藏。要强制显示控件：

const player = document.querySelector('.html5-video-player');
// 显示控件
player.classList.remove('ytp-autohide');
player.classList.add('ytp-show-controls');

// 隐藏控件
player.classList.add('ytp-autohide');
player.classList.remove('ytp-show-controls');

注意：YouTube原生逻辑会在几秒后自动恢复ytp-autohide状态，若需要长期显示，可设置定时器重复移除该类，或监听播放器的自动隐藏事件阻止默认行为。

2. 调用YouTube内部播放器API #

YouTube页面内置了播放器实例，调用原生方法控制控件更可靠：

// 获取播放器实例
const ytPlayer = document.querySelector('video').player;

// 显示控件
ytPlayer.showControls();
// 部分版本可用：ytPlayer.setControlsVisibility(true);

// 隐藏控件
ytPlayer.hideControls();
// 部分版本可用：ytPlayer.setControlsVisibility(false);

这种方式完全遵循YouTube原生逻辑，不会受DOM类名变更的兼容性影响。

二、实现MPV/VLC风格的独立视频时间覆盖层 #

自己创建悬浮元素，监听视频事件实时更新时间，完全脱离YouTube原生控件限制：

1. 创建覆盖层元素 #

插入固定定位的悬浮元素，样式模仿MPV的时间显示效果：

const timeOverlay = document.createElement('div');
timeOverlay.id = 'yt-kbd-nav-time-overlay';
timeOverlay.style.cssText = `
  position: fixed;
  bottom: 20px;
  left: 20px;
  background: rgba(0,0,0,0.7);
  color: white;
  padding: 4px 8px;
  border-radius: 4px;
  font-family: sans-serif;
  font-size: 14px;
  z-index: 99999;
  pointer-events: none; /* 不影响视频点击操作 */
  display: none;
`;
document.body.appendChild(timeOverlay);

2. 监听视频时间更新 #

找到页面<video>元素，通过timeupdate事件实时更新覆盖层内容：

const video = document.querySelector('video');
if (video) {
  video.addEventListener('timeupdate', () => {
    if (timeOverlay.style.display === 'none') return;
    
    // 格式化时间为MM:SS或HH:MM:SS格式
    const formatTime = (seconds) => {
      const hours = Math.floor(seconds / 3600);
      const minutes = Math.floor((seconds % 3600) / 60);
      const secs = Math.floor(seconds % 60);
      return hours > 0 
        ? `${hours.toString().padStart(2, '0')}:${minutes.toString().padStart(2, '0')}:${secs.toString().padStart(2, '0')}`
        : `${minutes.toString().padStart(2, '0')}:${secs.toString().padStart(2, '0')}`;
    };
    
    const currentTime = formatTime(video.currentTime);
    const duration = formatTime(video.duration);
    timeOverlay.textContent = `${currentTime} / ${duration}`;
  });
}

3. 绑定快捷键切换显示/隐藏 #

在你的扩展快捷键处理逻辑中，添加覆盖层的显示/隐藏触发代码：

// 示例：假设快捷键为字母T
function handleShortcut(key) {
  if (key.toLowerCase() === 't') {
    timeOverlay.style.display = timeOverlay.style.display === 'none' ? 'block' : 'none';
    // 显示时手动触发一次时间更新，避免延迟
    if (timeOverlay.style.display === 'block' && video) {
      video.dispatchEvent(new Event('timeupdate'));
    }
  }
}

注意事项 #

• YouTube的DOM结构和内部API可能随版本更新变化，需定期测试兼容性
• 扩展中操作DOM需确保在页面加载完成后执行，可通过DOMContentLoaded事件或监听YouTube单页应用的动态加载完成事件实现
• 独立覆盖层的样式可根据需求自定义，比如位置、字体大小、透明度等

内容的提问来源于stack exchange，提问作者psygo