掌控视频，随心掌控播放器控件**

上周，我决定着手解决围绕控制栏悬而未决的问题，并踏上了相关播放器更新的征程。现在我终于有时间详细阐述其中的更新。

播放器控制栏的预期行为之一是，当用户在观看视频时处于非活动状态时，它会在几秒钟后淡出。以前，我们通过 Video.js 实现这一点的方法是通过一些复杂的 CSS 技巧和事件监听器。

然而，这种方法存在一些缺点：

• 它依赖于 CSS 规则的特定顺序。
• 鼠标悬停控制栏会导致计时器重置，从而导致控制栏不会淡出。

为了解决这些问题，我们重新设计了控制栏的淡出机制。现在，它基于一个简单的 JavaScript 定时器，该定时器会在用户处于非活动状态时启动。如果用户在计时器启动后与控制栏交互，计时器将被重置。

以下是隐藏控制栏的 JavaScript 代码：

const player = videojs('my-video');

player.on('play', () => {
  player.addClass('hide-controls');
});

player.on('mouseover', () => {
  player.removeClass('hide-controls');
});

player.on('mouseout', () => {
  setTimeout(() => {
    player.addClass('hide-controls');
  }, 3000);
});

这个脚本会在视频播放时添加一个 "hide-controls" 类，从而隐藏控制栏。当用户将鼠标悬停在控制栏上时，"hide-controls" 类会被移除，显示控制栏。如果用户在 3 秒内没有与控制栏交互，"hide-controls" 类将被重新添加，再次隐藏控制栏。

我们还添加了一个按钮，允许用户根据需要手动隐藏和显示控制栏。以下是添加按钮的 HTML 代码：

<button class="video-js-button video-js-control" type="button">
  <span class="vjs-icon-placeholder"></span>
  <span class="vjs-control-text">隐藏/显示控制栏</span>
</button>

以下是使按钮可点击并触发 JavaScript 函数的 JavaScript 代码：

const button = document.querySelector('.video-js-button');

button.addEventListener('click', () => {
  const player = videojs('my-video');

  if (player.hasClass('hide-controls')) {
    player.removeClass('hide-controls');
  } else {
    player.addClass('hide-controls');
  }
});

通过这些更新，用户现在可以完全控制视频播放器控件。他们可以选择在观看视频时自动隐藏控件，或者使用按钮手动隐藏或显示控件。