#Controls

用于组合视频播放器控件并根据用户交互自动隐藏的容器组件。

#结构

导入组件并组装其部件：

<Controls.Root>
  <Controls.Group />
</Controls.Root>

#行为

如果用户处于活动状态，或者视频已暂停，此组件将显示控件。否则，它会在短暂延迟后隐藏控件。

用户活动通过播放器容器上的指针移动、键盘输入和焦点事件进行跟踪。在触摸设备上，快速点击切换可见性。mouseleave 立即将用户设置为非活动状态。

#样式

默认情况下，控件具有以下样式：

/* 点击穿透：点击穿过控件到达下方的视频 */
.controls {
  pointer-events: none;
}

.controls-group {
  pointer-events: auto;
}

/* 淡入淡出过渡 */
.controls {
  transition: opacity 0.25s;
}

.controls:not([data-visible]) {
  opacity: 0;
}

#无障碍

Controls.Root 不应用 ARIA 角色 — 它是布局包装器，不是地标。当提供了 aria-label 或 aria-labelledby 属性时，Controls.Group 自动接收 role="group"；否则不分配角色。

#示例

#基本用法

import { Controls, PlayButton, MuteButton, TimeSlider } from '@videojs/react';

function PlayerControls() {
  return (
    <Controls.Root>
      <Controls.Group>
        <PlayButton />
        <TimeSlider.Root />
        <MuteButton />
      </Controls.Group>
    </Controls.Root>
  );
}

#API 参考

#Controls.Root 属性

#Controls.Group 属性

#状态

#Data 属性

#参见

• PlayButton - 播放按钮
• TimeSlider - 时间滑块
• Player.Container - 播放器容器