如何在VideoJS播放器全屏窗口自动显示/隐藏控制栏？

嘿，我来帮你搞定这个问题！你的思路方向是对的，但现有代码里有几个细节问题导致自动隐藏效果没生效，咱们一步步梳理解决：

现有代码的问题分析 #

• 重复绑定事件：每次触发fullscreenchange就给player绑定一次mouseout/mouseover，多次切换全屏后会堆积大量重复的事件监听，导致逻辑混乱。
• 事件监听目标错误：直接监听player的鼠标事件范围不准确，应该监听播放器的根容器元素（player.el()），这样鼠标在整个播放器区域的操作都能被捕获。
• 缺少平滑过渡的CSS：vjs-fade-out类需要配合CSS过渡动画才能实现自然的隐藏效果，否则只是瞬间消失/出现。
• 非全屏状态的事件清理不彻底：退出全屏后没有移除全屏时绑定的鼠标事件，可能影响正常模式下的控制栏行为。

完整解决代码 #

第一步：添加CSS过渡样式 #

先给控制栏加上平滑的过渡效果，让隐藏/显示更自然：

.video-js .vjs-control-bar {
  transition: opacity 0.3s ease, transform 0.3s ease;
}
.video-js .vjs-control-bar.vjs-fade-out {
  opacity: 0;
  transform: translateY(100%);
  pointer-events: none; /* 隐藏后不响应鼠标事件，避免误触 */
}

第二步：修改JavaScript逻辑 #

调整事件绑定逻辑，避免重复监听，同时优化鼠标事件的监听目标：

// 定义全局变量存储鼠标事件的处理函数，方便后续解绑
let handleMouseEnter = null;
let handleMouseLeave = null;

player.on('fullscreenchange', function(e) {
  const playerEl = player.el();
  
  if (player.isFullscreen()) {
    // 定义全屏状态下的鼠标事件处理函数
    handleMouseEnter = function() {
      player.controlBar.removeClass('vjs-fade-out');
    };
    
    handleMouseLeave = function() {
      player.controlBar.addClass('vjs-fade-out');
    };
    
    // 给播放器容器绑定鼠标事件
    playerEl.addEventListener('mouseenter', handleMouseEnter);
    playerEl.addEventListener('mouseleave', handleMouseLeave);
    
    // 初始进入全屏后延迟自动隐藏控制栏，给用户操作时间
    setTimeout(() => {
      player.controlBar.addClass('vjs-fade-out');
    }, 2000); // 2秒后自动隐藏，可按需调整时长
  } else {
    // 退出全屏时，移除鼠标事件监听，避免残留影响
    if (handleMouseEnter && handleMouseLeave) {
      playerEl.removeEventListener('mouseenter', handleMouseEnter);
      playerEl.removeEventListener('mouseleave', handleMouseLeave);
      // 重置变量
      handleMouseEnter = null;
      handleMouseLeave = null;
    }
    
    // 恢复控制栏显示状态
    player.controlBar.removeClass('vjs-fade-out');
    player.controls(true);
  }
});

关键优化点说明 #

• 使用mouseenter/mouseleave替代mouseover/mouseout：这两个事件不会冒泡，避免子元素触发多次重复事件，逻辑更稳定。
• 提前存储事件处理函数：方便退出全屏时准确解绑，避免内存泄漏和残留事件干扰正常模式。
• 添加初始自动隐藏延迟：进入全屏后给用户预留操作控制栏的时间，再自动隐藏，提升使用体验。
• CSS过渡+pointer-events: none：既实现平滑的显示/隐藏动画，又能确保控制栏隐藏后不会被误触发。

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