XGPlayer V3 控制栏常驻配置详解

XGPlayer 作为一款功能强大的开源播放器，在 V3 版本中对控制栏的显示逻辑进行了优化调整。本文将详细介绍如何在 XGPlayer V3 中实现控制栏的常驻显示，包括播放前和播放过程中的控制栏显示配置。

控制栏常驻的核心配置

在 XGPlayer V3 中，控制栏的显示行为主要通过 controls 配置项进行控制，其中有两个关键参数：

1. initShow - 控制初始状态下是否显示控制栏
2. autoHide - 控制播放过程中控制栏是否自动隐藏

要实现控制栏的常驻显示，需要同时配置这两个参数：

const player = new Player({
  controls: {
    initShow: true,   // 初始显示控制栏
    autoHide: false   // 禁止自动隐藏
  }
})

与 V2 版本的差异

XGPlayer V2 版本中使用的 closeInactive 配置在 V3 中已被弃用，取而代之的是更加语义化的 autoHide 参数。这种改变使得配置更加直观，开发者可以更清晰地表达意图。

播放过程中的控制栏行为

除了初始显示外，V3 版本还提供了 closeDelayBlur 配置来控制播放过程中控制栏的显示行为。当设置为 false 时，可以确保播放过程中控制栏不会因为用户不交互而自动隐藏。

CSS 辅助方案

在某些特殊情况下，如果通过配置无法完全满足需求，开发者也可以考虑通过 CSS 强制显示控制栏：

.xgplayer-controls {
  opacity: 1 !important;
  visibility: visible !important;
}

不过，推荐优先使用播放器提供的配置选项，CSS 方案应作为最后手段使用。

最佳实践

在实际项目中，建议根据具体场景选择合适的配置组合：

1. 教育类视频：通常需要控制栏常驻，方便暂停和回看
2. 广告播放：可能只需要初始显示，播放开始后自动隐藏
3. 全屏展示：可以配置为鼠标移动时才显示控制栏

通过合理配置这些参数，可以为用户提供更加符合场景需求的视频播放体验。