如何在用户不活动时切换自定义video-js组件可见性

基础概念

video-js 是一个流行的开源 HTML5 视频播放器，提供了丰富的 API 和可定制的界面。用户不活动时切换组件的可见性通常涉及到前端开发中的状态管理和事件监听。

类型

基于时间的切换：设定一个时间阈值，如果用户在这段时间内没有进行任何操作，则隐藏视频播放器。
基于事件的切换：监听用户的特定事件（如鼠标移动、点击等），如果一段时间内没有这些事件发生，则隐藏视频播放器。

应用场景

视频播放器在用户不活动时自动隐藏，当用户重新活动时显示。
在单页应用（SPA）中，根据用户的活动状态动态调整视频播放器的可见性。

实现方法

以下是一个使用 JavaScript 和 video-js 实现用户不活动时切换视频播放器可见性的示例：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Video.js Visibility Toggle</title>
  <link href="https://vjs.zencdn.net/7.14.3/video-js.css" rel="stylesheet" />
</head>
<body>
  <video id="my-video" class="video-js vjs-default-skin" controls preload="auto" width="640" height="264">
    <source src="your-video-file.mp4" type="video/mp4" />
  </video>

  <script src="https://vjs.zencdn.net/7.14.3/video.min.js"></script>
  <script>
    let player = videojs('my-video');
    let timeout;

    function resetTimer() {
      clearTimeout(timeout);
      player.show();
      timeout = setTimeout(() => {
        player.hide();
      }, 5000); // 5 seconds of inactivity
    }

    document.addEventListener('mousemove', resetTimer);
    document.addEventListener('mousedown', resetTimer);
    document.addEventListener('keypress', resetTimer);

    resetTimer(); // Start the timer initially
  </script>
</body>
</html>